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), 转变为执行某个函数, 从而实现属性的链式操作。 

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

  • 相关阅读:
    NET Office 组件Spire
    Tasks.Parallel
    vue 2.0-1
    ESLint 检查代码质量
    找到 OSChina 早上 8 点钟容易宕机的原因 ?
    MySQL索引 专题
    SqlMapConfig.xml全局配置文件解析
    mybatis mapper namespace
    resultMap之collection聚集
    Uploadify 控件上传图片 + 预览
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/8078978.html
Copyright © 2011-2022 走看看