fetch()を中断させたい

実現したいこと

リクエストを投げてからレスポンスが返ってくる間に、別のリクエストが投げられたら進行中のリクエストを中断させたいです。

発生している問題

fetch() や fetch() が返す Promise にはリクエストを中断させるAPIがありません。

試したこと

リクエストの完了時に次のリクエストがあればそれを投げるようにしてみました。
ただ、完了までに時間がかかるため、それを待ってからではかなり時間がかかってしまいます。

js
1const request = body => {
2    if (inProgress) {
3        nextBody = body;
4        return Promise.reject();
5    }
6    inProgress = true;
7    return fetch("...", {
8        body,
9        method: "POST",
10    })
11        .then(response => {
12            return response.json();
13        })
14        .then(response => {
15            inProgress = false;
16
17            if (nextBody) {
18                const body = nextBody;
19                nextBody = null;
20                return request(body);
21            } else {
22                return response;
23            }
24        });
25};

行動規範の内容に同意します

回答1件

ベストアンサー

Abort APIというものがあるようです。以下のコードを参考にしてみてください。

js
1var controller = new AbortController();
2
3fetch("...", {
4    signal: controller.signal,
5})
6    .then(response => {
7        ...
8    }, reason => {
9        // リクエストに失敗したか中断した
10        alert(reason.message);
11    });
12
13// リクエストを中断
14controller.abort();