iSz28資訊網(wǎng)——每日最新資訊28at.com

在討論前端JS發(fā)起的請(qǐng)求是否能暫停時(shí)，需要明確兩個(gè)概念：什么狀態(tài)可以被認(rèn)為是“暫停”？以及什么是JS發(fā)起的請(qǐng)求？iSz28資訊網(wǎng)——每日最新資訊28at.com

如何定義暫停？

暫停指的是臨時(shí)停止一個(gè)已經(jīng)開(kāi)始但尚未完成的過(guò)程。這意味著這個(gè)過(guò)程可以在某個(gè)時(shí)間點(diǎn)被中斷，并在另一個(gè)時(shí)間點(diǎn)恢復(fù)。iSz28資訊網(wǎng)——每日最新資訊28at.com

什么是請(qǐng)求？

首先，讓我們介紹一下TCP/IP網(wǎng)絡(luò)模型。網(wǎng)絡(luò)模型從上到下分為應(yīng)用層、傳輸層、網(wǎng)絡(luò)層和網(wǎng)絡(luò)接口層。iSz28資訊網(wǎng)——每日最新資訊28at.com

iSz28資訊網(wǎng)——每日最新資訊28at.com

上圖表示，每次網(wǎng)絡(luò)傳輸，應(yīng)用數(shù)據(jù)都需要通過(guò)網(wǎng)絡(luò)模型逐層打包，然后發(fā)送到目的地，就像寄包裹一樣。要寄送的物品首先被包裝并登記其大小，然后放入箱子并登記目的地，最后裝上運(yùn)輸工具送到目的地。iSz28資訊網(wǎng)——每日最新資訊28at.com

請(qǐng)求的概念可以理解為客戶(hù)端通過(guò)多次數(shù)據(jù)網(wǎng)絡(luò)傳輸將完整數(shù)據(jù)發(fā)送到服務(wù)器，而服務(wù)器為特定請(qǐng)求返回的數(shù)據(jù)可以稱(chēng)為響應(yīng)。iSz28資訊網(wǎng)——每日最新資訊28at.com

理論上，應(yīng)用層協(xié)議可以通過(guò)標(biāo)記數(shù)據(jù)包序列號(hào)來(lái)實(shí)現(xiàn)暫停機(jī)制。然而，TCP協(xié)議不支持這一點(diǎn)。TCP協(xié)議的數(shù)據(jù)傳輸是面向流的，數(shù)據(jù)被視為連續(xù)的字節(jié)流。客戶(hù)端發(fā)送的數(shù)據(jù)將被分成多個(gè)獨(dú)立傳輸?shù)腡CP段。無(wú)法直接控制每個(gè)TCP段的傳輸，因此無(wú)法實(shí)現(xiàn)暫停請(qǐng)求或響應(yīng)的功能。iSz28資訊網(wǎng)——每日最新資訊28at.com

iSz28資訊網(wǎng)——每日最新資訊28at.com

回答問(wèn)題

如果請(qǐng)求指的是網(wǎng)絡(luò)模型中的傳輸，那么自然是不可能暫停的。iSz28資訊網(wǎng)——每日最新資訊28at.com

考慮到使用場(chǎng)景——由JS發(fā)起的請(qǐng)求。因此，可以認(rèn)為這里的問(wèn)題指的是在JS運(yùn)行時(shí)發(fā)起的XMLHttpRequest或fetch請(qǐng)求。由于請(qǐng)求已經(jīng)發(fā)出，問(wèn)題自然變成響應(yīng)是否可以暫停。iSz28資訊網(wǎng)——每日最新資訊28at.com

我們都知道，上傳大文件分片和下載大文件本質(zhì)上是定義分片順序，按順序請(qǐng)求，可以通過(guò)中斷和記錄中斷點(diǎn)來(lái)實(shí)現(xiàn)暫停和恢復(fù)。然而，單個(gè)請(qǐng)求并沒(méi)有這樣的環(huán)境。iSz28資訊網(wǎng)——每日最新資訊28at.com

使用JS實(shí)現(xiàn)“假暫停”機(jī)制

雖然我們無(wú)法真正實(shí)現(xiàn)暫停請(qǐng)求，但我們可以模擬一個(gè)假暫停功能。在前端業(yè)務(wù)場(chǎng)景中，數(shù)據(jù)在接收到后不會(huì)立即顯示在客戶(hù)端。前端開(kāi)發(fā)人員需要先處理這些數(shù)據(jù)，然后再渲染到界面上。如果我們?cè)诎l(fā)起請(qǐng)求前添加一個(gè)控制器，并且在請(qǐng)求返回時(shí)該控制器處于暫停狀態(tài)，則不處理數(shù)據(jù)。相反，等待控制器恢復(fù)后再處理數(shù)據(jù)。這樣我們是否就達(dá)到了目標(biāo)呢？讓我們嘗試實(shí)現(xiàn)它。iSz28資訊網(wǎng)——每日最新資訊28at.com

