Promise相关知识

Promise是异步编程的一种解决方案，用于一个异步操作的最终完成(或失败)及其结果值的表示，比传统的回调函数方案更加合理。

一个 Promise有以下几种状态:

(1) pending: 意味着操作正在进行。

(2) fulfilled: 意味着操作成功。

(3) rejected: 意味着操作失败。

Promise用途

背景：当异步任务返回两个结果（成功/失败）时，要么让回调函数接受两个参数，要么使用两个回调函数。但这两种方法都有问题：

1. 参数、回调函数的命名不规范
2. 容易产生回调地狱，代码可读性差
3. 很难进行错误处理

为解决以上问题，前端结合Promise思想和JS，建立了Promise/A+规范。

通过将原函数改写成Promise形式后，每次调用返回一个promise对象，这样可以简化调用形式，实现链式调用和方便的处理错误。

如何创建Promise

理想状态下，所有的异步函数都已经返回 Promise 了。但有一些 API 仍然使用旧方式来传入的成功（或者失败）的回调。典型的例子就是 setTimeout() 函数：

setTimeout(() => saySomething("10 seconds passed"), 10000);

混用旧式回调和 Promise 可能会造成运行时序问题。如果 saySomething 函数失败了，或者包含了编程错误，那就没有办法捕获它了。这得怪 setTimeout。

幸运地是，我们可以用 Promise 来包裹它。最好的做法是，将这些有问题的函数包装起来，留在底层，并且永远不要再直接调用它们：

const wait = ms => new Promise(resolve => setTimeout(resolve, ms));

wait(10000)
  .then(() => saySomething("10 seconds passed"))
  .catch(failureCallback);

如何使用 Promise.prototype.then

——引自：nimw:Promise基本使用及方法介绍

let p = new Promise((resolve,reject)=>{
    //一堆代码...
    
    if(成功){
        resolve(结果) 
    }else if(失败){
        reject(错误信息)
    }
    //同步任务...
})

p.then(成功回调函数，失败回调函数)

then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。

注意：

then()方法指定的回调函数，在当前脚本所有同步任务执行完才会执行。

链式操作

new Promise(resolve => {
    resolve(1);
})
    .then(result => console.log(result)) //1
    .then(result => {
        console.log(result);              //undefined
        return 2;
    })
    .then(result => {
        console.log(result);             //2
        throw new Error("err");
    })
    .then((result) =>{
        console.log(result);            
    }, (err)=>{
        console.log(err);                //Error: err
        return 3;
    })
    .then((result) => {
        console.log(result);            //3
    })

上面代码表明，then()方法返回一个新的Promise，而它的行为与then()中的被调用的回调函数(成功回调函数/失败回调函数)的返回值有关。

1.如果then中的回调函数返回一个值，那么then返回的Promise将会变为接受状态，并且将返回的值作为接受状态的回调函数的参数值。

new Promise((resolve, reject) => {
    reject();
})
    .then( () => 99, () => 42 )
    .then( result => console.log(result)); // 42

2.如果then中的回调函数抛出一个错误，那么then返回的Promise将会变为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {throw new Error('err')}, () => {})
    .then( () => {}, (err) => {console.log(err)}); //Error: err

3.如果then中的回调函数返回一个已经是接受状态的Promise，那么then返回的Promise也会成为接受状态，并且将上次返回那个Promise的接受状态的回调函数的参数值作为这一次返回的Promise的接受状态回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {
        return new Promise(resolve => resolve('ok')); //回调函数返回了接受状态的promise，then将返回一个接受状态的promise
    })
    .then( (result) => {console.log(result)}); //ok

4.如果then中的回调函数返回一个已经是拒绝状态的Promise，那么then返回的Promise也会成为拒绝状态，并且将那个Promise的拒绝状态的回调函数的参数值作为这次返回的Promise的拒绝状态回调函数的参数值。

new Promise((resolve, reject) => {
    resolve();
})
    .then( () => {
        return new Promise((resolve, reject) => {
           reject(new Error('err'));
        });
    })
    .then( () => {}, (err) => {console.log(err)}); //Error: err

5.如果then中的回调函数返回一个未定状态（pending）的Promise，那么then返回Promise的状态也是未定的，并且它的终态与那个Promise的终态相同；同时，它变为终态时调用的回调函数参数与那个Promise变为终态时的回调函数的参数是相同的。

new Promise((resolve, reject) => {
    resolve();
})
    .then(() => {
        return new Promise(resolve => {
            setTimeout(resolve, 2000, 'ok');
        });
    })
    .then( (result) => {console.log(result)}); //ok

如何使用 Promise.all

——摘自李悦之：理解和使用Promise.all和Promise.race

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失败了，打出 '失败'
})

Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。

代码模拟：

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒来`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
  console.log(error)
})

需要特别注意的是，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

如何使用 Promise.race

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})