JavaScript 中「Thunk」怎么理解？

掘金安东尼

发布于 2022-09-22 09:40:49

7071

文章被收录于专栏：掘金安东尼掘金安东尼

theme: channing-cyan

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第18天，点击查看活动详情

降低阅读负担，启发创作心智，轻松学习 JavaScript 技巧，日拱一卒，jym，冲~

本篇带来 Thunk 理解，这也是本瓜最津津乐道的 JS 函数式编程中延迟处理的思想核心之一！

什么是 Thunk ？

简单理解：在计算机编程中，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 工具函数：

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 的方法思路！！

thunk 还可以搭配 es6 生成器使用，本篇就不作展开。

JavaScript 中「Thunk」怎么理解，你 get 到了吗？

OK，以上便是本篇分享。点赞关注评论，为好文助力👍 我是掘金安东尼 🤠 100 万人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我，安东尼陪你一起度过漫长编程岁月 🌏

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-08-18，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

javascript

node.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

编程算法

javascript

node.js

登录后参与评论

0 条评论

热度