高手篇 【为何要再封装 AJAX】?

栏目: jQuery · 发布时间: 6年前

内容简介:再我们先来看看以下应用场景,项目中涉及100个上面说的 1、2、3可以在

封装AJAX 所带来的好处是你想象不到的! 无论是对于代码的 高效管理 ,还是 系统的设计 ...其收益远远超出你的想象。更重要的一点是:别人一看你的代码心里就有数了, 高手,一定是高手...

为何需要在封装

我们先来看看以下应用场景,项目中涉及100个 AJAX 请求 ,其中:

  1. 其中60个需要在 请求头header 设置 token headers: {token: token} 用于权限校验;
  2. 其中20个为 上传EXCEL文件 需要在请求头中设置 Content-Type ;
headers: {
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
      }
复制代码
  1. ③最后20个请求用来 获取文件流 ,需要指定接受类型 responseType: 'blob'
  2. 需要对 全局发起request 进行 拦截 并做 异步处理强调 :是 异步处理 );
  3. 如果你的项目已经做到一半,现在后端要 加上token权限 做认证;
    高手篇 【为何要再封装 AJAX】?

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

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

高手篇 【为何要再封装 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()

点个赞给力鼓励啦~

代码奉上

最后奉上我自己封装的三个方法:

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
      }
      // withCredentials: true
    }).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

/********************************
  ** Fn: axiosImportFile
  ** Intro: 该方法用于导入excel文件  需改变content-type
  ** Author: zyx
*********************************/
export function axiosImportFile (url, data) {
  return new Promise((resolve, reject) => {
    Axios({
      url: `${Store.state.permission.constUrl}${url}`,
      method: 'post',
      data: data,
      headers: {
        token: Store.state.permission.token,
        'Content-Type': `multipart/form-data; boundary=${data._boundary}`
      }
      // withCredentials: true
    }).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}

/**
 * 专用于获取excel 流
 * responseType: 'blob'
 * @param url
 * @returns {Promise}
 */
export function axiosExcel (url, params) {
  return new Promise((resolve, reject) => {
    Axios({
      url: `${Store.state.permission.constUrl}${url}`,
      method: 'post',
      headers: {
        token: Store.state.permission.token
      },
      data: params,
      responseType: 'blob'
      // withCredentials: true
    }).then(res => {
      resolve(res)
    }).catch(err => {
      reject(err)
    })
  })
}
复制代码

个人其他文章推荐:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机程序的构造和解释

计算机程序的构造和解释

Harold Abelson、Gerald Jay Sussman、Julie Sussman / 裘宗燕 / 机械工业出版社 / 2004-2 / 45.00元

《计算机程序的构造和解释(原书第2版)》1984年出版,成型于美国麻省理工学院(MIT)多年使用的一本教材,1996年修订为第2版。在过去的二十多年里,《计算机程序的构造和解释(原书第2版)》对于计算机科学的教育计划产生了深刻的影响。第2版中大部分重要程序设计系统都重新修改并做过测试,包括各种解释器和编译器。作者根据其后十余年的教学实践,还对其他许多细节做了相应的修改。 海报:一起来看看 《计算机程序的构造和解释》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

SHA 加密
SHA 加密

SHA 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具