axios 返回拦截处理指定url_封装axios

前言

axios 是一个轻量的HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选。（ 如果你还不熟悉 axios，可以在[这里](axios中文文档|axios中文网)查看它的API。）

axios 的API很友好，你完全可以很轻松地在项目中直接使用。不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都就地写一遍，得疯！这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。

为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用。

那么，怎么封装 axios 呢？

原来的样子

封装前，先来看下，不封装的情况下，一个实际项目中axios请求的样子。大概是长这样：

axios('http://localhost:3000/data', {
    
  method: 'GET',
  timeout: 1000,
  withCredentials: true,
  headers: {
    
    'Content-Type': 'application/json',
    Authorization: 'xxx',
  },
  transformRequest: [function (data, headers) {
    
    return data;
  }],
  // 其他请求配置...
})
.then((data) => {
    
  // todo: 真正业务逻辑代码
  console.log(data);
}, (err) => {
    
  if (err.response.status === 401) {
    
  // handle authorization error
  }
  if (err.response.status === 403) {
    
  // handle server forbidden error
  }
  // 其他错误处理.....
  console.log(err);
});

可以看到在这段代码中，页面代码逻辑只在第15行处，上方的一大块请求配置代码和下方一大块响应错误处理代码，几乎跟页面功能没有关系，而且每个请求中这些内容都差不多，甚至有的部分完全一样。想象一下，每发一次请求都来这么一下，十几个请求一写，会是什么盛况？

封装步骤

封装的本质就是在待封装的内容外面添加各种东西，然后把它们作为一个新的整体呈现给使用者，以达到扩展和易用的目的。

封装 axios 要做的事情，就是把所有HTTP请求共用的配置，事先都在axios上配置好，预留好必要的参数和接口，然后把它作为新的axios返回。

接下来我们借助一个demo实现一个具有良好扩展性的 axios 封装。

demo目录结构如下(由Vue-cli 3.0 生成)：

|--public/
|--mock/
|   |--db.json  # 我新建的接口模拟数据
|--src/
|   |--assets/
|   |--components/
|   |--router/
|   |--store/
|   |--views/
|       |--Home.Vue
|   |--App.vue
|   |--main.js
|   |--theme.styl
|--package.json
|...

封装目标

我希望在 Home 页，发起 axios 请求时就像调用一个只有少量参数的方法一样简单，这样我就可