关于 Axios 的再封装...

先设计下我想要这个通用请求能达到什么样的效果：

正常请求该有的（跨域携带cookie，token，超时设置）

添加请求拦截器

添加响应拦截器

请求成功，业务状态码200，解析result给我，我不想一层一层的去判断拿数据

http请求200， 业务状态码非200，说明逻辑判断这是不成功的，那就全局message提示服务端的报错

http请求非200， 说明http请求都有问题，也全局message提示报错

http请求或者业务状态码401都做注销操作

全局的loading配置, 默认开启，可配置关闭（由于后端的问题，经常会让前端加防抖节流或者loading不让用户在界面上疯狂乱点，行吧行吧，你们的问题前端帮你们解决，你的规矩就是规矩是吧）

import Qs from 'qs'import axios, { AxiosInstance, AxiosRequestConfig,AxiosPromise } from "axios";export const Axios = (url:string='',method:any='get',params:any={},headers:any={})=>{    const BaseUrl = process.env.NODE_ENV==='development'? '' : process.env.BASEURL;    // const token = $storage.get('token') || null;    // const token = !localStorage.getItem('__auth_provider_token__')?localStorage.setItem('__auth_provider_token__',''):localStorage.getItem('__auth_provider_token__');    // let navigate = useNavigate();    // if(sessionStorage.getItem("__auth_provider_isLogin__") !== '1' && isAuth ){//&& !token    //     alert('token失效');    //     // navigate('/login');    //     return new Promise((resolve, reject) => {});    // }    // 1. 执行异步ajax请求    let defaultHeaders:any = {        'Content-Type': 'application/json;charset=UTF-8',        // 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', // 指定提交方式为表单提交        // 'Content-Type' :'multipart/form-data;charset=UTF-8',        'Accept': 'application/json', // 通过头指定，获取的数据类型是JSON 'application/json, text/plain, */*',        // 'Access-Control-Allow-Origin': 'true',        // 'Access-Control-Allow-Credentials': 'true',        // 'X-Requested-With': 'XMLHttpRequest',        'Authorization': 'token',        // 'Cross-Origin-Embedder-Policy': 'require-corp',        // 'Cross-Origin-Opener-Policy': 'same-origin'    }    if(headers){        for (let i in headers) {            defaultHeaders[i] = headers[i];        }    }    // @ts-ignore    const instance = axios.create({        baseURL: BaseUrl,        url: url,        method: method || 'get',        // mode: 'cors',        // cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached        // `headers` 是即将被发送的自定义请求头        headers: {...defaultHeaders},        // `params` 是即将与请求一起发送的 URL 参数        // 必须是一个无格式对象(plain object)或 URLSearchParams 对象        params: {},        // `paramsSerializer` 是一个负责 `params` 序列化的函数        // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)        paramsSerializer: function(params) {            return Qs.stringify(params, {arrayFormat: 'brackets'})        },        // `data` 是作为请求主体被发送的数据        // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'        // 在没有设置 `transformRequest` 时，必须是以下类型之一：        // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams        // - 浏览器专属：FormData, File, Blob        // - Node 专属： Stream        data: params || {},        // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)        // 如果请求话费了超过 `timeout` 的时间，请求将被中断        timeout: 0,        // `withCredentials` 表示跨域请求时是否需要使用凭证        withCredentials: false, // default 为true则产生跨域        // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'        responseType: 'json', // default    });    // 添加请求拦截器    instance.interceptors.request.use( (config:any) => {        // 在发送请求之前做些什么        console.log('添加请求拦截器')        return config;    }, (error:any) => {        // 对请求错误做些什么        return Promise.reject(error);    });    // 添加响应拦截器    instance.interceptors.response.use( (response:any) => {        // 对响应数据做点什么        console.log('添加响应拦截器')        return response;    }, (error:any) => {        // 对响应错误做点什么        return Promise.reject(error);    });    /*// 封装URL基地址检测函数    function getBaseURL (url) {        if (url.startsWith('/这里是后台接口的前缀')) {            return '这里是后台接口的服务URL'        } else {            return '这里是前台接口的服务URL'        }    }    // 设置请求拦截器    response.create.interceptors.request.use(function (config) {        // 判断config.url的前缀是什么，然后进行请求baseURL的设置        config.baseURL = getBaseURL(config.url)        return config    })*/return instance;}

拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

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

封装 Get

export const Post = (url='',params={}) => {    return Axios(url,'post',params)}

封装 Post

export const Get = (url='',params={}) => {    return Axios(url,'get',params)}

使用

import { createAxiosByinterceptors } from "@/api/request";const request = createAxiosByinterceptors({  baseURL: localhost:7007,});//lodaing配置export const appList = (params: any): Promise<any> =>  request.get("/app", { params, loading: true }); // 不需要默认的全局loading效果可配置loading为false关闭 loading默认为true// 文件下载export const exportGoods = (data: any) =>  request.post("/export", data, {    responseType: "blob",  });

原文:https://juejin.cn/post/7103188409039978504