ES8-async&await
2022-04-24 本文已影响0人
hunter97
async
函数是使用async
关键字声明的函数,async函数是AsyncFunction
构造函数的实例,返回值是一个promise对象,并且其中允许使用await
关键字。
await
操作符用于等待一个Promise
对象。它只能在异步函数 async function
中使用。
async
和await
关键字让我们可以用一种更简洁的方式写出基于Promise
的异步行为,而无需刻意地链式调用promise
。
一、 使用示例
const promiseSuccess = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('promise success')
}, 1000);
});
}, getData = async () => {
const data = await promiseSuccess();
console.log(data);
};
getData();
运行结果
二、 注意事项
-
await
命令后面的Promise
对象,运行结果可能是rejected
,所以做一下安全保护。
如:
const promiseFail = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('promise fail')
}, 1000);
});
}, getData = async () => {
console.log('安全保护方式一::');
const data1 = await promiseFail().catch(err=>err);
console.log(data1);
console.log('安全保护方式二::');
try {
const data2 = await promiseFail().catch(err=>err);
console.log(data2);
} catch (error) {
console.log(error);
};
console.log('不做安全保护::');
const data = await promiseFail();
console.log(data);
};
getData();
运行结果
-
await
命令只能用在async
函数之中,如果用在普通函数,就会报错。
// 模拟异步函数
const promiseSuccess = (pos) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`promise success ${pos}`)
}, 1000);
});
};
// 正确示例
const getData1 = async () => {
let data1s = [];
for (let i = 0; i < 3; i++) {
data1s.push(await promiseSuccess(i));
}
console.log(data1s)
};
正确示例(getData1)运行结果
// 错误示例
const getData2 = async () => {
const data2s = [{}, {}, {}].map((item, i) => {
return await promiseSuccess(i);
})
console.log(data2s)
};
错误示例(getData2)运行结果
- 如果确实希望多个请求并发执行,可以使用
Promise.all
方法或for
循环。
const promiseSuccess = (pos) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`promise success ${pos}`)
}, 1000);
});
}, getData1 = async () => {
const promises = [{}, {}, {}].map((item, i) => promiseSuccess(i)),
data1s = await Promise.all(promises);
console.log('Promise.all方法::');
console.log(data1s)
}, getData2 = async () => {
const promises = [{}, {}, {}];
let data2s = [];
for (let i = 0; i < promises.length; i++) {
data2s.push(await promiseSuccess(i))
}
console.log('for循环方法::');
console.log(data2s)
};
getData1();
getData2();
运行结果
世界会向那些有目标和远见的人让路。