async | await
async
async 和 await 是用来处理异步的。即你需要异步像同步一样执行,需要异步返回结果之后,再往下依据结果继续执行。
async 是“异步”的简写,而 await 可以认为是 async wait 的简写。
async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
当 async 函数没有返回值时,返回 Promise.resolve(undefined).
<script>
async function testAsync(){
return 'Hello world';
}
var result = testAsync();
console.log(result); // Promise {<fulfilled>: 'Hello world'}
result.then((v) => {
console.log(v); // Hello world
})
/*
function testAsync() {
return 'Hello World';
}
new Promise(function (resolve) {
resolve(testAsync());
}).then(function (value) {
console.log(value); // Hello World
});
*/
</script>
await
await 只能放在 async 函数内部使用
await 用于一个异步操作之前,表示要“等待”这个异步操作的返回值。
await 也可以用于一个同步的值。
如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西。
如果它等到的是一个 Promise 对象,那 await 会阻塞后面的代码,等着 Promise 对象 resolve,
然后得到 resolve 的值,作为 await 表达式的运算结果。
同步代码
<script>
const a = await 'Hello World';
// 上述写法会报错的:await is only valid in async functions and the top level bodies of modules
// 相当于
const a = await Promise.resolve('Hello World');
// 所以直接写同步代码即可,不需要 await 关键字
const a = 'Hello World';
</script>
异步代码
<script>
// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num);
}, 2000);
});
}
async function testResult() {
let result = await doubleAfter2seconds(21);
console.log(result); // 42
}
testResult();
</script>
执行顺序
<script>
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num);
}, 2000);
});
}
async function testResult() {
console.log("内部调用前");
// testResult方法中,该语句执行完了,后面的语句才能执行,阻塞发生在promise对象异步中。
let result = doubleAfter2seconds(60);
console.log(result);
console.log("内部调用后");
}
console.log("外部调用前");
testResult();
console.log("外部调用后");
/*
外部调用前
内部调用前
外部调用后
60
内部调用后
*/
// 如果去掉 await
/*
外部调用前
内部调用前
Promise {<pending>}
内部调用后
外部调用后
*/
</script>
<script>
// 2s 之后返回双倍的值
function doubleAfter2seconds(num){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num);
}, 2000);
});
}
async function testResult() {
let first = await doubleAfter2seconds(10);
let second = await doubleAfter2seconds(20);
let res = first + second;
return res
}
testResult().then(res => {
console.log(res); // 60
}).catch(error => {
console.log(error); // 当把return res 的 res 改为 res2 时, 打印的是 ReferenceError: res2 is not defined
})
</script>
<script>
// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
})
}
async function testResult () {
try {
let first = await doubleAfter2seconds(10);
let second = await doubleAfter2seconds(20);
let res = first + second;
return res3;
} catch (error) {
console.log(error); // ReferenceError: res3 is not defined
}
}
testResult().then(res => {
console.log(res); // undefined
});
</script>