普通人的星光灿烂，大多数人的生存模板，加油

最近群友提出一个需要，用户在首页的时候调用接口，

  1. 接口申请有上线，超出的局部在已实现之后持续申请;
  2. 接口token生效了，或者是无权限，如何在第一次发现接口401的状况下，勾销剩下的接口申请，并且重定向到401,

其中的难点次要是在如何勾销申请，我查阅了uni.request的文章，它提供了跟原始XHR一样的停止申请的办法abort();

解决方案(思路)

  1. 设置最大申请数limit,当申请数量超出的局部,将申请放在一个数组队列外面waitingList,期待,当后面的申请实现的时候，每次都去取出waitingList第0个元素,如果有申请，那么就执行，如果没有，就return
  2. 正在执行的申请都会存入excutingList执行队列当中,当发现接口的返回code == 401时,将剩下的接口都执行abort()办法，即中断接口申请,而后在将以后页面的地址重定向到login页面

流程图如下:

如果可能真正了解流程图的话，我想实现理论是简略的,能够本人手动尝试封装,如果有不懂的局部能够查看以下的代码:

import Config from '@/common/config.js';const waitingList = [];  // 期待申请队列const excutingList = []; // 执行队列const limit = 10;        // 最大申请数const excuteWaitingList = () => {  const func = waitingList[0];  if (typeof func === 'function') {    func();  }  waitingList.splice(0, 1);};const requestPromise = (  resolve,  reject,  url,  method = 'get',  params,  callback) => {  const token = Config.token || uni.getStorageSync('token');  let headers = {};  if (token) {    headers['Authorization'] = 'Bearer ' + token; // 让每个申请携带自定义token 请依据理论状况自行批改  }  let success = false;  const baseUrl = Config.baseUrl + Config.requestPrefix;  const requestTask = uni.request({    url: url.startsWith('https://') ? url : baseUrl + url, //仅为示例，并非实在接口地址。    method: method ? method.toUpperCase() : '',    header: headers,    data: params,    success: (res) => {      const result = res;      if (url.startsWith('https://')) {        resolve(result.data);      }      let errorMsg = '申请有误';      if (result && result.data) {        if (result.data.code === 200) {          success = true;          resolve(result.data);        } else if (result.data.code === 401) {          if (window.location.href.includes('/pages/dashboard-login/index')) {            uni.reLaunch({              url: '/pages/dashboard-login/index',            });            Config.clearAllRequest();          } else            if (uni.commonData.currentPage !== 'login') {              uni.reLaunch({                url: '/pages/login/index',              });              Config.clearAllRequest();            }          reject(errorMsg);        } else {          errorMsg = result.data.msg || errorMsg;          reject(errorMsg);          // reject(result.data)        }      } else {        reject(errorMsg);      }    },    fail (res) {      console.error(res, 'fail')      reject('服务异样');    },    complete () {      if (success) {        resolve(true);      } else {        resolve(false);      }      let index = excutingList.indexOf(requestTask);      excutingList.splice(index, 1);      if (typeof callback === 'function') {        callback();      }      // console.log('complete')      // console.log(tasks, 'tasks')      // console.log(waitingList, 'waitingList')      // console.log(excutingList, 'excutingList')      excuteWaitingList();    },  });  excutingList.push(requestTask);};export default function ajaxRequest (url, method = 'get', params) {  const promiseObj = new Promise((resolve, reject) => {    if (excutingList.length > limit) {      waitingList.push((callBack) => {        requestPromise(resolve, reject, url, method, params, callBack);      });    } else {      requestPromise(resolve, reject, url, method, params);    }  });  return promiseObj;}Config.clearAllRequest = () => {  excutingList.map((item) => {    if (item && item.abort) {      item.abort();    }  });  waitingList.length = 0;  excutingList.length = 0;}

课后作业

思考下如果应用Axios要如何实现以上的需要，欢送小伙伴在评论区评论以及说下本人的思路,哈哈

写在最初

我是crazyu，一位前端开发工程师。

  • 文中如有谬误，欢送在评论区斧正，如果这篇文章帮到了你，欢送点赞和关注
  • 本文首发于微信公众号：crazyu 前端，未经许可禁止转载

本文由mdnice多平台公布