写点什么

【得物技术】浅谈重复 http 请求的取消

用户头像
得物技术
关注
发布于: 6 小时前

场景:

作为开发者,我们接触最多的就是 CRUD,各种接口的联调,但是好像会比较少的去关注我们发送的 http 请求,当这个请求没有 fulfilled,而又有新的请求发送出去,那么当前这一个请求应当如何处理?我们知道为了防止重复的动作,我们能使用类似于防抖和节流来规避,但是今天我们谈谈从请求层面上如何去规避重复的请求,而不是从用户侧去阻止。其实网上也有很多这方面的开发者的尝试,但是有的也讲得没有那么清楚。为此,在调研了这方面的一些知识之后,结合自己平时在开发中遇到的场景。总结出来两个最常见的 http 请求需要被取消的场景:


场景一:

相同的请求需要取消,这里的相同的请求指的是对于 get 请求来讲,method 一样,params 一样,url 一样,对于 Post 请求来讲,当然就是 method 一样,body 一样,url 一样


场景二:

路由地址发生变化(之前网页的请求已经无意义)


实现方法:

首先,要想实现重复的取消,我们就需要做两步,第一步是首先要知道如何取消,第二步就是如何判断出当前是重复的请求


取消重复请求实现方法:

关于如何取消,这部分我会从 axios 以及 fetch 两个方面来阐述,因为这两个请求方式的实现取消的方法是有差别的

为了方便理解,我们通过 react 来演示这个过程更直接,因为我们知道钩子函数 useEffect,useEffect 的特点决定了返回函数会在每一次 useEffect 执行之前,进行一次,来进行清理操作,因此在这里,我们把取消操作放在这儿,就可以模拟每一次都取消前一次的操作


axios

首先介绍 axios,这个大家前端 er 们肯定接触得都要吐了,一句话概括,axios 实现取消的本质就是使用其内部封装的 cancelToken。

首先要知道,token 确定了唯一性,这也是确定哪一个请求需要被取消的标识,它可以由 cancelToken.source()生成

source 包含了 cancel 方法 ,我们调用它来实现取消


useEffect(() => {  const cancelToken = axios.CancelToken;  const source = cancelToken.source();  setAxiosRes("axios request created");  getReq(source).then((res) => {    setAxiosRes(res);  });  return () => {    source.cancel("axios request cancelled");  };}, [axiosClick]);
复制代码


export const instance = axios.create({  baseURL: "http://localhost:4001",});export const getReq = async (source) => {  try {    const {      data    } = await instance.get("/", {      cancelToken: source.token,    });    return data;  } catch (err) {    if (axios.isCancel(err)) {      return "axios request cancelled";    }    return err;  }};
复制代码

这里需要注意的是,cancel 这个动作,本身就是可以被 catch 部分给捕捉到的,也是一个 err,我们用它提供的 isCancel 方法去判断一下是否是取消操作,这个可以用来验证我们的取消是否成功


fetch:

那么 fetch 的情况就不一样了,fetch 的实现方式则是通过 signal 来取消,其内部的 AbortController()能取消掉所有响应 signal 标记的请求,同样用 react 来模拟一次,其实本质还是一样的,并且同样也能被 catch 到


