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

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

  • 相关阅读:
    Eclipse/MyEclip中使用复制粘贴功能很卡
    ActiveMQ使用教程
    ActiveMQ常见消息类型
    推荐12个最好的 JavaScript 图形绘制库
    eclipse 打包springboot成jar
    CentOS 7下ELK(6.2.4)++LogStash+Filebeat+Log4j日志集成环境搭建
    elasticsearch启动常见错误
    使用haproxy实现负载均衡集群
    linux配置mysql5.6 主主复制同步
    力扣No.102 二叉树的层次遍历
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/8078978.html
Copyright © 2011-2022 走看看