从零开始学VUE之网络模块(Axios)

彼岸舞

发布于 2021-07-01 18:04:39

33100

代码可运行

文章被收录于专栏：java开发的那点事java开发的那点事

运行总次数：0

代码可运行

Axios

功能特点

在浏览器中发送XHR请求
在Node.js中发送http请求
支持 Promise API
拦截请求和响应

支持多种请求方式

axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url,data[,config])
axios.put(url,data[,config])
axios.patch(url,data[,config])

安装

npm install axios --save

测试地址[老师的]

http://123.207.32.32:8000/home/multidata

简单使用

// 导入 axios
import axios from "axios";

// 使用
axios({
  url:'http://123.207.32.32:8000/home/multidata'
}).then(res => {
  console.log(res);
})

传递参数

(拼接URL后面)

axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

发送并发请求

/**
 * 发送多请求
 */
axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
]).then(res => {
  // 返回结果res是一个数组 [0] 就是第一个请求返回的结果 [1]...
  console.log(res);
})
axios.all([
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url:'http://123.207.32.32:8000/home/multidata'
  })
  // 可以通过 axios.spread展开返回结果
]).then(axios.spread((res1,res2) => {
  // 返回结果res是一个数组 [0] 就是第一个请求返回的结果 [1]...
  console.log(res1);
  console.log(res2);
}))

抽取默认配置

/**
 * 默认配置
 */
// 默认前缀URL
axios.defaults.baseURL = 'http://123.207.32.32:8000'
// 超时时间 单位:毫秒
axios.defaults.timeout = 5000

/**
 * 简单使用
 */
axios({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})

常见的配置

请求地址
url:'/user'
请求类型
method:'get'
请求路径
baseURL:'https://www.baidu.com'
请求前的数据处理
transformRequest:[function(data){}]
请求后的数据处理
transformResponse:[function(data){}]
自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},
URL查询对象
params:{id:12}
查询对象序列化函数
paramsSerializer:function(params){}
request body
data:{key:'aa'}
超时设置s
timeout : 1000
跨域是否携带Token
withCredentials:false
自定义请求处理
adapter:function(resolve,reject,config){}
身份验证信息
auth:{uname:'彼岸舞',pwd:'111'}
响应的数据格式
json | blob | document | arraybuffer | text | stream
responseType : 'json'

创建对应的Axios的实例

let config = {
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
};
let axiosInstance = axios.create(config);
axiosInstance({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})

拦截器

let config = {
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
};
let axiosInstance = axios.create(config);

// 请求拦截器
axiosInstance.interceptors.request.use(
  // 拦截请求时的 config
  config => {
    console.log(config);
    return config;
  },
  // 拦截请求失败的error 一般请求不会失败的
  error => {

  }
)
// 响应拦截器
axiosInstance.interceptors.response.use(
  // 请求返回的数据
  res => {
    console.log(res);
    // 做数据过滤 只返回后端返回的data
    return res.data;
  },
  // 请求失败的error
  error => {
    console.log(error);
  }
)

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-06-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

php