【JavaScript ES6】3.Promise 的使用

[SilenceHVK]

Promise 的作用

  Promise 用于异步计算，可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果。

  可以在对象之间传递和操作 Promise,帮助我们处理队列。

Promise 的声明

  new Promise(function(resolve,reject){
      resolve(); // 数据处理完成
      reject(); //数据处理出错
  }).then(function(res){
      // 成功数据 res
  },function(error){
      // 处理错误 error
  });

• Promise 是一个代理对象，它和原先要进行的操作并无关系。
• Promise 将回调函数改为链式调用解决回调地狱问题。

Promise 的状态

  一个 Promise 可能有三种状态:

• 等待(pending):初始化一个 Promise 对象时。
• 已完成(fulfilled):操作成功时。
• 已拒绝(rejected):操作失败时。

一个 Promise 状态只可能从“等待”转到“完成”或“拒绝”，不能逆向转换，同时“完成”和“拒绝”不能相互转换。

  当 Promise 状态发生改变，就会触发 then 函数。

  then函数接受两个参数，第一个参数是成功时的回调，在 Promise 由“等待“状态转换到”完成“状态时调用;第二个参数是失败时回调，在 Promise 由“等待”状态转换为“拒绝”状态时调用。

  then可以接受另加一个 Promise 传入，也接受一个 “类then” 的对象或方法，即 thenable 对象。

  同一个 Promise 的 then 可以调用多次，并且回调的执行顺序跟它们被定义的顺序一致。

Promise 常用的函数

Promise.then()

• Promise.then() 接受两个函数作为参数，分别代表 fulfilled 状态下的响应函数 和 rejected 状态下的响应函数。
• Promise.then() 返回一个新的 Promise 实例，所以支持链式调用。
• 当 Promise 状态发生改变时，Promise.then() 会根据其返回的最终状态，调用相应的响应函数。
• Promise.then() 中可以返回一个新的 Promise 或其他值。
• 如果返回值为新的 Promise 时，那么下一级 Promise.then() 会在新的 Promise 状态改变后执行。
• 如果返回值为其他值，那么下一级 Promise.then() 会立即执行。

在嵌套 Promise.then()时 ，由于 Promise.then() 返回的还是一个 Promise，所以下一级的 Promise.then() 会等到里面的 Promise.then() 执行完后再执行。

Promise.catch()

  Promise.catch() 是 Promise.then(resolve,reject) 中 reject 的别名，用于指定发生错误的回调函数。用法如下：

    new Promise((resolve,reject)=>{
    
    }).then(res=>{
        
    }).catch(error=>{
        
    });

Promise.catch() 也会返回一个 Promise，并且其状态也为 pending。

reject 的作用等同于抛出一个异常。如果 Promise 状态已经变成 resolved ，再抛出错误是无效的

Promise.finally()

  Promise.finally() 是用于指定无论 Promise 最终状态如何，都会执行的操作，是在 ES2018 中引入的。用法如下：

    new Promise((resolve,reject)=>{
    
    }).then(res=>{
        
    }).catch(error=>{
        
    }).finally(()=>{
        
    });

Promise.finally()方法的回调函数不接受任何参数，因此Promise.finally()方法里面的操作，与Promise的状态无关。

Promise.finally() 本质上是 Promise.then() 的特例，Promise.finally() 方法总是会返回原来的值。

Promise.all()

  Promise.all 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。使用方法如下：

    new Promise.all([p1,p2,p3]);

Promise.all 的参数可以不是数组，但参数必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

  Promise.all 的状态由传入的参数决定，分为两种情况：

• 当数组中所有 Promise 状态完成，该 Promise 才算完成，其返回结果为全部值的数组。
• 当其中任何一个失败，该 Promise 则失败，此时第一个被 reject 的实例的返回值。

Promise.race()

  Promise.race 方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。使用方法如下：

    new Promise.race([p1,p2,p3]);

只要参数中的任何一个状态更改，其返回结果则为率先改变的 Promise 实例。

Promise.resolve()

  Promise.resolve 方法可以将现有对象转为 Promise 对象，如下：

    const jsPromise = Promise.resolve($.ajax('/whatever.json'));

  Promise.resolve 方法的参数分为四种结果：

• 参数是一个 Promise 实例
    Promise.resolve将不做任何修改，原封不懂的返回。

• 参数是一个 thenable 对象

  thenable 对象指的是具有 then 方法的对象，如下：

    const thenable = {
        then: function(resolve,reject){
            resolve();
        }
    };

Promise.resolve 会将这个方法转为 Promise 对象然后立即执行 thenable 对象中的 then 方法。

• 参数不是具有 then 方法的对象，或根本就不是对象
    Promise.resolve 会返回一个新的 Promise 对象的实例，其状态为 fulfilled。

• 不带有任何参数
    Promise.resolve 方法允许调用时不带参数，它回直接返回一个状态为 fulfilled 的 Promise 实例。

Promise.reject()

   Promise.reject 也会返回一个 Promise 实例，状态为 rejected。

     const jsPromise = Promise.reject('Error');

Promise.try()

   Promise.try就是模拟 try 代码块。