當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

如何获取.then的返回值_仅仅知道如何终止XHR请求，或许对你来说是不够的！

發布時間：2023/12/10 编程问答 53 豆豆

生活随笔收集整理的這篇文章主要介紹了如何获取.then的返回值_仅仅知道如何终止XHR请求，或许对你来说是不够的！小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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的基本定義:

接受一個必須的參數和一個可選的參數
定義要獲取的資源，地址或者Request對象
可選的配置對象，比如請求方式、body、credentials等等，其中我們需要知道的是signal，他的定義如下: 一個AbortSignal對象實例，允許你通過AbortController與fetch請求通信或者終止fetch
返回值是一個promise

看到這里我們已經知道了答案，但是我們需要再去了解一下上文所說的AbortController.

AbortController

最初es6引入fetch的時候，其實就是沒有abort這樣的功能，不過廣大程序朋友們還會希望能有這個靈活的api，所以在2015年就有人提了這個issue，再次之后大家嘗試了注入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的內容

啟動服務后，我們看下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我們可以發現，其實主流瀏覽器大部分都支持了，如果我們開發的平臺很新還是可以使用的，相信不遠的將來，肯定會大批量使用。前端的道路也會越來越順暢！

最后如果這邊文章能幫給你帶來一點幫助，歡迎關注，點贊，制作不易，與君共勉！

總結

以上是生活随笔為你收集整理的如何获取.then的返回值_仅仅知道如何终止XHR请求，或许对你来说是不够的！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。