Promise,async/await

JavaScript

Promise

new Promise被创建时，内部executor就自动执行，executor接受两个函数参数，resolve和reject

Promise.state / .result

new Promise( (resolve,reject) => {...} )

Promise.resolve()/reject()

• 返回一个settled状态的promise。

Promise.prototype.then ()/ .catch ()/ .finally()

• 这三个方法都是异步。
• 在promise的状态变为settled后被调用。then中可以接收一个成功回调，一个失败回调。
• 回调函数接受上一个promise传递的result作为参数。
• 成功回调的返回值作为新生成的promise的result，then返回该promise，进行链式调用。具体的返回值依据以下规则返回。如果 then 中的回调函数：
  
  • 返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
  • 没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。
    抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
  • 返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
  • 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。相当于reject(value)。
  • 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

Promise.resolve().then(() => {//p1
    console.log(0);
    return new Promise.resolve(4);})
    //p2，p2的状态和参数会传给p1.then中回调函数返回的promise
    //如果 p2 是整数/字符串，则执行 FulfillPromise，直接改变 p1 的状态和结果
    //但这里p2是一个fulfilled的promise，引擎内部的执行大致相当于 JS 代码：p1 = p2.then(undefined, undefined)
    //执行完p2，p2变为fulfilled后p1才变为fullfilled
    .then((res) => {
    console.log(res)
})
Promise.resolve().then(() => {
    console.log(1);
}).then(() => {
    console.log(2);
}).then(() => {
    console.log(3);
}).then(() => {
    console.log(5);
}).then(() =>{
    console.log(6);
})

axios(option)
      .then(res => {
        if (res.status === 200) {
          resolve(res.data); //响应状态码为200,resolve
          console.log(res.data);
        } else {
          reject(res.data); //不是200，在200~300之间，reject抛出
        }
      })
      .catch(err => {
        Message({
          type: "error",
          message: err.response.data.msg
        });
        reject(err);//
      });

//当promiseA由pendding向settled过渡后，两个then会被调用。注意，这里并非链式调用。
const promiseA = new Promise(myExecutorFunc);
const promiseB = promiseA.then(handleFulfilled1, handleRejected1);
const promiseC = promiseA.then(handleFulfilled2, handleRejected2);

async/await

• async：
  
  • 返回值： 一个Promise，这个promise要么会通过一个由async函数返回的值被resolved，要么会通过一个从async函数中抛出的（或其中没有被捕获到的：一般指await语句没有trycatch处理）异常被rejected。
  • async函数是异步的，不会造成阻塞。
    
    
• await
  
  • await 会暂停async函数的执行，让 JavaScript引擎等待直到promise或thenable对象状态settled并返回结果，然后以 promise 的结果继续执行，只能在async函数中使用。
  • 如果一个 promise 正常 resolve，await promise 返回的就是其结果。但是如果 promise 被 reject，它将 throw 这个 error，此时async函数中最好有一个trycatch包裹住await语句。
    
    
• async/await与promise区别（ 并非简单语法糖）
  https://blog.fundebug.com/2018/07/18/javascript-engine-await-promise/

Promise的错误处理：

• .catch处理
  
  • 在 reject()中抛出的
  • 在回调中抛出的error。
    
    
• 使用try{}catch{}
  
  • try{}catch{}本身是同步代码，无法捕获异步错误
    
    

• async/await配合try{}catch{}

  • 在async函数中采用try{await...}catch(error){...}
  • 在async函数后.catch(error){...}
    
    
• unhandledrejection 事件处理程序（用于浏览器，以及其他环境的模拟），以跟踪未处理的 error

window.addEventListener('unhandledrejection', function(event) {
  // 这个事件对象有两个特殊的属性：
  alert(event.promise); // [object Promise] - 生成该全局 error 的 promise
  alert(event.reason); // Error: Whoops! - 未处理的 error 对象
});
new Promise(function() {
  throw new Error("Whoops!");
}); // 没有用来处理 error 的 catch

Promise API