图解Async/await异步编程

每一次看过往写过的代码,总是感到诧异,并产生“这真的是我写的吗”的疑问,这说明大环境下的技术一直在不断更新,我也一直都在紧追着成长,一次次攀着过去向上。

攀登永无止境- 陈帅华涂鸦

这几天review我博客网站后端的NodeJS代码时,同样诧异。这一次对自己感到不爽的是NodeJS中多层嵌套的回调代码。于是应用Async/await异步编程,将涉及到与数据库mysql交互的全部代码重新写了一遍。

回调黑洞 - 陈帅华涂鸦

Async

Async函数总是返回一个promise实例。既可以显式返回,也可以返回其它值,Async函数会将值包装成promise实例。比如,下方两段代码片段中的foo函数的作用是等效的,第一种是简写形式,等同于第二种书写形式。

async function foo(){
  return 1;
}
async function foo(){
  return Promise.resolve(1);
}

Async函数要求函数前必须携带async标志。只有函数前携带async标志的函数才能称为Async函数,该函数才会总是返回一个promise实例。

await

async/await让函数内部语句同步顺序执行 - 陈帅华涂鸦

语法如下:

let value = await promise;

关键词await让JavaScript等一会,直到promise变为已设置的状态(执行了resolve()reject()函数),并返回值(就是传入resolve()reject()函数的参数)。请看示例:

async function f(){
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("完成"), 1000)
  })
  let result = await promise;
  alert(result); // "完成"
}
f();

await也会抛出错误,可以使用try{}catch(){}捕获错误:

async function f(){
  try{
    let response = await fetch('http://no-such-url');
  }catch(err){
    alert(err); // TypeError: failed to fetch
  }
}
f();

如果没有在函数中及时的捕获和处理错误异常,因为async总是返回promise实例,所以也可以调用promise的异常捕获方法:

async function f(){
  let response = await fetch('http://no-such-url');
}
// f()成为rejected状态的peomise实例
f().catch(alert);

版权声明 » 自由转载-署名-非商用-相同方式共享

作者署名 » 陈帅华-探索技术艺术与国学之美

发布日期 » 2019年8月3日 星期六

我要留言