fetch拦截器的实现

Posted 2023-05-16

参考技术A fetch拦截器（interceptors）一般用于发起http请求之前或之后对请求进行统一的处理，如token实现的登录鉴权（每个请求带上token），统一处理404响应等等。ajax拦截器有很多ajax库已经实现了，如jq的$.ajaxSetup()，$.ajaxPrefilter()，$.ajaxError；axios的axios.interceptors.request.use()，axios.interceptors.response.use()；vue-resource的Vue.http.interceptors.push()等等。
  fetch常用的库有whatwg-fetch，node-fetch，isomorphic-fetch。whatwg-fetch是做了polyfill的让不支持fetch的 browser也可以使用fetch，node-fetch运行在node上，isomorphic-fetch是对前两者做了封装，既可以跑在browser上也可以跑在node上。然后下面是一个简易的fetch拦截器的实现。

原理很简单，把原生的fetch封装起来，维护两个数组，分别保存请求之前的操作和请求之后的操作，用新的fetch api做请求，依次执行这些操作，拦截处理数据。

使用示例：

在onBackPress中实现退出拦截时不生效

现象描述

在快应用中弹出一个弹窗，期望效果是该弹窗在用户确认后再退出，但是使用onbackpress控制确认弹窗后自动退出不生效。

问题分析

快应用引擎实现机制决定了onbackpress不能有耗时的操作。当超过一段时间后，如果代码还没有处理完，就会按返回值为false处理，即默认关闭该页面。问题代码中通过$watch监听showResult的变化，若变化则执行fetch操作，而这些操作可能还没执行完，从而导致弹窗自动关闭。
问题代码如下：

1.  onBackPress() {
2.    console.log("main onBackPress. status = " + this.showResult);
3.    if (this.showResult) {
4.      this.$element(\'textarea\').focus({ focus: false });
5.      this.content = \'\';
6.      this.touchedIndex = -1;
7.      //解决因监听showResult变化后的事件处理过缓问题，导致系统返回键有时失效
8.      this.showResult = false;
9.      return true;10.   }
11.   return false;
12. },
13. initDataWatchConfig() {
14.   let that = this;
15.   this.$watch(\'showResult\', (newV, oldv) => {
16.     if (!that.showResult) {
17.       audio.stop();
18.       this.getphoto()//此处是一个比较耗时的操作，以fetch举例，只有清除数据后第一次打开可以复现
19.     }
20.   });
21. },
22. getphoto: function () {
23.   var that = this
24.   fetch.fetch({
25.     url: \' 
26.     success: function (ret) {
27.     },
28.     fail: function (msg, code) {
29.     }
30.   })}

解决方法

给耗时比较长的操作增加延时。为this.showResult = false增加一个延时，优化后的代码如下：

1.  onBackPress() {
2.    console.log("main onBackPress. status = " + this.showResult);
3.    if (this.showResult) {
4.      this.$element(\'textarea\').focus({ focus: false });
5.      this.content = \'\';
6.      this.touchedIndex = -1;
7.      //增加延时，解决因监听showResult变化后的事件处理过缓问题，导致系统返回键有时失效
8.      setTimeout(() => {
9.          this.showResult=false; 
10.     }, 800);
11.     return true;
12.   }
13.   return false;
14. }

---

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0204411119222660356?fid=18

原作者：Mayism