这篇文章主要讲解了“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 工具函数:
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原理是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。