async的作用
async声明的函数表示函数是异步的,并且,被async声明的函数,会返回一个Promise对象,所以如果在函数中直接返回一个直接量,这个直接量会被Promise.resolve()封装成一个promise对象。
例如:
async function testAsync() {
return "hello async";
}
const result = testAsync();
console.log(result);
// 这里会打印出一个Promise,此时如果我们不用await获取返回值,也可以使用.then的方式获取。但如果没有返回值,就会返回一个undefined
// 因为promise的特点是无等待,所以没有await时执行async,会立即执行并返回promise对象,并且不会阻塞其他执行。
await的作用
await是要等待async的返回结果,不论async函数是promise还是直接量,await都可以获取结果,例如:
function getSomething() {
return "something";
}
async function testAsync() {
return Promise.resolve("hello async");
}
async function test() {
const v1 = await getSomething();
const v2 = await testAsync();
console.log(v1, v2);
}
test(); // something hello async
await优势
单独的promise并不能体现出await的优势,在处理then链式调用的时候可以发现它的好处。
例如:
/**
* 传入参数 n,表示这个函数执行的时间(毫秒)
* 执行的结果是 n + 200,这个值将用于下一步骤
*/
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => resolve(n + 200), n);
});
}
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(n) {
console.log(`step2 with ${n}`);
return takeLongTime(n);
}
function step3(n) {
console.log(`step3 with ${n}`);
return takeLongTime(n);
}
// 使用promise处理
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
// 使用await
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time2);
const result = await step3(time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
// 这种写法代码变得清晰很多,看起来也很像同步代码,简单易读。
如果我们每一个异步都要依赖于前面每一个异步返回的结果,这样使用await的优势就更明显了。例如:
function step1(n) {
console.log(`step1 with ${n}`);
return takeLongTime(n);
}
function step2(m, n) {
console.log(`step2 with ${m} and ${n}`);
return takeLongTime(m + n);
}
function step3(k, m, n) {
console.log(`step3 with ${k}, ${m} and ${n}`);
return takeLongTime(k + m + n);
}
// 使用promise,参数传递起来优点麻烦呢
function doIt() {
console.time("doIt");
const time1 = 300;
step1(time1)
.then(time2 => {
return step2(time1, time2)
.then(time3 => [time1, time2, time3]);
})
.then(times => {
const [time1, time2, time3] = times;
return step3(time1, time2, time3);
})
.then(result => {
console.log(`result is ${result}`);
console.timeEnd("doIt");
});
}
doIt();
// 使用await
async function doIt() {
console.time("doIt");
const time1 = 300;
const time2 = await step1(time1);
const time3 = await step2(time1, time2);
const result = await step3(time1, time2, time3);
console.log(`result is ${result}`);
console.timeEnd("doIt");
}
doIt();
以上就是对async与await的理解。参考链接