async和await

Posted 2021-12-08 还是不会呀

async和await

• • async的使用
  • await的使用

在async和await出来之前，异步回调的方法就有
1、回调嵌套
2、Promsie的链式回调
3、Generator的复杂繁琐调用方式

async/await采用同步的思维来解决异步问题的方式，使代码的可读性更强了。

async的使用

在函数的function关键字前加上 async，该函数就变成了 异步函数。

该函数和普通函数的区别：

• 异步函数的返回值是一个Promsie对象，相当于返回的值包裹在了Promise.resolve()内进行返回的
• 异步函数内可以使用await关键字

async函数内抛出错误，是通过返回值的Promsie对象catch进行捕获。

1、返回一个普通的值或者对象

async function foo() {
  return "fzb";
}

foo().then((res) => {
  console.log(res); // "fzb"
});

2、返回一个Promise对象

async function foo() {
  return new Promise((resolve, reject) => {
    // resolve("fzb");
    reject("error message");
  });
}

foo()
  .then((res) => {
    console.log(res); // "fzb"
  })
  .catch((error) => {
    console.log(error); // "error message"
  });

3、返回一个实现了thenable的对象

async function foo() {
  return {
    then: (resolve, reject) => {
      resolve("fzb");
    },
  };
}
foo().then((res) => {
  console.log(res); // fzb
});

await的使用

await关键字只能在async内进行使用。

async function foo() {
  // 1、await后面接一个普通的值或者对象
  const res1 = await "fzb";
  console.log(res1); // "fzb"
  const res2 = await { name: "fzb" };
  console.log(res2); // { name: 'fzb' }

  // 2、await后面接着一个thenable对象,若是reject状态那么异步函数返回的promise对象catch进行捕获错误
  const res3 = await {
    then: function (resolve, reject) {
      resolve("fzb");
      //   reject("error message");
    },
  };
  console.log(res3); // "fzb"

  // 3、await后面接着一个Promsie对象，若是reject状态那么异步函数返回的promise对象catch进行捕获错误
  const res4 = await new Promise((resolve, reject) => {
    resolve("fzb");
    // reject("error message");
  });
  console.log(res4); // "fzb"
}
foo()
  .then((res) => {
    console.log("res:", res); // res: undefined
  })
  .catch((err) => {
    console.log("err:", err); // err: error message
  });