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的链式调用,调试器无法进入代码块
posted @   箫笛  阅读(85)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示