如何获取.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的內容
<!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我們可以發現，其實主流瀏覽器大部分都支持了，如果我們開發的平臺很新還是可以使用的，相信不遠的將來，肯定會大批量使用。前端的道路也會越來越順暢！
最后如果這邊文章能幫給你帶來一點幫助，歡迎關注，點贊，制作不易，與君共勉！
總結
以上是生活随笔為你收集整理的如何获取.then的返回值_仅仅知道如何终止XHR请求，或许对你来说是不够的！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大数据和人工智能的关系是什么？
- 下一篇： CSS选取子标签元素：nth-child