JavaScript函數式編程Thunk原理是什么

這篇文章主要講解了“JavaScript函數式編程Thunk原理是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript函數式編程Thunk原理是什么”吧！

舉個栗子

我要計算 99 的 9 次方，然后再把它打印出來，你會怎么寫？

大聰明肯定是直接一句話：

console.log(Math.pow(99, 9)) // 913517247483640800

有點想法的同學肯定想封裝一個函數，因為后續還可能要 88 的 8 次方、77 的 7 次方等等：

const power = (base, exponent) => {
  return Math.pow(base, exponent);
};
console.log(power(99, 9)); // 913517247483640800

如果還有更多想法，可能會考慮：

今天你讓我 console 打印結果，明天如果讓我 alert 彈窗提醒結果怎么辦？后天又讓我 handleXXX 處理結果，又該怎么辦？

所以，這里可以設計一個（可自定義的）回調函數來處理這個運算結果：

代碼演進

const power = (base, exponent,callback) => {
  return callback(Math.pow(base, exponent))
};
const powerThunk = (callback) => {
  return function () {
    power(99, 9, callback);
  };
};
const calculatePower = powerAsyncThunk((result) => console.log(result));
calculatePower(); // 913517247483640800

在這個例子中，調用powerThunk() 并不會馬上執行 power() 運算，這就是所謂的延遲執行。

并且 powerThunk() 只用再傳一個回調函數進去就行了，不用再傳 base 99 和 exponent 9 這兩個參數了。

在某種意義上來講，thunk 也是一個已經固定某些參數的一個函數，上例中 power 要傳 3 個參數，而 powerThunk 只用傳一個參數就行了。這感覺就有點像柯里化。

可能有同學問了：

“我就喜歡直接修改，不喜歡封裝，行嗎？”

“行呀，咋不行，即使自己不做封裝，你也在無時無刻地用這種封裝。Promise 就是基于 Thunk。”

繼續上面的例子講：

改造成異步

上面的例子是同步的，我們改造成異步的：

const fetchCurrenciesData = (callback) => {
  fetch("https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies.json")
  .then(res => res.json())
  .then(res => callback(res));
}
// This is an async thunk
const asyncThunk = (callback) => {
  return function () {
    fetchCurrenciesData(callback);
  }
}
// This async thunk now returns a function that 
// can be called later on to fetch data from the API.
const fetchCurrencies = asyncThunk((res) => console.log(res));
fetchCurrencies();

當我們調用 fetchCurrencies() 時，會執行 fetchCurrenciesData((res) => console.log(res))()

就會按序執行 fetch 方法，然后走 .then 處理成 json，然后打印。

toThunk 工具函數

一套嵌一套，母豬帶熊罩。所以，我們可以寫出一個 toThunk 工具函數：

function toThunk(asyncFn) {
  return (...args) => {
    return (callback) => {
      asyncFn(...args, callback);
    };
  };
}

可以將任何函數處理做成上述的邏輯：

let thunk = toThunk(readFile); // readFile 是異步函數
thunk = thunk('./foo');
thunk((err, data) => /* do sth. */))

thunk 的兩步執行，第一步傳入參數，第二步是傳入回調函數，這就是 Promise 的 then 的方法思路！

感謝各位的閱讀，以上就是“JavaScript函數式編程Thunk原理是什么”的內容了，經過本文的學習后，相信大家對JavaScript函數式編程Thunk原理是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！