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
- 该对象的then方法会立即执行，
返回值为普通值
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 的知识
