总结 vue 中的 axios 封装逻辑📦（持续更新）

总结 vue 中的 axios 封装逻辑📦（持续更新），欢迎各位补充～～

axios 通用功能

1. 基础配置（配置跨域携带cookie，配置token，超时设置）；

2. 请求和响应拦截器；

• 请求成功，业务状态码200，解析result，不要一层一层的去判断拿数据；
• http请求200， 业务状态码非200，逻辑判断不成功，全局message提示服务端报错
• http请求非200， 说明http请求都有问题，也全局message提示报错

3、全局的loading配置, 默认开启

// 添加请求拦截
axios.interceptors.request.use((config) => {
  // 对请求配置做处理
  config.url = config.url.replace('/api/xx/', '/api/xx/xxx/');
  const { loading = true } = config;
  console.log("config:", config);
  config.headers.Authorization = vm.$Cookies.get("vue_admin_token");
  return config;
}, 
// 对请求错误做处理
(error) => Promise.reject(error));



// 添加响应拦截
import axios from 'axios';
import { message } from 'ant-design-vue';

axios.interceptors.response.use(
    // 对响应数据做处理
  response => {
    if (response.data.code === -101) {
       window.location.replace(login());
    } else if (response.data.code !== 0) {
      message.error(response.data.message);
      return Promise.reject(response.data);
    }
    return response.data;
  },
  // 对响应错误做处理
  err => {
    message.error(err?.message || '服务端异常');
    return Promise.reject(err);
  },
);