【Vue自用笔记】如何封装axios？有什么好处？

如何封装axios：

1. 导入axios

import axios from 'axios'

2. 自定义实例默认值

const instance = axios.create({
    
    
    baseURL: '',
    timeout: 5000, //请求超时的时间
    headers: {
    
    
      // 可定义统一的请求头部
      post: {
    
    
        'Content-Type': 'application/json'
      }
    }
});

3. 添加请求拦截器

instance.interceptors.request.use(function (config) {
    
    
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
});

4. 添加响应拦截器

instance.interceptors.response.use(function (response) {
    
    
	// 对响应数据做点什么
    if(response.status === 200){
    
    
        return response.data;
    }else{
    
    
        console.error("请求错误")
        console.error(response)
    }
    return response;
}, function (error) {
    
    
    // 对响应错误做点什么
    return Promise.reject(error);
});

5. 导出创建的axios实例

export default instance

完整代码：

// 导入axios
import axios from 'axios'

// 自定义实例默认值
const instance = axios.create({
    
    
    baseURL: '',
    timeout: 5000,//设置请求超时的时间
    headers: {
    
    
    }
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    
    
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    
    
    instance// 对响应数据做点什么
    if(response.status === 200){
    
    
        return response.data;
        //这个返回值应根据接口的返回值进行调整，不一定必须是.data
    }else{
    
    
        console.error("请求错误")
        console.error(response)
    }
    return response;
}, function (error) {
    
    
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default instance

axios封装的好处：

1. 统一处理，提高效率，便于维护。
2. 不用再挂载在Vue实例的原型上，降低了耦合度，两者互不相干了，其中的任何一个出现问题，另一个都能正常运作。