逐步了解工厂错误处理程序

Question

我正在阅读和学习promise/async/await。我有点拘泥于一步一步地理解一种错误处理方法，我已经见过几次了，它是一种在创建承诺时处理错误的工厂函数方法。

带注释的代码(以下问题(

const myPromise = new Promise((resolve, reject)=> 
setTimeout(()=> console.log('ERROR MESSAGE'),1000))
// async / await with error handler factory
const testPromise = async () => {
var data = await myPromise;
console.log(data) 
}
// this is where i get stuck
const errorHandlerBig = function(fn){   // (1) 
return function(...parameters) { // (2)
return fn(...parameters).catch(function(err){ // (3) 
console.error('Caught in Example 3:', err)
})
}
} 
errorHandlerBig(testPromise)(); 

1. 将testPromise作为参数
2. 我调试了这个和参数内容是[](空(，当尝试为testPromise分配参数时=async(paramName(=>。。。我不能在函数中使用它。它试图传播什么
3. 这被翻译为testPromise(…前面步骤中的params(

为什么在另一个函数内部调用这个函数链是必要的？

根据项(2(，当试图将值传递给paramName时，它也不会在控制台上打印！：

const testPromise = async (paramName) => {
var data = await myPromise;
console.log(data, paramName) 
}
const errorHandlerBig = function(fn){...}
errorHandlerBig(testPromise)('RandomValue')

提前感谢大家！

Answer 1

errorHandlerBig正在获取一个函数，并将其封装在自己的错误处理中。从外到内，它：

1. 将函数(1(作为参数
2. 创建并返回一个接受任意数量参数的新函数(2(
3. 在函数2中，使用传递给函数2的参数调用函数1，并尝试捕获生成的任何错误

由于errorHandlerBig正在将参数传递给fn，因此如果您希望参数出现在控制台中，则需要testPromise来接受这些参数并记录它们。或者，您可以将它们作为testPromise中的错误抛出。

正如所写的，这不是很有用，但如果您需要通过将errorHandlerBig返回的函数保存在变量中并用不同的参数调用该函数来使同一异步进程多次运行，或者如果您希望对多个异步进程使用相同的错误处理行为，这可能会很有用。

const throwThings = async (throwWhat) => {
throw new Error(throwWhat);
}
const happyFunTimes = async (activity) => {
console.log("I'm having fun");
await setTimeout(() => console.log(`jumping on a ${activity}`), 1000);
}
const errorHandlerBig = function(fn){   // (1) 
return function(...parameters) { // (2)
return fn(...parameters).catch(function(err){ // (3) 
console.error('Caught in Example 3:', err.toString())
});
}
} 
document.getElementById(":)").addEventListener("click", () => errorHandlerBig(happyFunTimes)("bananas"));
document.getElementById(">:(").addEventListener("click", () => errorHandlerBig(throwThings)("bananas"));

<button id=":)">Fun times</button>
<button id=">:(">Throw</button>