zoukankan      html  css  js  c++  java
  • 便捷的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), 转变为执行某个函数, 从而实现属性的链式操作。 

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

  • 相关阅读:
    没有项目种类分配到科目XXX
    编制总账科目凭证技巧(贷方)
    设置雇员容差组
    设定容差组
    英语-20210226
    如何流利说英语
    英语-20210225
    EPS(每股盈余)
    大本力量训练法
    拓端tecdat|R语言逻辑回归分析连续变量和分类变量之间的“相关性“
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/8078978.html
Copyright © 2011-2022 走看看