为何要再封装 AJAX?

前言

已经有同学提醒了使用axios.create(),使用axios.create()可以解决下面说的1 、2、3、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权限做认证;

上面说的 1、2、3可以在全局request拦截中进行处理,但是代价极大,需要为这100个接口都做判断再做相应处理... ;当然也可以不用全局拦截,为每个接口都单独定义,我相信有不少同学仍是这样处理的,但是只要有改动,例如现在我要求所有的请求头都新增一个参数,那就只能一个一个接口的改.....这不是我们想要的结果,所以 我们需要对AJAX再封装!AJAX再封装!AJAX再封装!,因为相当重要,所以要多说几遍....

针对第四种情况,在axios里面如果对request只能做一些同步操作;做异步,直接就报错了... 但这也可以用封装AJAX来实现!简直就是黑魔法...厉害厉害...

封装实现

封装其实很简单,就是对原来真正的AJAX套一个壳这个壳就是一个函数! 在这个函数里都干了些什么见不得人事呢?干什么都可以,上面说的1、 2、 3、 4、 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有三个状态,pendingresolvereject。妙处就在于可以一直让Promise处理pending状态(可以理解为等待),心情好了,就resolve()进行释放,在.then()里面进行相应处理。心情不好就直接reject()打回,那就在.catch()处理。(提示:Promise还可以用来做父子组件通信,利用resolve()

评论 抢沙发

表情
  1. #1

    来自河北石家庄的用户 11天前
    感谢您的文章,又学到了不少东西

  2. #2

    来自上海徐汇的用户 15天前
    老哥,写得很不错