二次封装axios

首先我们要引入axios，引入之后我们设置好请求返回结果的提示语

     const MESSAGE = Object.freeze({
            token: '凭证已过期，请重新登录',
            login: '账号已在其他地方登录，请重新登录',
            registerSuccess: '您已注册成功，请前往登录',
            registerReject: '账号已注册,请前往登录'

        })

在设置一下axios的基本配置，baseURL一般都是配合webpack的环境变量实现的，我们这里就直接写上，在写一个请求超时取消时间，需要注意后面配置会覆盖前面的相同配置

   const AXIOSOPTION = {
            // 用于发送请求时添加请求前缀
            baseURL: 'http://xxxx.com/api',
            // 请求超时时间
            timeout: 5000
        }
        //还可以设置默认配置
        axios.defaults.headers.TOKEN = AUTH_TOKEN;

声明获取token方法

        // 获取token
        function getToken() {
            return localStorage.getItem('token');
        }

创建一个axios实例，把我们刚自定义配置传递进去

        const serve = axios.create(AXIOSOPTION);

声明一个请求拦截器，请求拦截器中可以做一些我们现在请求发送之前做的一些事情，这里我就通过获取token方法判断token是否存在，存在则携带在请求头中，在进行继续发送请求，如果在请求前发生错误则进行抛出错误阻止往下进行


   
      
        // 请求拦截器
        serve.interceptors.request.use((config) => {
            const TOKEN = getToken();
            if (TOKEN) {
                config.headers['Token'] = TOKEN;
            }
          
            return config;
        }, (error) => {
            return Promise.reject(error);
        });

声明一个响应拦截器，对于请求返回的数据需要进行判断状态码，根据对应的状态码进行不同的操作，状态为0则正常返回数据，不是则根据状态码的不同给出相应的提示和操作，如果请求出错，则进行抛出错误


        // 响应拦截器
        serve.interceptors.response.use((response) => {
            const { code, data } = response;
            switch (code) {
                case '0':
                    return data;
                    break;

                case '1':
                    console.log('数据获取失败');
                    return data;
                    break;
                case '1100':
                    // 重新登录操作
                    alert(MESSAGE.login)
                    break;
                case '1200':
                    //用户凭证失效
                    alert(MESSAGE.token)

                    break;
                case '1300':
                    //用户注册成功
                    alert(MESSAGE.registerSuccess)

                    break;
                case '1300':
                    //用户登录提示
                    alert(MESSAGE.registerReject)
                    break;
            }
            // 对响应数据做点什么
            return response;
        }, (error) => {
            // 对响应错误做点什么
            return Promise.reject(error);
        });

封装请求方法

axios库经过二次封装后，在进行封装请求并导出，便于使用，这里只封装get和post请求，其他请求操作也可以照此封装和导出

     export function GET(url, data) {
            return serve({
                url,
                method: 'get',
                data
            })
        }
        export function POST(url, data) {
            return serve({
                url,
                method: 'post',
                data
            })
        }

使用

将封装后的get和post请求方法导入并声明一个API常量，通过原生的Object.freeze方法进行冻结API常量的指向对象，以此防止后面操作去修改对象里面的值，API常量对象中存放的是接口地址，如果使用该接口则使用API.的语法进行获取到对应的接口地址并封装在函数中且导出，这样便于后期管理接口

    import { GET, POST } from './axios'
        const API = Object.freeze({
            login: '/login', //登录
            home: '/home',//获取首页数据
        })
        export function Login(data = {}) {
            return POST(API.login, data)
        }
        export function getHome(data = {}) {
            return GET(API.home, data)
        }

在将封装后的接口请求导入进入到使用的页面中，进行使用并传递参数，由于接口请求后会返回一个promise对象，所以我们这里用promise的then方法捕获接口请求成功且进行处理，使用catch方法捕获接口请求报错或失败且进行处理

 import { Login, getHome } from './api'
        //    登录操作
        function userLogin(query) {
            const { userName, passWord } = query;
            Login({ userName, passWord }).then(R => {
                const { code, data } = R;
                if (!data.length || code != 0) return;
                // 对数据的进行操作
            }).catch(error => {
                throw new Error(error);
            })
        }
        // 获取首页数据
        function getHome(){
            getHome().then(R => {
                const { code, data } = R;
                if (!data.length || code != 0) return;
                // 对数据的进行操作
            }).catch(error => {
                throw new Error(error);
            })
        }

坚持努力,无惧未来！

axios二次封装

二次封装axios

封装请求方法

使用