为什么要做这个呢?如果后端给的数据不单有JSON字符串,还有对象呢?这个时候我们就要每个都处理(JSON.parse)。万一后端又改了,所有都是对象呢?如此一来我们就需要对我们的ajax进行封装。
这里我们使用axios,所以我们需要进行axios安装。
Using npm:
$ npm install axios
Using bower:
$ bower install axios
当然你也可以使用cdn:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
安装完成之后我们先看看如何使用,这样可以直观看到最后如何调用这个ajax
ajaxService.get('/order/00132') .then((data) => { console.log(data); }) .catch((error) => { console.log(error); }) ;
看完,是不是觉得其实跟axios官方提供的很像,接下来就讲我怎么进行封装:
const ajaxService = new Proxy(axios, { get (target, propKey, receiver) { return function (...args) { return target[propKey](...args) .then((res) => { const resData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data; return typeof resData.obj === 'string' ? JSON.parse(resData.obj) : resData.obj; }) .catch((err) => { throw err; }); } } });
利用 es6的Proxy实例的方法, 可以将读取属性的操作( get), 转变为执行某个函数, 从而实现属性的链式操作。
做到这里我们就完成这个封装啦,这样无论后端怎么改数据类型,我们基本不用改,就算要改也只需要改这个地方。