axios二次封装有最佳实践吗？

Question

看了好多篇封装axios的文章，但五花八门的，看了也没总结出个思路，请大佬谈一下封装思路或者最佳实践之类的东西，谢谢大佬。

更新：
看过的文章：
https://juejin.im/post/5b714a... //axios二次封装学习
https://juejin.im/post/5a52c9... //记一次封装Axios的经历
https://juejin.im/post/5a293e... //vue项目中对axios的二次封装
https://zhuanlan.zhihu.com/p/... //【源码拾遗】axios —— 极简封装的艺术
https://juejin.im/post/5b55c1... //vue中Axios的封装和API接口的管理（更新）
https://segmentfault.com/a/11... //axios请求封装和异常统一处理
https://juejin.im/post/59fd98... //在 vue-cli 里基于 axios 封装复用请求
https://github.com/glangzh/re... //基于JavaScript装饰器（Decorator）和 axios 实现的网络请求库
https://juejin.im/post/5a1550... //Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
https://juejin.im/post/59a22e... //给axios做个挺靠谱的封装(报错,鉴权,跳转,拦截,提示)

Answer 1

不太明白你说的封装是什么意思，这是我之前简单处理过的类

import axios from 'axios';
import { Helper } from '../helper';

declare var Promise: any;

export class Request {


    static _instance: Request;

    static getInstance() {
        this._instance || (this._instance = new Request());
        return this._instance;
    }

    config: any;

    constructor() {

        axios.interceptors.request.use(function (config) { 
            // 处理请求数据，如添加Header信息等，
            // 完善url等
            config.url = `https://.../${config.url}`
            return config;
        });
        axios.interceptors.response.use((response) => {
            // 处理返回数据
            return response.data;
            
        }, (error) => {

            if (error.response.status == 401) {
                // 未登录
            }
            else if(error.response.status == 400) {
                // 错误信息 alert
            }

            return Promise.reject(error);
            
        });

    }

    get(uri: string, config: object = {}) {
        return axios.get(uri, config);
    }

    post(uri: string, data: any = {}, config: object = {}) {
        return axios.post(uri, data, config);
    }

    put(uri: string, data: any, config: object = {}) {
        return axios.put(uri, data, config);
    }

    delete(uri: string, config: object = {}) {
        return axios.delete(uri, config);
    }

}

Answer 2

你说的封装是重写一个axios 还是把axios对于数据传参格式的封装?

Answer 3

axios 还要再封装一次？应该是定制化吧，一般写一些 interceptors 的逻辑就足够应付百分之90的场景了。

---

updated

好吧，看了你更新描述中的一些文章，我认为这种偏定制化的封装并不存在最优解，正所谓萝卜青菜各有所爱，你喜欢这么处理异常，我喜欢那么处理异常，很难取舍，而且看了一些文章中的所谓封装，竟然还要强行引入 element-ui 中的 Message 组件，更加使其封装出来的东西与具体某个项目耦合了起来，并不具备广义上的通用性。

Answer 4

我目前使用的方式是

axios 主要用于拦截 request, response, 接口只需要提供地址,参数即可
至于你想要的 messages 提示,那些我认为应该在 vuex 中完成

GET_USER: state => {
  state.loading = true;
}
GET_USER_SUCCESS: state => {
  state.loading = false;
}

然后对于 loading 显示 加载动画

Answer 5

都看了下，感觉《vue中Axios的封装和API接口的管理（更新）》应该是这几个里面最符合我的需求的一个方案了