为什么要再封装 AJAX？

前言

已经有同窗提醒了使用axios.create(),使用axios.create()能够解决下面说的1 、二、三、5点，楼主也建议使用这种方式，既然axios已经提供了这样的API，那么也不必像本文这种方式实现，有点画蛇添足的嫌疑。因此本文在很大程度上已经没有的意义了，但本文针对特殊状况也是一种好的选择，例如 第四点 ，可根据本身的业务需求调整。

再封装AJAX所带来的好处是你想象不到的! 不管是对于代码的高效管理，仍是系统的设计...其收益远远超出你的想象。

为什么须要在封装

咱们先来看看如下应用场景，项目中涉及100个AJAX请求，其中：

1. 其中60个须要在请求头header设置token headers: {token: token}用于权限校验;
2. 其中20个为上传EXCEL文件须要在请求头中设置Content-Type;

headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
      }
复制代码

3. ③最后20个请求用来获取文件流，须要指定接受类型responseType: 'blob'
4. 须要对全局发起request进行拦截并作异步处理（强调：是异步处理）；
5. 若是你的项目已经作到一半，如今后端要加上token权限作认证；

   

上面说的 一、二、3能够在全局request拦截中进行处理，可是代价极大，须要为这100个接口都作判断再作相应处理... ；固然也能够不用全局拦截，为每一个接口都单独定义，我相信有很多同窗还是这样处理的，可是只要有改动，例如如今我要求全部的请求头都新增一个参数，那就只能一个一个接口的改.....这不是咱们想要的结果，因此 咱们须要对AJAX再封装！AJAX再封装！AJAX再封装！，由于至关重要，因此要多说几遍....

针对第四种状况，在axios里面若是对request只能作一些同步操做；作异步，直接就报错了... 但这也能够用封装AJAX来实现！简直就是黑魔法...厉害厉害...

封装实现

封装其实很简单，就是对原来真正的AJAX套一个壳，这个壳就是一个函数！ 在这个函数里都干了些什么见不得人事呢？干什么均可以，上面说的一、 二、 三、 四、 5均可以在这里悄悄的进行，那对原来的AJAX链式调用有影响吗？答案是确定的：没有影响。 先来看看我在代码里调用的AJAX：

_initEditParams () {
      this.$axios('Common/Permission/Get', {Id}).then(res => {
        ....
        ....
      })
    },
复制代码

是否是直接调用AJAX还要简洁？是的，由于这里把请求方法之类的配置项全放在封装里面进行了。

等一下...这里使用的 this.$axios方式调用的，好像和我使用的没啥差异嘛... 是的，这里也是经过Vue.prototype.$axios = axios添加到vue全局实例的，但这里添加的axios不是直接引入的axios插件，而是一个方法

import {axios} from './utils/common'
Vue.prototype.$axios = axios
复制代码

固然。也能够不用添加到全局实例里面，能够在组件中经过import语法引入使用。固然是项目里大量使用的封装方法直接使用Vue.prototype添加到vue实例。接下来咱们看看axios方法都作了些啥：

import Axios from 'axios'
import Store from '../vuex'

/*********************************
  ** Fn: axios
  ** Intro: 公用封装的axios  已在main.js中进行 $axios代理
  ** Intro: Store.state.permission.constUrl 为公用的接口前缀地址
  ** Intro: url 方法接受参数 为定义的 接口地址后缀
  ** Intro: data 方法接受参数 为定义的参数
  ** Author: zyx
*********************************/

export function axios (url, data) {
  return new Promise((resolve, reject) => {
    Axios({
      url: `${Store.state.permission.constUrl}${url}`,
      method: 'post',
      data: data,
      headers: {
        token: Store.state.permission.token
      }
    }).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}
复制代码

这个方法里关键点就是 Promise！只有Promise能知足链式调用。Promise真是个好东西，具体的Promise语法我就再也不这里说明了，由于说了也说很差。Promise有三个状态，pending、resolve和reject。妙处就在于能够一直让Promise处理pending状态（能够理解为等待），心情好了，就resolve()进行释放，在.then()里面进行相应处理。心情很差就直接reject()打回，那就在.catch()处理。（提示：Promise还能够用来作父子组件通讯，利用resolve()）

点个赞给力鼓励啦~

我的其余文章推荐：

• 补充一点：IE9不支持AJAX请求头，免费同窗入坑。
• 实现一个可无限折叠的table
• 当下拉列表数据过大时，该如何应对？
• Vue自定义指令实现input限制输入正整数
• 版权说明：本文首发于掘金，如需转载请注明出处。