async/await的理解和使用
1. 等待的是Promise
1.1 await Promise 状态改变
function fn() {
// ! 有return await等待的才是一个 resolved 的 Promise，await 表达式的值就是 resolve() 传递的值
return new Promise((resolve, reject) => {
console.log('有resolve或reject');
// resolve('res.data'); 1.
reject('reason'); // 2.
// 调用 resolve 或 reject 并不会终结 Promise 的参数函数的执行，除非 return resolve('xxx')。
console.log('在resolve之后');
});
}
async function foo() {
// 捕获异常
try {
// 发送 http 请求，这样就可以类似同步阻塞，获取到请求的数据后再处理
const result = await fn(); // resolve('res.data');
// 这之后的代码相当于在Promise.prototype.then()里面执行，是异步微
console.log('return:' + result);
} catch (error) {
console.log(error);
}
}
foo();
1的执行结果：
// 有resolve或reject
// 在resolve之后
// return:res.data
2的执行结果：
// 有resolve或reject
// 在resolve之后
// reason
1.2 等待的promise没有resolve或reject
function fn() {
return new Promise((resolve, reject) => {
console.log('等待的promise没有resolve或reject');
});
}
async function foo() {
const result = await fn();
console.log('我永远不会执行');
}
foo();
执行结果：
// 等待的promise没有resolve或reject
2. 等待的不是Promise
function func() {
setTimeout(() => {
console.log('等待的不是promise');
}, 2000);
}
async function fo() {
await func();
console.log('我不会被阻塞');
}
fo();
执行结果：
// 我不会被阻塞
// 等待的不是promise
注：async/await必须在函数中使用