async 和 await的用法（记忆版）

一、复习Promise

1.初步

function 摇骰子(){
  return new Promise(()=>{
    setTimeout(()=>{
      let n = parseInt(Math.random()*6+1,10)
      // return n  是得不到n的，因为外面还有个return
    },3000)
  })
}
摇骰子() //得到一个promise对象

• 定义一个函数，返回一个promise对象
  1.就是我给你一个承诺，3s之后会扔骰子
  2.那如何你如何告诉我骰子的点数？
  ——传参数：resolve 和 reject
  ——成功就调用 resolve ，失败就调用 reject
  

2.进阶：传参数：resolve 和 reject

• resolve 和 reject 相当于两个参数
  1.如果你成功了，就resolve一下，表示成功了
  2.失败就reject（摇骰子一般不会失败）
• 如何得到结果？
  1.使用 .then：fn().then(success,fail)
  2.传递两个回调函数，success 和 fail，顺序是和 resolve 和 reject 一一对应的
  ——其中 n 就是参数

//promise的用法，记忆下来就行
function 摇骰子(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      let n = parseInt(Math.random()*6+1,10)
      resolve(n)
    },3000)
  })
}
//fn().then(success,fail)
摇骰子().then(
  (x)=>{ console.log('骰子的点数是：'+ x) },
  ()=>{ console.log('摇骰子还能失败?') }
)

二、async 和 await

1.使用

• 使用 promise.then 还是有回调存在
• async 返回一个promise
• await
  1.await 只能放到有 async 前缀的函数里面
  2.await 后面接一个会 return Promise的函数

async function getDate() {
  const res = await 摇骰子();
  console.log(res);
}
getDate();

• getDate
  1.函数需要等3秒才能执行完，所以需要进行特殊标记，因此前面要加上 async 进行标记
  2.const res = await 摇骰子()
  ——右边先执行，再赋值到左边，整个过程需要3秒

2.进阶

• 如果失败了怎么办？
• 代码：猜大小

function 猜大小(猜测) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let n = parseInt(Math.random() * 6 + 1, 10);
      if (n > 3) {
        if (猜测 === "大") {
          resolve(n);
        } else {
          reject(n);
        }
      } else {
        if (猜测 === "小") {
          resolve(n);
        } else {
          reject(n);
        }
      }
    }, 3000);
  });
}

async function 猜测() {
  try {
    let n = await 猜大小("大");
    console.log("猜对啦！"+n);
  } catch (err) {
    console.log("输光啦！"+n);
  }
}
猜测();

三、为什么要用 async 和 await ？

• 答：更像是标准的同步函数，典型的从上往下执行的代码，使用 .then 不明确哪个函数先执行，当 .then 越来越多，就难以理解逻辑了

四、同时玩两个骰子（多个异步的结果）

• Promise.all([猜大小('大'),猜大小('大')])
  1.它接收一个数组
  2.数组里面的每一个函数都会返回一个 promise
  3.然后再 then，同样接收两个回调，成功和失败
  4.成功：两个都成功才执行
  5.失败：只要任何一个出错，就执行出错
• Promise.race([猜大小('大'),猜大小('大')])
  1.成功：只要一个成功就算成功
  2.失败：两个都失败才算失败

1.使用promise.then

Promise.all([猜大小('大'),猜大小('大')])
  .then((x)=>{ console.log(x) },(y)=>{ console.log(y) })

2.使用 await

• await 只能接一个 promise
• 但 Promise.all 也会返回一个 promise
  1.而该promise的结果基于里面的两个promise
  2.await return 的是一个数组
  ——[结果1,结果2]

async function 猜测() {
  try {
    let n = await Promise.all([猜大小('大'),猜大小('大')]);
    console.log("猜对啦！"+n);
  } catch (err) {
    console.log("输光啦！"+n);
  }
}
猜测();