便捷的ajax请求

为什么要做这个呢?如果后端给的数据不单有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), 转变为执行某个函数, 从而实现属性的链式操作。 

    做到这里我们就完成这个封装啦,这样无论后端怎么改数据类型,我们基本不用改,就算要改也只需要改这个地方。

原文地址:https://www.cnblogs.com/cczlovexw/p/8078978.html