$.ajax 取消上次接口

开发中， 一定会遇到tab数据切换，一般情况下， 我们只需要在页面上渲染最后一次请求的返回数据。 但是因为js是异步操作， 切换以后，同样的接口， 你不确定那个接口的数据先返回来， 就可能会出现了一个问题： 当前tab显示上个接口的数据信息， 这个时候，就需要解决这个bug

正常情况下，$.ajax 有一个方法， 可以直接取消当前接口

.abort();

  let requestName = $.ajax({
     method: 'get',
     url: '/jiekou',
     cache: false,
     timeout: 10000,
     data: {
       a: 1
     }
  })
  requestName.abort();

但是在实际工作中， 为避免代码冗余， 所以我们都会简化代码，封装请求接口， 也就是说多个接口走的一个方法， 这个时候，我们可以写成对象模式

  let obj = {};
  function cencelObjKeys(requestName) {
    if (requestName && obj[requestName] ) {
      obj[requestName].abort();
      delete obj[requestName];
    }
  }
  function setObjKeys(requestName, val) {
    if (requestName) {
      obj[requestName] = val;
    }
  }
  function ajax (requestName, method, url , timeout, data) {
     cencelObjKeys(requestName);
     let ajaxName = $.ajax({
        method: method,
        url: url,
        cache: false,
        timeout:  timeout,
        data: data
      })
      setObjKeys(requestName, ajaxName);
  }

由此， 解决了切换tab页可能会渲染上个请求返回数据的bug，
转载请标注出处， 觉得不错请点赞👍👍👍