export const instance = axios.create({      useEffect(() => {        const controller = new AbortController();        const signal = controller.signal;        setFetchRes("fetch request created");        hitApi(signal).then((res) => {          setFetchRes(res);        });        //cleanup function        return () => {          controller.abort();        };      }, [fetchClick]);
复制代码

hitApi 函数如下,也就是把 signal 放进我们的 fetch 里面,这样我们才能 abort。

 export const hitApi = async (signal) => {        try {          const response = await fetch("http://localhost:4001/", {            signal          });          const data = await response.json();          return data;        } catch (err) {          if (err.name === "AbortError") {            return "Request Aborted ";          }          return err;        }      }
复制代码

这里同样的,'AbortError'可以在 catch 被捕获到


判断是否重复

好了,取消的功能实现了,接下来就要考虑如何去判断请求是否重复了。那毋庸置疑,判断是否重复,想要常数级时间复杂度来找到是否有重复的请求,当然是使用 Map,这样可以以 O(1)的速度找到那个重复的请求,从而才能决定去取消。而且,可以想到,整个过程需要向数组里面加东西,而已经被取消过的当然就需要拿出来,因此我们需要一个加的函数,以及一个移除的函数


const addPending = (config) => {  const url = [    config.method,    config.url,    qs.stringify(config.params),    qs.stringify(config.data)  ].join('&')  config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {    if (!pending.has(url)) { // If the current request does not exist in pending, add it      pending.set(url, cancel)    }  })}
复制代码

当给 config.cancelToken 赋值的时候应当注意,当前这个 config.cancelToken 是否已经有值了

为了方便我们平铺参数,我们可以用 qs 来转换 Object 到 string


const removePending = (config) => {  const url = [    config.method,    config.url,    qs.stringify(config.params),    qs.stringify(config.data)  ].join('&')  if (pending.has(url)) { // If the current request identity exists in pending, you need to cancel the current request and remove it    const cancel = pending.get(url)    cancel(url)    pending.delete(url)  }}
复制代码


axios 拦截器

然而在实际项目中,我们通常有 axios 拦截器来统一管理我们的请求,所以这里也有很多人喜欢直接把这两个方法加进 axios 拦截器里,这样就一劳永逸了。

axios.interceptors.request.use(config => {  removePending(options) // Check previous requests to cancel before the request starts  addPending(options) // Add current request to pending  // other code before request  return config}, error => {  return Promise.reject(error)})
复制代码


axios.interceptors.response.use(response => {  removePending(response) // Remove this request at the end of the request  return response}, error => {  if (axios.isCancel(error)) {    console.log('repeated request: ' + error.message)  } else {    // handle error code  }  return Promise.reject(error)})
复制代码


路由切换使用方式

最后再来说一说第二个场景,路由切换了的情况,比较简单,直接清空我们的 pending 队列就好,直接怼


export const clearPending = () => {  for (const [url, cancel] of pending) {    cancel(url)  }  pending.clear()}
复制代码


router.beforeEach((to, from, next) => {  clearPending()  // ...  next()})
复制代码


效果演示:



可以看到,重复点击,请求是 cancelled,而如果是成功返回,则是 200。

原理分析:

function CancelToken(executor) {  if (typeof executor !== 'function') {  throw new TypeError('executor must be a function.');  }  var resolvePromise;  this.promise = new Promise(function promiseExecutor(resolve) {  resolvePromise = resolve; //把内部暴露出来  });  var token = this;  //executor(cancel方法);  executor(function cancel(message) {  if (token.reason) {  // Cancellation has already been requested  return;  }  //token.reason是Cancel的实例  token.reason = new Cancel(message);  resolvePromise(token.reason);//改变promise的状态  });  } 
复制代码

CancelToken 的核心本质上来讲其实是将 promise 挂载上去,然后自己不去主动 resolve 或者 reject,而是把这个主动权先暴露出来,也就是代码里的 resolvePromise,然后在取消的函数中去改变这个 promise 的状态。

改变这个状态有什么用呢,需要结合 xhrAdapter 源码来理解,在这里我们就可以看到是在什么地方 abort 的了,标红部分就是通过上文改变 promise 状态,.then 里面被执行的过程。

function xhrAdapter(config) {  return new Promise(function dispatchXhrRequest(resolve, reject) {  if (config.cancelToken) {  //请求中,监听cancelToken中promise状态改变  config.cancelToken.promise.then(function onCanceled(cancel) { if (!request) { return; } request.abort(); reject(cancel);  request = null;  });  }  }) } 
复制代码

结语:

其实 http 请求取消不是什么很稀奇的事情,要实现类似的请求取消,有很多种其他的方法,甚至很多方法是优于这一种实现方法的,比如说取消当前这个请求代替取消前一个,似乎更合乎逻辑一些,但是此文着重的是这一种暴露 resolve 的思想,非常值得一鉴。


文/Lily


关注得物技术,做最潮技术人!

发布于: 6 小时前阅读数: 4
用户头像

得物技术

关注

得物APP技术部 2019.11.13 加入

关注微信公众号「得物技术」

评论

发布
暂无评论
【得物技术】浅谈重复http请求的取消