JavaScript中catch方法如何向错误回调函数传递额外参数

实现原理 #

.catch() 仅接收函数引用作为错误处理回调，触发回调时只会自动注入1个参数：Promise链抛出的错误对象err。要给自定义的renderError额外传入自定义msg，只需包装一层中间回调接住自动传入的err，再手动调用renderError传入所有需要的参数即可。

推荐写法（无坑、可读性高） #

使用匿名箭头函数作为catch的入参，替换原代码中的catch行：

// 替换原代码的 .catch(renderError)
.catch(err => {
  // 第二个参数替换为你需要的自定义提示文本即可
  renderError(err, '请求出错，请稍后重试')
})

这种写法完全符合传参规则：

• 传给catch的是箭头函数的引用，不会出现提前执行函数的问题
• Promise抛出错误时，catch会自动将错误对象赋值给箭头函数的err形参
• 内部调用renderError时，既传递了捕获到的错误对象，又带上了自定义的msg参数

避坑提醒 #

• 禁止直接写.catch(renderError(err, '自定义msg'))：该写法在代码执行到catch行时就会立刻调用renderError，不会等待Promise抛出错误再触发，完全不符合回调触发逻辑。
• 不推荐使用bind预置参数：bind预置的参数会排在运行时传入参数的前面，和你当前renderError(err, msg)的参数顺序不匹配，容易出现参数错位问题，若一定要使用需先调整renderError的参数顺序为(msg, err)。

内容的提问来源于stack exchange，提问作者MohishKhadse55