あなただけでは十分ではありません、おそらくのために、XHRリクエストを終了させる方法を知っています！

TLDR：

私たちが必要とするとき、私たちはAbortControllerインターフェイスによって1つまたは複数の要求を終了することができます。

序文

これまでのところ、我々が要求して、パーシャルリフレッシュページのコンテンツを送信するには、2つの共通の基本的な手段を持って、1はXMR（XMLHttpRequestの）であり、第二は、フェッチされ、我々は1を言います

XHR

我々は、要求を送信する場合XHRのために、我々はおそらくですでにお馴染みの、私たちはこれを行うことができます：

const xhr = new XMLHttpRequest();
const method = 'GET';
const url = 'https://xxx';

xhr.open(method, url, true);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    // do something
  }
}
xhr.send();

（このよう繰り返し要求など）我々はいくつかの理由のためにそれを終了したいときに、私たちはアボート呼び出す必要があります。

xhr.abort（）;

非常に便利で、非常に単純な、それを取得するには？

フェッチ

まず、フェッチの基本的な定義を見てみましょう。

私たちは、パラメータとオプションパラメータを受け入れる必要があります
1. リソース定義、アドレスまたは取得するには、Requestオブジェクトを
2. 代わりに私たちが知っている必要があり、そのような実施形態では、身体、資格情報などを要求するように構成オブジェクトが、されsignal、次のように、彼が定義されている：
  AbortSignalオブジェクトインスタンスを、それはあなたとの通信のための要求をフェッチまたはフェッチAbortControllerによって終了できます
戻り値は約束です

ここでは、すでに答えを知っている見るが、我々は、上記のを見て行く必要がありますAbortController。

AbortController

当初はES6実際には、この機能をアボートしませんでしたとき、フェッチ導入が、私の友人の大半は、プログラムは、それがこの言及された2015年に、この柔軟なAPIを持つようにしたい問題を、私たちは式の射出約束した後、再度実行してくださいキャンセル、または他のハッキングなど、私たちはこの苦渋を通過し、最終的AbortControllerとAbortSignalを迎えました。

現在、非常に単純なAbortController、財産のシステムがあるAbortController.signalと遮断するための要求が.abort()

何も言わないための光手段が、我々は、コードワードを見て：

// 启动一个node服务，其中包括一个api和一个html页面

const Koa = require('koa');
const fs = require('fs');
const app = new Koa();

const sleep = () => {
    return new Promise(res => {
        setTimeout(function() {
            res();
        }, 3000);
    });
};

app.use(async ctx => {
    if (ctx.request.url === '/api') {
        await sleep();
        ctx.body = 'Hello World';
    } else {
        ctx.status = 200;
        ctx.respond = false;
        fs.createReadStream('./test.html').pipe(ctx.res);
    }
});

app.listen(3000);

ここではtest.htmlというの内容は、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        fetch('/api')
        .then((res) => {
            console.log(res, '请求成功');
        });
    </script>
</body>
</html>

サービスを開始した後、我々はコンテンツネットワークを見てください。

我々は3秒を定義し、2箇所にあるフェッチ要求、要求の遅延時間の代表、代表注意を払います

フェッチキャンセル

我々は割り込みにしたいこの時間は、あなたがこれを行うことができます：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 增加了如下几行
        const controller = new AbortController();
        const signal = controller.signal;
        console.log(signal, 'signal的初始状态');
        signal.addEventListener('abort', function (e) {
            console.log(signal, 'signal的中断状态');
        });
        
        setTimeout(function() {
            controller.abort();
        }, 2000);
        // 增加部分结束

        fetch('/api', {signal})
        .then((res) => {
            console.log(res, '请求成功');
        });
    </script>
</body>
</html>

もう一度実行して、我々は次のような結果が得られます。

我々は明らかに、その後falseからtrueに状態遷移を打ち切られ、終了要求後2Sは、要求状態が解除となり、図から見ることができます。

また、私たちを取得する操作をキャンセルする方法であり、それは非常に急に実際にあります。ヒッヒッヒ。

互換性

AbortControllerが長い時間が生まれてきたが、MDNまたはの現在の定義实验性技术我々は見つけることができますMDNビューは、実際には、ほとんどの主要なブラウザがサポートされており、我々はまだ非常に新しい利用できるプラットフォームさを開発する場合、私は近い将来を信じてそれは確かに大量に使用されます。道路のフロントエンドは、よりスムーズになります！

記事はここで少し助けをもたらすことができた場合最後に、親指アップ、生産が容易ではない、注意を歓迎し、あなたに相互励ましの王様！