在Vue中使用Axios

Axios 并发请求

1. axios.all

//同时处理多个请求
//axios.all([])传入一个数组,axios.spread()接受返回值
axios.all([
    axios.get('/xx'),
    axios.get('/xxx')
    ]).then(axios.spread((res1,res2) => {
    console.log(res1,res2)
})

创建Axios实例

1. axios.create({})创建基本实例

//http.js
const instance = Axios.create({
    baseURL: 'http://xxxx.com',
    timeout: 1000 //超时时长
});
export default instance;

引入main.js中引入http.js, Vue.prototype.$ajax=instance;将实例挂载到Vue对象的属性上，即可全局使用 2. axios配置参数

//headers设置请求头（常用）
headers: {
    token: ''//在请求头中携带token常用于鉴权登录
},
url: '',//请求地址
params: {},//请求头参数，参数回拼接到url
data: {}, //请求体参数
method: 'POST/GET/DELETE/...' //请求的方法

3. 默认配置

• 通过axios.defaults.baseURL = 'http//:xxxx'配置默认地址
• 通过axios.defaults.timeout = 1000配置默认请求超时
• 大多数情况我们可以对axios进行封装配置，再引入使用
• 如果有多个请求存在多个请求状态，可创建多个axios实例去处理

拦截器

在请求或响应被处理前进行拦截

1. 请求拦截器

axios.interceptors.request.use(config => {
    // 在请求处理前完成，如检查token是否过期
    config.headers = {
        token: ''
    }
    
    //如果有多个token,可以采用以下方式
    config.headers.token = ''
    
    return config; //返回config配置
}, err => {
    //请求错误时返回一个Promise对象
    return Promise.reject(err);
})

2. 响应拦截器

axios.interceptors.response.use(res => {
    //响应成功时进行拦截处理
    return res;
}, err => {
    //用err.response.status来判断错误状态码
    return Promise.reject(err)
})

3. 拦截处理

axios.get('/api', config).then(res => {
    //config为请求时拦截器的参数配置
    // res为接受到拦截器的res
}).catch(err => {
    // err为请求时错误或响应时错误
});

4. 取消拦截（了解）

const interceptors = axios.interceptors.request.use(config => {
    config.headers = {
        auth: true
    };
    return headers;
});

//取消请求拦截
axios.interceptors.request.eject(interceptors);