JavaScript异步编程：（二）Promise初识

前言

回调函数实现了异步编程，但是它的缺陷，让我们在复杂的流程上望而却步；Promise应运而生。

一、为什么要用Promise；

如果你有四个异步任务，task1，task2，task3，task4；
在上一个任务执行完毕后，才可执行下一个任务；

• 使用回调的方式

this.task1(() =>{
  // 执行task1任务
  this.task2(() => {
    // 执行task2任务
    this.task3(() => {
      // 执行task3任务
      this.task4(() => {
      // 执行task4任务
    });
    });
  });
});

• 使用Promise的方式

promise.then(() => {
  this.task1();
}).then(() => {
  this.task2();
}).then(() => {
  this.task3();
}).then(() => {
  this.task4();
})

上面两种不同的书写方式，Promise的代码是不是更加整齐，更加方便阅读呢？

用Promise书写的异步代码，可以像同步代码那样方便阅读；

二、Promise介绍

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。

它不是新的语法功能，而是一种新的写法。

三、Promise的使用

1.构造函数

let promise = new Promise((resolve, reject) => {
  // 可书写异步代码，如调接口等；
  let index = 5;
  if (index == 5) {
    resolve(5);
  } else {
    reject(1);
  }
})

• Promise 构造函数只有一个参数（被称为executor），是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。
• 起始函数包含两个参数resolve 和reject。
  *resolve 和reject 都是函数，其中调用resolve 代表一切正常，reject是出现异常时所调用的。

2.then方法

promise.then((value) => {
  console.log(value, 'resolve')
}, (value) => {
  console.log(value, 'reject')
})

• then接受两个参数，第一个是执行成功后的回调函数，第二个是失败后的回调函数。
• executor 中调用resolve()或者rejected()时传的参数，会被这两个回调函数获得。

4.catch方法

promise.catch((error) => {
  console.log(error, 'error');
})

• catch接受一个参数，是失败后的回调函数。
• executor 中调用rejected()时传的参数，会被这个回调函数获得。

5.finally方法

promise.finally(() => {
  console.log('result');
})

• finally接受一个参数，是一个函数，是Promise最后一定会执行的回调函数。

then、catch、finally方法返回的都是一个新的Promise对象，所以Promise可以进行链式的调用；

promise.then((value) => {
  console.log(value, 'resolve')
}, (value) => {
  console.log(value, 'reject')
}).catch((error) => {
  console.log(error, 'error');
}).finally(() => {
  console.log('result');
})

四、Promise的三个状态

1.状态

• Fulfilled: has-resolved, 表示成功解决
• Rejected: has-rejected, 表示解决失败
• Pending: unresolve, 表示待解决，既不是resolve也不是reject的状态。也就是promise对象刚被创建后的初始化状态

2. resolve函数与reject函数的作用：

• resolve函数：将 Promise 对象的状态从 未处理 变成 处理成功 (unresolved => resolved)， 在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
• reject函数：将 Promise 对象的状态从 未处理 变成 处理失败 (unresolved => rejected), 在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。