有一个用于从JavaScript发出请求的新API:fetch().是否有任何内置机制可以在飞行中取消这些请求?

推荐答案

TL/DR:

截至2017年9月20日,fetch现在支持signal参数,但支持not all browsers seem support this at the moment参数.

2020 UPDATE:大多数主要浏览器(Edge、Firefox、Chrome、Safari、Opera等)support the feature,已成为the DOM living standard的一部分.(截至2020年3月5日)

不过,这是我们很快就会看到的变化,因此您应该可以使用AbortControllerS AbortSignal取消请求.

Long Version

如何执行以下操作:

其工作方式如下:

Step 1:你创建了一个AbortController(目前我只使用了this)

const controller = new AbortController()

Step 2:你会得到这样的AbortController秒信号:

const signal = controller.signal

Step 3:通过signal取数如下:

fetch(urlToFetch, {
    method: 'get',
    signal: signal, // <------ This is our AbortSignal
})

Step 4:只需在需要时中止:

controller.abort();

下面是一个如何工作的示例(在Firefox 57+上工作):

<script>
    // Create an instance.
    const controller = new AbortController()
    const signal = controller.signal

    /*
    // Register a listenr.
    signal.addEventListener("abort", () => {
        console.log("aborted!")
    })
    */


    function beginFetching() {
        console.log('Now fetching');
        var urlToFetch = "https://httpbin.org/delay/3";

        fetch(urlToFetch, {
                method: 'get',
                signal: signal,
            })
            .then(function(response) {
                console.log(`Fetch complete. (Not aborted)`);
            }).catch(function(err) {
                console.error(` Err: ${err}`);
            });
    }


    function abortFetching() {
        console.log('Now aborting');
        // Abort.
        controller.abort()
    }

</script>



<h1>Example of fetch abort</h1>
<hr>
<button onclick="beginFetching();">
    Begin
</button>
<button onclick="abortFetching();">
    Abort
</button>

资料来源:

Javascript相关问答推荐

详细说明如何以图表方式改变仪表的范围和 colored颜色

获取最接近的父项(即自定义元素)

如何使用CSS和JavaScript创建粘性、凝聚力的形状到形状(容器)变形?

在JS中获取名字和姓氏的首字母

对象和数字减法会抵消浏览器js中的数字

微软Edge编辑和重新发送未显示""

PrivateRoute不是路由组件错误

当试图显示小部件时,使用者会出现JavaScript错误.

我在我的Java代码中遇到了问题,代码的一部分看不到先前定义的对象

Reaction Native中的范围滑块

有条件重定向到移动子域

Use Location位置成员在HashRouter内为空

为什么JPG图像不能在VITE中导入以进行react ?

AddEventListner,按键事件不工作

如何在和IF语句中使用||和&;&;?

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

使用RxJS from Event和@ViewChild vs KeyUp事件和RxJS主题更改输入字段值

在Java脚本中录制视频后看不到曲目

react 路由如何使用从加载器返回的数据

为什么我的SoupRequest";被重置为初始值,以及如何修复它?