axios的常见封装（基于react，嘿嘿有点浅显……但会慢慢迭代）

在看GitHub项目的时候，我项目clone完安装完依赖跑起来，第一步我会去看看这个项目的请求request、route配置、权限管理等。这个文章讲的是看的几个项目的request的封装方式。

一、引入请求库，配置基础请求

首先就是引入相应的库：

import Axios, { AxiosInstance, AxiosTransformer } from 'axios'; 

import qs from 'qs'; //请求数据格式化的库

import { createBrowserHistory } from 'history'; //组件外路由跳转
const history = createBrowserHistory();

配置基础请求参数：

const axios = Axios.create({
    baseURL: baseURL,    //基地址，根据情况，比如如果有多个基地址就先不设置
    timeout: 1000,    //请求时限
    headers: {
        post:{
                "post请求头"
             },
        get:{
                "get请求头"
            },
        'Content-Type': 'application/json',  //统一的请求头
    },
});

这里axios的基本配置就可以啦。

二、请求和响应拦截

请求拦截可以放token（如果你的token是放在localStorage），放在请求头里。响应拦截就是对后端返回的错误进行一些处理啦~

axios.interceptors.request.use((config) => {  //请求拦截
    // Read token for anywhere, in this case directly from localStorage
    const token = localStorage.getItem('token'); //取token
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;  //放至token
    } 

    return config;
});

响应拦截（我看的几个项目中对我这个新手比较友好的，容易看懂） 

axios.interceptors.response.use(   //响应拦截
    (response) => {   //有响应时
        const data = response.data;
        console.log('response:', response);
        if (response.status === 200) {  //200直接给数据
            return data;
        }

        notification.error({
            message: `请求错误 ${response.statusText}: ${response}`,
            description: data || response.statusText || 'Error',
        });

        if (response.status === 401) { //没登录
            history.push('/auth/login');
        }

        return Promise.reject(new Error(response.statusText || 'Error'));
    },
    (error) => {
        console.log('err:', error, error.response); // for debug
        let msg = "请求错误";
        if (error.response && error.response.status) {
            switch (error.response.status) {
                // 401: 未登录                
                // 未登录则跳转登录页面，并携带当前页面的路径                
                // 在登录成功后返回当前页面，这一步需要在登录页操作。 
                case 401:
                    history.push('/auth/login');
                    break;
                // 403 token过期                    
                // 登录过期对用户进行提示                    
                // 清除本地token和清空redux中token对象                    
                // 跳转登录页面   
                case 403:
                    history.push('/auth/login');
                    break;
                // 404请求不存在                
                case 404:
                    notification.error({
                        message: `请求不存在`,
                        description: error.response.data?.msg || 'Error',
                    });
                    break;
                case 406:
                    notification.error({
                        message: `请求参数有误`,
                        description: error.response.data?.msg || 'Error',
                    });
                    break;
                default:
                    notification.error({
                        message: `请求错误`,
                        description: error.response.data?.msg || 'Error',
                    });

            }
        }

        // throw new Error(error);
        return Promise.reject(error);
    },
);

至此就有了响应和请求的拦截，有了这两个就可以做一些请求前和请求后的操作了！

三、具体请求api的封装

到了这里之后可能各个项目接下来的操作就不同了，对api的封装，对api的二次封装（返回数据处理）。下面是我有使用过的一种方式。

1、先写一个具体请求：

const useGetList = <T>(url:string,params:any) => {
    const service = async () => {
         const data: T = await axios.get(
            `${url}`, {
            params,
        });
        return data;
    }
    return service; 
}

2、进行二次的使用和处理封装：

export const useGetProjects = (url:sting, '其他参数……') => {
    //一些操作
    return useRquest(useGetList(url,……),'其他配置');//useRuest一个阿里的hooks,处理请求十分强大，可以去ahoos官网了解一下。
}

然后外面直接调用useGetProjects请求就行啦~

小白，理解还比较浅显，欢迎大家指正！