Promise,async/await

ES6进阶

复习Promise

async function

面试官问asyc是干什么的？

• 能和promise结合起来使用

• 会让异步函数更像同步函数

例子

function fn() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let n = parseInt(Math.random() * 6 + 1, 10); //[1,7)
      resolve(n);
    }, 3000);
  });
}
fn().then(
  (x) => {
    console.log("successfull", x);
  },
  () => {
    "fail";
  }
);

codesanbox

async/await

await只能放在async函数里面，否则直接报错。

function fn() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let n = parseInt(Math.random() * 6 + 1, 10); //[1,7)
      resolve(n);
    }, 3000);
  });
}

async function  test(){
  let n = await fn();//如果这里没写括号，就不会执行这个fn函数
  console.log(n)
}
test()

await后面接一个会return new Promise()的函数，并执行这个函数

另一个例子

function fn(guessNumber) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let n = parseInt(Math.random() * 6 + 1, 10); //[1,7)

      if (n > 3) {
        if (guessNumber === "big") {
          resolve(n);
        } else {
          reject(n);
        }
      } else {
        if (guessNumber === "small") {
          resolve(n);
        } else {
          reject(n);
        }
      }
    }, 3000);
  });
}

async function test() {
  try {
    let n = await fn("big");
    console.log("you win");
  } catch (error) {
    console.log("you loss");
  }
}

test();

面试题：为什么要用await？

为了更像是标准的同步函数（从上往下执行的）

The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

同步代码：synchronous code

promise的链式代码图示，会把你搞爆炸：

Screen Shot 2022-01-26 at 11.00.43 AM

await的局限性：只能接一个promise

如果需要多摇几个骰子的话，await就无法满足要求了。

因此需要用到promise.all

Promise.all([condition1, condition2]).then(()=>{success},()=>{fail})

condition1和condition2同时成功才会触发success，其中任何一个失败都会触发fail

如何用await来实现接受多个promise呢？

async function test() {
  try {
    let n = await Promise.all([condition1, condition2])
    //这里的n会返回一个数组
    console.log("you win");
  } catch (error) {
    console.log("you loss");
  }
}

promise.race只要有一个条件成功就会触发success

async和await都是promise的语法糖