1. await只能用在async函数的上下文中;
错误用法:
async function getObjKeys() {
let arr = [1,2,3,4,5,6,7];
arr.forEach(function(item) {
await console.log(arr[i]);
})
}
getObjKeys();
控制台有报错,报错内容是:
正确的用法:
async function getObjKeys() {
let arr = [1,2,3,4,5,6,7];
for(let i = 0; i < arr.length; i++) {
await console.log(arr[i]);
}
}
2. await 后面可以跟任何的JS 表达式。
如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决(等待promise对象的状态resolve),如果等的是正常的表达式则立即执行。
function sendRequest() {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('get', '/api/blog/list', true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log('接口响应数据返回成功')
resolve('成功了');
}
}
xhr.send(null);
})
}
async function getMsg() {
let result = await sendRequest();
console.log(result);
}
getMsg();
console打印结果:
3. async…await不能取代Promise.all
实现多个请求并发需要结合async-await和Promise.all()一起实现。
示例:当十个接口请求成功后,关闭loading。
如果给每个请求加await,则会导致ajax 的并发请求发成了阻塞式同步,上个接口请求完毕后,才会请求下一个接口。不合适的用法:
function sendRequest(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log('接口响应数据返回成功')
resolve('成功了');
}
}
xhr.send(null);
})
}
async function getMsg() {
let result1 = await sendRequest('/api/blog/list');
let result2 = await sendRequest('/api/blog/detail');
console.log('关闭loading');
}
getMsg();
正确的写法如下:
async function getMsg() {
let result1 = sendRequest('/api/blog/list');
let result2 = sendRequest('/api/blog/detail');
let result = await Promise.all([result1, result2]);
console.log('关闭loading');
}