精选文章｜浅谈重复http请求的取消

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;  }};

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]);

 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;        }      }

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)    }  })}

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.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)})

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

router.beforeEach((to, from, next) => {  clearPending()  // ...  next()})

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的状态  });  }

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;  });  }  }) }