axios接口统一管理怎么实践？

Question

项目刚开始的时候 axios的引入在 main.js中，然后通过Vue.prototype.$ajax = axios;将axios挂到实例上，在各个文件中调用 this.$ajax来发送请求；
现在项目越来越大，好多接口是通用的，在各个文件中的方法不能通用，所以请问怎么样将所有的接口统一管理，在各个文件中可以按照需要引入？ 谢谢大家？

Answer 1

我们公司的实践是分层的，类似mvc，不会做挂载，我们分为：

• 网络工具层：封装了axios的基本网络操作
  只封装了网络的操作，比如公共头部之类的东西，

  get(url, data)
  post(url, data)

• 模型层，封装了数据请求和网络工具层
  对每个模块和接口封装

  UserModel.login(username, pwd)
  UserModel.register(username, pwd, code)

• 视图层

  • React
  • Vue

栗子

• Http.js

  class Http{
      static post(url, data){
         return new Promise(()=>{
             axios.post(url, data)
                 .then((res)=>{
                     if(res.data.code==='success'){
                         resolve(res.data.data)
                     }else{
                         reject({code:res.data.code, summary:res.data.summary})
                     }
                 })
         })
      }
  }

• UserModel

  class UserModel{
      login(username, pwd){
          return Http.post(API_USER_REGISTER,{username, pwd})
      }
  }

• 视图层

  try{
      // 登陆成功
      let {tel} =await UserModel.login("admin", "admin")
      // 做登陆成功的操作
      ....
  }catch(e){
      // 登陆失败
      alert(e.summary)
      // 做登陆失败的操作
  }

• 说明
  上面的栗子，完全感受不到调用了axios，除了await关键词，也完全不知道我们调用了api

好处

• 网络工具层是独立的，我不使用axios也没关系，就算我突然换了其他网络框架，只要保持接口一致，对上层也不影响，测试方便
• 模型层是针对接口封装的，和接口相关，和视图也没有太大关系，测试方便
• 视图层，上面两层都是纯粹的js，可以独立运行和测试，和视图层解耦，无论你用什么视图框架，也不影响，配合await、async可以做到像调用本地方法一样调用api，一个字爽！

模型层划分

一般可以根据RESTFul划分，就可以做到按需引入，不能太大，也没必要太小

• ArticleModel:

  class ArticelModel{
      static list(){}
      static detail(){}
      ....
  }

源码

• vue

Answer 2

目前我的做法是这样的~ 每个模块单独提一个js出来 按需导入就行了~

Answer 3

我的做法是直接将接口封装为一个类,实例化之后再挂载到vue上.通用的方法就写道类中.