【ES6】Promise推荐用法

一般来说,不要在then()方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。

javascript 复制代码
// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议总是使用catch()方法,而不使用then()方法的第二个参数。

跟传统的try/catch代码块不同的是,如果没有使用catch()方法指定错误处理的回调函数,Promise 对象抛出的错误不会传递到外层代码,即不会有任何反应。

javascript 复制代码
const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错,因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing().then(function() {
  console.log('everything is great');
});

setTimeout(() => { console.log(123) }, 2000);
// Uncaught (in promise) ReferenceError: x is not defined
// 123

上面代码中,someAsyncThing()函数产生的 Promise 对象,内部有语法错误。浏览器运行到这一行,会打印出错误提示ReferenceError: x is not defined,但是不会退出进程、终止脚本执行,2 秒之后还是会输出123。这就是说,Promise 内部的错误不会影响到 Promise 外部的代码,通俗的说法就是"Promise 会吃掉错误"。

相关推荐
zhousenshan1 小时前
ES6(ECMAScript 2015)语法特性详解
es6
清沫3 小时前
VSCode debugger 调试指南
前端·javascript·visual studio code
zhenryx5 小时前
React Native 自定义 ScrollView 滚动条:开箱即用的 IndicatorScrollView(附源码示例)
javascript·react native·react.js·typescript
振华OPPO6 小时前
Vue:“onMounted“ is defined but never used no-unused-vars
前端·javascript·css·vue.js·前端框架
拉不动的猪7 小时前
try...catch 核心与生态协作全解析
前端·javascript·vue.js
摇滚侠8 小时前
Vue 项目实战《尚医通》,预约挂号的路由与静态搭建,笔记36
javascript·vue.js·笔记
码上成长8 小时前
React 18 并发特性:useTransition 和 useDeferredValue 动画级解释
javascript·react.js·ecmascript
G***T6919 小时前
React性能优化实战,避免不必要的重渲染
前端·javascript·react.js
网络点点滴9 小时前
标签的ref属性
前端·javascript·vue.js
Cobyte11 小时前
17. Vue3 业务组件库按需加载的实现原理
前端·javascript·vue.js