内容简介:再我们先来看看以下应用场景,项目中涉及100个上面说的 1、2、3可以在
再 封装AJAX 所带来的好处是你想象不到的! 无论是对于代码的 高效管理 ,还是 系统的设计 ...其收益远远超出你的想象。更重要的一点是:别人一看你的代码心里就有数了, 高手,一定是高手...
为何需要在封装
我们先来看看以下应用场景,项目中涉及100个 AJAX
请求 ,其中:
- 其中60个需要在 请求头header 设置 token
headers: {token: token}
用于权限校验; - 其中20个为 上传EXCEL文件 需要在请求头中设置 Content-Type ;
headers: { 'Content-Type': `multipart/form-data; boundary=${data._boundary}` } 复制代码
- ③最后20个请求用来
获取文件流
,需要指定接受类型responseType: 'blob'
- 需要对 全局发起request 进行 拦截 并做 异步处理 ( 强调 :是 异步处理 );
- 如果你的项目已经做到一半,现在后端要 加上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
有三个状态, pending 、 resolve 和 reject 。妙处就在于可以一直让 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) }) }) } 复制代码
个人其他文章推荐:
- 补充一点:IE9不支持AJAX请求头,免费同学入坑。
- 实现一个可无限折叠的table
- 当下拉列表数据过大时,该如何应对?
- Vue自定义指令实现input限制输入正整数
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 许岑跨界学习高手:如何成为有效学习的高手
- 高手,这是高手!推荐几个我常看的顶级技术类公众号
- [译] 编程高手是如何练成的?
- webpack4 高手之路 第四天
- Webpack Loader 高手进阶(一)
- Webpack Loader 高手进阶(二)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。