广告位联系
返回顶部
分享到

JavaScript函数式编程Thunk原理解析

JavaScript 来源:互联网 作者:佚名 发布时间:2022-08-22 09:42:51 人浏览
摘要

本篇带来 Thunk 理解,这也是本瓜最津津乐道的 JS 函数式编程中延迟处理的思想核心之一! 什么是 Thunk ? 简单理解:在计算机编程中,Thunk 就是一种实现延迟执行的手段。 举个栗子????

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

什么是 Thunk ?

简单理解:在计算机编程中,Thunk 就是一种实现延迟执行的手段。

举个栗子????????????

我要计算 99 的 9 次方,然后再把它打印出来,你会怎么写?

大聪明肯定是直接一句话:

1

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

有点想法的同学肯定想封装一个函数,因为后续还可能要 88 的 8 次方、77 的 7 次方等等:

1

2

3

4

const power = (base, exponent) => {

  return Math.pow(base, exponent);

};

console.log(power(99, 9)); // 913517247483640800

如果还有更多想法,可能会考虑:

今天你让我 console 打印结果,明天如果让我 alert 弹窗提醒结果怎么办?后天又让我 handleXXX 处理结果,又该怎么办?

所以,这里可以设计一个(可自定义的)回调函数来处理这个运算结果:

代码演进

1

2

3

4

5

6

7

8

9

10

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。”

继续上面的例子讲:

改造成异步

上面的例子是同步的,我们改造成异步的:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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 工具函数:

1

2

3

4

5

6

7

function toThunk(asyncFn) {

  return (...args) => {

    return (callback) => {

      asyncFn(...args, callback);

    };

  };

}

可以将任何函数处理做成上述的逻辑:

1

2

3

let thunk = toThunk(readFile); // readFile 是异步函数

thunk = thunk('./foo');

thunk((err, data) => /* do sth. */))

thunk 的两步执行,第一步传入参数,第二步是传入回调函数,这就是 Promise 的 then 的方法思路!!

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

JavaScript 中「Thunk」怎么理解,你 get 到了吗?


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://juejin.cn/post/7132986833243553805
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计