zoukankan      html  css  js  c++  java
  • 前端进阶(2)使用fetch/axios时, 如何取消http请求

    前端进阶(2)使用fetch/axios时, 如何取消http请求

    1. 需求

    现在前端都是SPA,我们什么时候需要取消HTTP请求呢?

    1. 当我们从一个页面跳转到另外一个页面时,如果前一个页面的请求还没有返回,那么我们希望取消前一个页面的请求
    2. 某些操作耗时比较长(不能是保存等操作哦),如果用户不想等待呢,取消了操作,对应我们也需要取消HTTP请求

    对于原生的XMLHttpRequest,是支持取消http请求(abort)操作的: XMLHttpRequest.abort()
    那么,当我们使用ES6的fetch,或者使用axios库,如何实现呢?

    2. Fetch 取消http请求

    fetch与XMLHttpRequest(XHR)类似,是ES6之后浏览器(除IE之外)默认支持的http操作函数。可惜不是默认支持abort操作。但我们可以通过AbortController来实现, 直接上代码:

    // 声明AbortController
    const controller = new AbortController();
    
    // 正常的http调用
    fetch('https://jackniu81.github.io', { signal: controller.signal })
        .then(r => r.json())
        .then(response => {
            console.log(response);
        })
        .catch(err => {
            if (err.name === 'AbortError') {
                console.log('Fetch was aborted')
            } else {
                console.log('Error', err)
            }
        });
    
    // 需要取消请求时,调用:
    controller.abort()
    

    3. axios取消http请求

    axios 已经实现了abort操作,

    var source = axios.CancelToken.source();
    
    axios.get('https://jackniu81.github.io', {
      cancelToken: source.token
    }).catch(function(err) {
      if (axios.isCancel(err)) {
        // handle our cancel operation
        console.log('Request canceled', err.message);
      } else {
        // handle real error here
      }
    });
    
    // 需要取消请求时,调用:
    source.cancel('Abort Request');
    

    4. jquery 取消http请求

    $.ajax内部已经实现了abort功能。直接调用.abort()即可。

    5. 总结

    1. fetchAbortController集成:我们将signal属性作为可选参数(option)进行传递,之后 fetch 会监听它,因此它能够中止 fetch.
    2. AbortController 是可伸缩的,可以用于一次性终止多个请求
    3. 参考fetch的实现,我们自己的代码也完善一下,实现基于AbortController操作取消操作;
    4. axios 默认支持Abort操作;
  • 相关阅读:
    Lesson 43-44 Vacation Season is Approaching?
    Lesson 41-42 How would you respond?
    Lesson 37-38 Do you want to be a millionaire?
    Lesson 35-36 What did you forget?
    Lesson 33-34 Dieting
    保送
    陈老师搬书
    水题(原 USACO Mother's Milk)
    最大公约数和最小公倍数问题(luogu 1029)
    最大子矩阵(OJ 1768)
  • 原文地址:https://www.cnblogs.com/skywind/p/14700522.html
Copyright © 2011-2022 走看看