如果我們使用 fetch 發(fā)起請(qǐng)求，可以設(shè)計(jì)一個(gè)控制器 Promise，并結(jié)合請(qǐng)求使用 Promise.all 封裝。當(dāng) fetch 完成時(shí)，檢查控制器是否處于暫停狀態(tài)；如果沒(méi)有暫停，直接resolve 控制器并同時(shí) resolve 和拋出 Promise.all。iSz28資訊網(wǎng)——每日最新資訊28at.com

function _request () {  return new Promise<number>((res) => setTimeout(() => {    res(123)  }, 3000))}// 原本想用 "class extends Promise" 實(shí)現(xiàn)。// 問(wèn)題在于https://github.com/nodejs/node/issues/13678。function createPauseControllerPromise () {  const result = {    isPause: false,    resolveWhenResume: false,    resolve (value?: any) {},    pause () {      this.isPause = true    },    resume () {      if (!this.isPause) return      this.isPause = false      if (this.resolveWhenResume) {          this.resolve()      }    },    promise: Promise.resolve()  }    const promise = new Promise<void>((res) => {    result.resolve = res  })    result.promise = promise  return result}function requestWithPauseControl <T extends () => Promise<any>>(request: T) {  const controller = createPauseControllerPromise()    const controlRequest = request().then((data) => {      if (!controller.isPause) controller.resolve()      controller.resolveWhenResume = controller.isPause      return data  })    const result = Promise.all([controlRequest, controller.promise])      .then(data => data[0])        result.finally(() => controller.resolve())    (result as any).pause = controller.pause.bind(controller);  (result as any).resume = controller.resume.bind(controller);    return result as ReturnType<T> & { pause: () => void, resume: () => void }}

使用方法

我們可以將調(diào)用 _request 替換為調(diào)用 requestWithPauseControl(_request) ，并通過(guò)返回的pause和 resume 方法控制暫停和恢復(fù)。iSz28資訊網(wǎng)——每日最新資訊28at.com

const result = requestWithPauseControl(_request).then((data) => {    console.log(data)})if (Math.random() > 0.5) { result.pause() }setTimeout(() => {    result.resume()}, 4000)

執(zhí)行原理

在流程設(shè)計(jì)上，步驟如下：設(shè)計(jì)一個(gè)控制器，發(fā)起請(qǐng)求，在接收到響應(yīng)后，檢查控制器的狀態(tài)。如果控制器不處于“暫停”狀態(tài)，則正常返回?cái)?shù)據(jù)；如果控制器處于“暫停”狀態(tài)，則將控制器設(shè)置為一旦調(diào)用resume方法就返回?cái)?shù)據(jù)的狀態(tài)。iSz28資訊網(wǎng)——每日最新資訊28at.com

在代碼中，使用 Promise.all 將控制器 Promise 綁定。如果控制器處于暫停狀態(tài)，Promise.all 不會(huì)被釋放。然后對(duì)應(yīng)地暴露 pause 方法和 resume 方法供外部使用。iSz28資訊網(wǎng)——每日最新資訊28at.com

最后

有些人可能誤以為網(wǎng)絡(luò)請(qǐng)求和響應(yīng)根本無(wú)法暫停。我在文章開(kāi)頭特別提到了數(shù)據(jù)傳輸相關(guān)的內(nèi)容，并加了一句“理論上，應(yīng)用層協(xié)議可以通過(guò)標(biāo)記數(shù)據(jù)包序列號(hào)來(lái)實(shí)現(xiàn)暫停機(jī)制”。這意味著，如果你修改HTTP或設(shè)計(jì)自己的應(yīng)用層協(xié)議（例如socket、vmess等協(xié)議），只要雙方支持該協(xié)議，就可以實(shí)現(xiàn)請(qǐng)求或響應(yīng)的暫停。這不會(huì)影響TCP連接，但實(shí)現(xiàn)暫停機(jī)制需要綜合考慮場(chǎng)景和TCP策略，以確保更好的可靠性。iSz28資訊網(wǎng)——每日最新資訊28at.com

例如，提供一種控制消息類(lèi)型來(lái)控制傳輸暫停，需要標(biāo)記所有數(shù)據(jù)包的序列號(hào)。當(dāng)需要暫停時(shí)，發(fā)送帶有序列號(hào)的暫停消息到接收端。接收端收到暫停消息后，將已收到的數(shù)據(jù)包標(biāo)記塊返回給發(fā)送端（類(lèi)似分片上傳機(jī)制）。iSz28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-93208-0.html前端JS發(fā)起的請(qǐng)求能暫停嗎？

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 網(wǎng)易面試：SpringBoot如何開(kāi)啟虛擬線(xiàn)程？

下一篇： C# 實(shí)現(xiàn)動(dòng)態(tài)訪(fǎng)問(wèn) WebService，兼容 .NET Framework 和 .NET Core