前端JavaScript之Promise

1、什么是Promise

Promise 是异步编程的一种解决方案。ES6中已经提供了原生 Promise 对象。一个 Promise 对象会处于以下几种状态（fulfilled，rejected两种状态一旦确定后不会改变）：

• 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。
• 已兑现（fulfilled）: 意味着操作成功完成。
• 已拒绝（rejected）: 意味着操作失败。

2、基本用法

Promise 对象是一个构造函数，用来创建 Promise 实例，它接收两个参数 resolve 和 reject 。

• resolve 的作用是将 Promise 对象的状态从 pending 变为 fulfilled ，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。
• reject 的作用是将 Promise 对象的状态从 pending 变为 rejected ，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
  

const promise = new Promise(function(resolve, reject) {  // ...   if (/* 异步操作成功 */){    resolve(value);  } else {    reject(error);  }});

Promise 实例生成以后，使用 then 方法分别指定 fulfilled 状态和 rejected 状态的回调函数。

• then 接收两个参数，第一个是 Promise 对象的状态变为 fulfilled 时的回调函数，第二个是状态变为 rejected 时的回调函数。
  
• catch 接收 Promise 对象的状态变为 rejected 时的回调函数。
  

promise.then(function (value){ // ....},function (err){ // .... err})  promise.then(function (value){ // ....}).catch(function (err){    // ....})

3、Promise的方法

3.1 Promise.prototype.then()

then 方法是定义在原型对象 Promise.prototype 上，前面说过，它接收两个可选参数，第一个参数是 fulfilled 状态的回调函数，第二个参数是 rejected 状态的回调函数。

then 方法返回的是一个新的 Promise 实例，方便我们采用链式写法。比如 then 后面接着写 then ，当第一个回调函数完成以后，会将返回结果作为参数，传入第二个回调函数。这种链式方式可以很方便的指定一组按照次序调用的回调函数。

loadData().then(function (value){    return 3}).then(function (num){    console.log("ok", num) // 3})

3.2 Promise.prototype.catch()

catch 方法是用于指定发生错误时的回调函数。如果异步操作抛出错误，状态就会变为 rejected ，就会调用 catch() 方法指定的回调函数，处理这个错误。

const promise = new Promise(function(resolve, reject) {  throw new Error('unkonw error'); // 抛出错误状态变为 -> reject});const promise = new Promise(function(resolve, reject) {  reject('unkonw error') // 使用reject()方法将状态变为 -> reject});promise.catch(function(error) {  console.log(error);});

Promise 对象的错误会一直向后传递，直到被捕获为止。比如下面代码： catch 会捕获 loadData 和两个 then 里面抛出的错误。

loadData().then(function(value) {  return loadData(value);}).then(function(users) { }).catch(function(err) {  // 处理前面三个Promise产生的错误});

如果我们不设置 catch() ，当遇到错误时 Promise 不会将错误抛出外面，也就是不会影响外部代码执行。

const promise = new Promise(function(resolve, reject) {   resolve(a) // ReferenceError: a is not defined});promise.then(function(value) {  console.log('value is ', value)});setTimeout(() => { console.log('code is run') }, 1000); // code is run

3.3 Promise.prototype.finally()

finally() 方法不管 Promise 对象最后状态如何，都会执行的操作。下面是我们使用 Promise 的一个常规结构。

promise.then(result => {
下载地址:
React通过conetxt实现多组件传值功能
vue手写加载动画项目