如何實現(xiàn)javascript函數(shù)的暫停和恢復(fù)

發(fā)布時間：2020-07-30 14:47:57 來源：億速云閱讀：122 作者：小豬欄目：web開發(fā)

這篇文章主要講解了如何實現(xiàn)javascript函數(shù)的暫停和恢復(fù)，內(nèi)容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

javascript 異步編程從來都是一個難題，最開始我們用 callback，但隨之觸發(fā)了回調(diào)地獄，于是“發(fā)明” Promise 解決 callback 嵌套過深的問題。然而由于濫用 Promise（一連串的 then），代碼變得不易閱讀了。此時，async-await 橫空出世，它讓我們可以用同步的方式編寫異步代碼，簡直 amazing，以至于有人說它就是 javascript 異步編程的銀彈。

P.S.代碼只是演示，并不可用

function getProfile(id) {
 return window.fetch(`https://api.com/wedding/profile/${weddingId}`
}

async function getWeddingDetail(weddingId) {
 try {
  // 暫停執(zhí)行
  const wedding = await window.fetch(`https://api.com/wedding/${weddingId}`);
  // 當結(jié)果返回恢復(fù)執(zhí)行，接著繼續(xù)暫停
  const groom = await getProfile(wedding.groomId);
  // ... 恢復(fù)執(zhí)行 -> 暫停 ...
  const bride = await getProfile(wedding.brideId);
  // ... 恢復(fù)執(zhí)行
  return { wedding, bride, groom };
 } catch (error) {
  handleError(error);
 }
}

沒有銀彈

然而計算機科學領(lǐng)域中并不存在銀彈。async-await 也有缺點，比如你忘了寫 await，不信？

假設(shè)別人編寫了一個工具函數(shù)叫g(shù)etProfile，如果不了解它的具體實現(xiàn)，你是不是就把它當做同步函數(shù)，即便getProfile是異步的。

當然，這只是一個小問題，更讓我難受的是，如果你在一個函數(shù)中使用了 async，那么調(diào)用它的函數(shù)也得變成一個 async，若還有另一個函數(shù)要調(diào)用這個調(diào)用函數(shù)......holly shit！現(xiàn)在你明白了吧。

有沒有兩全其美的辦法？

// getWeddingDetail 根本不用關(guān)心內(nèi)部的函數(shù)是異步or同步
function getWeddingDetail(weddingId) {
 const wedding = window.fetch(`https://api.com/wedding/${weddingId}`);
 const groom = getProfile(wedding.groomId);
 const bride = getProfile(wedding.brideId);
 return { wedding, bride, groom };
}

沒有什么是一個中間層解決不了的

異步編程的核心，就是函數(shù)暫停和恢復(fù)執(zhí)行。而決定一個函數(shù)是暫停還是恢復(fù)執(zhí)行，這是 js 運行時干的活兒，難不成我們今天要深入引擎實現(xiàn)？

No！我不了解 C++，也不懂 js 引擎是如何實現(xiàn)的。

但是呢，我可以寫一個中間層（函數(shù)runtime），嘗試實現(xiàn)上面的需求，當然，這會有一些限制。

一、入口函數(shù)

假設(shè)要運行的函數(shù)如下：

function main() {
 const id = 123;
 console.log('Getting wedding:', id);

 const { wedding, bride, groom } = getWeddingDetail(id);

 console.log('Wedding detail:', wedding);
}

我們期望能夠按照下面的方式運行：

function runtime(mainFn) {
 mainFn();
}

// start runtime
runtime(main);

基本框架已經(jīng)有了，接著干啥？

首先，要搞清楚在不用 await 的前提下，如何中斷函數(shù)運行。

然后，在合適的地方恢復(fù)執(zhí)行。

js 中有兩種方法中斷函數(shù)運行：return和throw。我選擇 throw，因為它表示遭遇異常導致的中斷。好了，我們改造一下 runtime

function runtime(mainFn) {
 const _originalFetch = window.fetch;
 window.fetch = (url, options) => {
  // "暫停"
  throw new Error();
 };
 // 運行入口函數(shù)
 runMain();

 function runMain() {
  try {
   mainFn();
  } catch (error) {
   // 函數(shù) "暫停"
   // 恢復(fù)并重新執(zhí)行 mainFn
   runMain();
  }
 }
}

先忽略這段代碼出現(xiàn)的問題，把目光聚集在函數(shù)“中斷”“恢復(fù)”這兩個點上，顯然，目的已經(jīng)達到。接下來對它進行優(yōu)化。

首當其沖的是 runMain，只需要當 window.fetch 成功后再執(zhí)行：

function runtime(mainFn) {
 const _originalFetch = window.fetch
 window.fetch = (url, options) => {
  _originalFetch(url, options).then(res => {
   // 返回結(jié)果后恢復(fù)執(zhí)行
   runMain()
  })
  throw new Error()
 }

 runMain();

 function runMain() {
  try {
   mainFn();
  } catch (error) {
   // ignore
  }
 }
}

window.fetch 每次拋出異常，這導致 mainFn 無限循環(huán)的執(zhí)行。

要解決這個問題，需要引入緩存，使得我們僅需要在第一次 fetch 時拋出異常，而為后面的請求返回響應(yīng)。

function runtime(mainFn) {
 const _originalFetch = window.fetch
 windo.fetch = (url, options) => {
  if (cache.has([url, options])) return cache.get([url, options])

  _originalFetch(url, options).then(res => {
   cache.set([url, options], res)
   runMain()
  })

  throw new Error()
 }

 runMain();

 function runMain() {
  try {
   mainFn();
  } catch (error) {
   // ignore
  }
 }
}

成功啦！

運行程序，檢查 console 的輸出，由于重復(fù)運行了多次，'Getting wedding:', 123也被顯示了多次，這是 console.log 的副作用導致的。

二、純函數(shù)

runtime 只允許運行純函數(shù)，如果你的代碼中有副作用，則必須添加限制條件：runSideEffects().

function main() {
 const id = 123;
 runSideEffects(() => console.log('Getting wedding:', id));

 const { wedding, bride, groom } = getWeddingDetail(id);

 runSideEffects(() => console.log('Wedding detail:', wedding));
}

sideEffects 的實現(xiàn)非常容易：

function runtime(mainFn) {
 // 參考上面的代碼

 // 提供 `runSideEffects`
 const sideEffects = [];
 window.runSideEffects = fn => {
  sideEffects.push(fn);
 };

 runMain();

 function runMain() {
  try {
   mainFn();
   sideEffects.forEach(fn => fn());
  } catch (error) {
   // 清除副作用
   sideEffects.splice(0, sideEffects.length);
  }
 }
 
}

再次運行，'Getting wedding:', 123只顯示一次啦~

到底干了些啥？

為了模仿函數(shù)暫停和恢復(fù)，我們通過 throw 一個錯誤來“暫?！焙瘮?shù)，重新運行來“恢復(fù)”函數(shù)。

為了從暫停處“恢復(fù)”，需要將拋出的錯誤替換成函數(shù)返回值，我們用緩存機制達到了這個目的。

最后，為了能安全的重復(fù)執(zhí)行函數(shù)，需要將它轉(zhuǎn)化為一個純函數(shù)。如果有副作用，則將它們收集起來，在函數(shù)運行成功后，再執(zhí)行副作用。

扯這么多，有什么實際用途？

本文的靈感來自于React Suspense。有了 Suspense，就可以像下面這樣來獲取數(shù)據(jù)：

function Component() {
 const data = getDataFromNetwork();
 return <div />;
}

getDataFromNetwork 將發(fā)起異步請求，所以它是一個異步函數(shù)，但 React 讓它看來是是一個同步操作。這很有趣~

看完上述內(nèi)容，是不是對如何實現(xiàn)javascript函數(shù)的暫停和恢復(fù)有進一步的了解，如果還想學習更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

如何實現(xiàn)javascript函數(shù)的暫停和恢復(fù)

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