javascript 高级编程系列 - async/await
async/await其实是生成器的语法糖,async用于声明一个函数是异步的,而await用于等待一个异步方法执行完成,并且await只能出现在async函数中。
1. async 函数
async函数返回一个Promise对象,因此可以使用Promise对象的相关方法去进 一步处理async函数返回的结果。
async function asyncFn(){
return 'test async';
}
let promise = asyncFn();
promise.then((value)=> {
console.log(value); // 'test async'
});
2. await 关键字
await 等待任意表达式的结果,可以是一个普通函数调用也可以是一个异步事件处理,或者一个表达式。
function doSomething(){
return 'test';
}
async function asyncTest1(){
return Promise.resolve('test1');
}
async function asyncTest2(){
const res1 = await doSomething();
const res2 = await asyncTest1();
console.log(res1, res2); // test test1
return 'test2';
}
const res = asyncTest2();
console.log(res); // Promise {pending}
res.then(v => console.log(v)); // 'test2'
3. async/await 处理异步编程
处理多个异步操作的链式调用的时,可以使用async/await进行进一步优化编程方式,使其更像是同步操作。
- Promise的链式调用
const excuteAsyncTask = (n) => {
return new Promise((resolve, reject)=> {
setTimeout(()=> resolve(n+1), 200);
});
};
const step1 = (n) => { console.log('step1'); return excuteAsyncTask(n); };
const step2 = (n) => { console.log('step2'); return excuteAsyncTask(n); };
const step3 = (n) => { console.log('step3'); return excuteAsyncTask(n); };
const doTask = () => {
step1(0)
.then(v1 => step2(v1))
.then(v2 => step3(v2))
.then(v => {
console.log(v);
});
};
doTask(); //step1 step2 step3 3
- async/await
const excuteAsyncTask = (n) => {
return new Promise((resolve, reject)=> {
setTimeout(()=> resolve(n+1), 200);
});
};
const step1 = (n) => { console.log('step1'); return excuteAsyncTask(n); };
const step2 = (n) => { console.log('step2'); return excuteAsyncTask(n); };
const step3 = (n) => { console.log('step3'); return excuteAsyncTask(n); };
const doTask = async () => {
const v1 = await step1(0);
const v2 = await step2(v1);
const v3 = await step3(v2);
console.log(v3);
};
doTask(); //step1 step2 step3 3
4. async/await捕获异常
const doTask = async () => {
try {
let a = await Promise.reject('reject');
} catch(error){
console.log(error); // reject
}
};
doTask();
5. async/await 的优点
- 代码书写更加同步, 相对链式调用可读性更强。
- 错误处理更加友好, 使用try catch 语句能更好的捕获错误
- 调试更加方便,Promise的链式调用,调试器无法进入代码块
标签:
javascript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战