async异步函数的写法

async关键字用于声明一个异步函数

async function requestData() {}

const foo = async () => {};

class bar {
  async baz() {}
}

async异步函数的执行流程

如果只是在function前面加了async，函数内部没有其他特殊的关键字，异步代码的执行和普通函数的执行没有区别


async function foo() {
  console.log('foo start')
  console.log('foo 业务代码执行')
  console.log('foo end')
}
console.log('script start')
foo()
console.log('script end')

执行结果：

script start
foo start
foo 业务代码执行
foo end
script end

异步函数的返回值

异步函数执行返回一个promise对象
该promise对象的fulfilled回调的执行时机是：

异步函数执行中遇到return或函数执行结束, 如果没有return,默认return undefined
异步函数返回值：
为普通值，异步函数执行返回的promise对象的状态变为fulfilled，返回值会作为fulfilled回调的参数传入
为promise对象，此promise对象的状态会决定异步函数执行返回的promise对象的状态，
为一个实现了then接口的对象，
- 该对象的then方法会立即执行，
  - then方法的resovle函数调用，异步函数执行返回的promise对象的状态变为fulfilled
  - then方法的reject函数调用，异步函数执行返回的promise对象的状态变为rejected

返回值为普通值

async function foo() {
  console.log("foo start");
  console.log("foo 业务代码执行");
  console.log("foo end");
}


//异步函数中没有return
const promise = foo();
promise.then(res => {
  console.log(res)
})
// foo start
// foo 业务代码执行
// foo end
// undefined

异步函数返回一个实现了then接口的对象

//异步函数返回一个实现了then接口的对象
async function baz() {
  console.log("baz start");
  console.log("baz 业务代码执行");
  console.log("baz end");
  return {
    then(resolve, reject) {
      resolve("then");
    },
  };
}
const promise1 = baz();
promise1.then((res) => {
  console.log(res);
});

// baz start
// baz 业务代码执行
// baz end
// then

异步函数返回一个promise对象

// 异步函数返回一个promise对象
async function bar() {
  console.log("bar start");
  console.log("bar 业务代码执行");
  console.log("bar end");
  return new Promise((resolve, reject) => {
    resolve('bar')
  })
}
const promise2 = bar();
promise2.then((res) => {
  console.log(res);
});

// bar start
// bar 业务代码执行
// bar end
// bar

异步函数的异常

普通函数执行过程中抛出异常，会立即中止函数的执行，函数内部当前下面的代码不再执行，函数所在作用域中函数调用位置下面的代码也不再执行
异步函数执行过程中抛出异常，函数内部当前下面的代码不再执行，函数所在作用域中函数调用位置下面的代码依然正常向下执行，
异步函数执行返回的promise对象的状态会变为rejected,抛出的异常会作为异步函数执行返回的promise对象的rejected回调的参数传入



async function bar() {
  console.log("bar start");
  console.log("bar 业务代码执行");
  throw new Error("error msg");
  console.log("bar end"); //这行代码没执行
}
const promise = bar();
promise
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

console.log("后续还有代码"); //这行代码执行了

执行结果:

bar start
bar 业务代码执行
后续还有代码
Error: error msg
    at bar (G:\03.教学视频\0.javascript-王红元\js高级\code\17.迭代器和生成器和async-await\23.异步函数的异常.js:11:9)
    at Object.<anonymous> (G:\03.教学视频\0.javascript-王红元\js高级\code\17.迭代器和生成器和async-await\23.异步函数的异常.js:14:17)

异步函数中的await关键字

await关键字只能用在async异步函数中
await关键字后面一般跟一个返回promise对象的表达式
当此promise对象的状态变为fulfilled，await表达式会返回fulfulled回调接收的参数, await下面的代码才会执行
当此promise对象的状态没有变成fulfilled, await下面的代码不会执行
await下面的代码相当于是在fulfilled回到中执行的
await后跟上其他值
如果跟上普通值，会立即作为await表达式的返回值返回
如果跟上实现了then接口的对象，该对象的then方法会立即执行，then的resolve函数调用时的参数会作为await表达式的返回值返回
如果await跟的表达式返回的promise对象的状态变成了rejected,则整个异步函数返回的promise对象的状态也会变为rejected,
rejected回调的参数会作为整个异步函数返回的promise对象的rejected回调的参数



function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(111);
    }, 3000);
  });
}

async function getListData() {
  const res = await requestData();
  console.log(res); // 111
}

getListData();

// 111

//await后跟普通值
async function getListData1() {
  const res = await 100;
  console.log(res); // 100
}

getListData1();


//await后跟实现了then方法的对象
async function getListData2() {
  const res = await {
    then(resolve, reject) {
      resolve(200);
    },
  };
  console.log(res); // 200
}

getListData2();

非常感谢王红元老师的深入JavaScript高级语法让我学习到很多 JavaScript 的知识

42.async/await