IT教程 ·

仅仅知道若何终止XHR请求,或许对你来说是不够的!

JavaScript 构造函数的继承

TLDR:

当我们须要的时刻,我们能够经由过程AbortController接口来停止一个也许多个要求。

媒介

到现在为止,我们有两个经常运用的基础的手腕去发送要求进而部份革新页面内容,其一是XMR(XMLHttpRequest),其二是fetch,我们一个个说

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

当我们由于某种原因(比方反复要求)想要停止它的时刻,我们只须要挪用abort即可。

xhr.abort();

很轻易也很简约,然则关于fetch呢?

fetch

起首我们看下fetch的基础定义:

  • 接收一个必需的参数和一个可选的参数
    1. 定义要猎取的资本,地点也许
    2. 可选的设置对象,比方要求体式格局、body、credentials等等,个中我们须要晓得的是signal,他的定义以下:
  • 返回值是一个promise

看到这里我们已晓得了答案,然则我们须要再去相识一下上文所说的AbortController.

AbortController

最初es6引入fetch的时刻,实在就是没有abort如许的功用,不过宽大程序朋友们还会愿望能有这个天真的api,所以在2015年就有人提了这个,再次以后人人尝试了注入promise式的作废也许是其他hack等等,经由这份折腾终究我们迎来了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>

启动效劳后,我们看下network的内容。

 

我们注重两个处所,一个代表fetch要求,一个代表要求的延时时候,也就是我们定义的三秒

作废fetch

这时刻我们想中断,就能够如许做:

<!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>

再次运转,我们会获得以下效果:

 

 

从图中我们能够很清晰的看到,要求在2s后被停止,要求状况变成canceled,然后aborted的状况由false转变成true。

就是如许,我们对fetch也举行的作废操纵,还算是恍然大悟吧。嘻嘻。

兼容性

虽然AbortController已降生很长时候了,然则现在mdn上的定义照样实验性手艺,检察mdn我们能够发明,实在主流浏览器大部份都支撑了,假如我们开发的平台很新照样能够运用的,置信不远的未来,肯定会大批量运用。前端的途径也会愈来愈顺畅!

 

末了假如这边文章能帮给你带来一点协助,迎接关注,点赞,制造不容易,与君共勉!

C++ 基础--虚函数

参与评论