中国领先的IT技术网站
|
|

async / await:更好的异步解决方案

在实际开发中总会遇到许多异步的问题,最常见的场景接口请求之后一定要等一段时间才能得到结果,如果遇到多个接口前后依赖,那么问题就变得复杂。大家都一直在尝试使用更好的方案来解决这些问题。

作者:佚名来源:前端大全|2017-08-02 14:17

【沙龙】51CTO诚邀您9月23号和多位技术大咖一起聊智能CDN的优化之路,抓紧时间哦!


async / await:更好的异步解决方案

在实际开发中总会遇到许多异步的问题,最常见的场景接口请求之后一定要等一段时间才能得到结果,如果遇到多个接口前后依赖,那么问题就变得复杂。大家都一直在尝试使用更好的方案来解决这些问题。最开始只能利用回调函数,后来开始有人使用Promise的思维来搞定。到ES6中开始支持原生的Promise,引入Generator函数。

直到ES7,有了async/await。

这是一个用同步的思维来解决异步问题的方案。

我想很多人可能还不太分得清同步与异步的区别。如果你已经彻底了解了事件循环,那么想必对异步的概念应该非常了解。当我们发出了请求,并不会等待响应结果,而是会继续执行后面的代码,响应结果的处理在之后的事件循环中解决。那么同步的意思,就是等结果出来之后,代码才会继续往下执行。

我们可以用一个两人问答的场景来比喻异步与同步。A向B问了一个问题之后,不等待B的回答,接着问下一个问题,这是异步。A向B问了一个问题之后,然后就笑呵呵的等着B回答,B回答了之后他才会接着问下一个问题。

那么我们先记住这个特点,async/await使用同步的思维,来解决异步的问题。在继续讲解它的语法与使用之前,我们先介绍一下如何在我们的开发环境中支持该语法。

如果你已经知道如何配置,可跳过

一、如何在自己的开发环境中支持async/await语法

这里主要介绍两种方式。

1. webpack中支持该语法

首先在当前项目中使用npm下载babel-loader。

  1. > npm install babel-loader --save-dev 

然后在配置文件webpack.confing.dev.js中配置,在module.exports.module.rules中添加如下配置元素即可。

  1.  
  2.     test: /\.(js|jsx)$/, 
  3.  
  4.     include: paths.appSrc, 
  5.  
  6.     loader: require.resolve('babel-loader'), 
  7.  
  8.     options: { 
  9.  
  10.       cacheDirectory: true
  11.  
  12.     }, 
  13.  
  14.   },  

如果你使用最新版本的create-react-app或者vue-cli来构建你的代码,那么它们应该已经支持了该配置。

2. gulp中支持该语法

首先安装gulp插件

  1. > npm install gulp-babel --save-dev 

然后编写任务

  1. var gulp = require('gulp'); 
  2.  
  3. var babel = require('gulp-babel'); 
  4.  
  5.   
  6.  
  7. gulp.task('babel'function() { 
  8.  
  9.   return gulp.src('src/app.js'
  10.  
  11.     .pipe(babel()) 
  12.  
  13.     .pipe(gulp.dest('dist')); 
  14.  
  15. });  

二、如何使用

async函数是Generator的一个语法糖。如果你不知道Generator是什么函数也没有关系,我们只需要知道async函数实际上返回的是一个Promise对象即可。

  1. async function fn() { 
  2.  
  3.     return 30; 
  4.  
  5.  
  6.   
  7.  
  8. // 或者 
  9.  
  10. const fn = async () => { 
  11.  
  12.     return 30; 
  13.  
  14.  

在声明函数时,前面加上关键字async,这就是async的用法。当我们用console.log打印出上面声明的函数fn,我们可以看到如下结果:

  1. console.log(fn()); 
  2.  
  3.   
  4.  
  5.     // result 
  6.  
  7.     Promise = { 
  8.  
  9.         __proto__: Promise, 
  10.  
  11.         [[PromiseStatus]]: "resolved"
  12.  
  13.         [[PromiseValue]]: 30 
  14.  
  15.     }  

很显然,fn的运行结果其实就是一个Promise对象。因此我们也可以使用then来处理后续逻辑。

  1. fn().then(res => { 
  2.  
  3.     console.log(res);  // 30 
  4.  
  5. })  

await的含义为等待。意思就是代码需要等待await后面的函数运行完并且有了返回结果之后,才继续执行下面的代码。这正是同步的效果。

但是我们需要注意的是,await关键字只能在async函数中使用。并且await后面的函数运行后必须返回一个Promise对象才能实现同步的效果。

当我们使用一个变量去接收await的返回值时,该返回值为Promise中resolve出来的值。

  1. // 定义一个返回Promise对象的函数 
  2.  
  3. function fn() { 
  4.  
  5.     return new Promise((resolve, reject) => { 
  6.  
  7.         setTimeout(() => { 
  8.  
  9.             resolve(30); 
  10.  
  11.         }, 1000); 
  12.  
  13.     }) 
  14.  
  15.  
  16.   
  17.  
  18. // 然后利用async/await来完成代码 
  19.  
  20. const foo = async () => { 
  21.  
  22.     const t = await fn(); 
  23.  
  24.     console.log(t); 
  25.  
  26.     console.log('next code'); 
  27.  
  28.  
  29.   
  30.  
  31. foo(); 
  32.  
  33.   
  34.  
  35. // result: 
  36.  
  37. // 30 
  38.  
  39. // next code  

运行这个例子我们可以看出,当在async函数中,运行遇到await时,就会等待await后面的函数运行完毕,而不会直接执行next code。

如果我们直接使用then方法的话,想要达到同样的结果,就不得不把后续的逻辑写在then方法中。

  1. const foo = () => { 
  2.  
  3.     return fn().then(t => { 
  4.  
  5.         console.log(t); 
  6.  
  7.         console.log('next code');     
  8.  
  9.     }) 
  10.  
  11.  
  12.   
  13.  
  14. foo();  

很显然如果使用async/await的话,代码结构会更加简洁,逻辑也更加清晰。

异常处理

在Promise中,我们知道是通过catch的方式来捕获异常。而当我们使用async时,则通过try/catch来捕获异常。

  1. function fn() { 
  2.  
  3.     return new Promise((resolve, reject) => { 
  4.  
  5.         setTimeout(() => { 
  6.  
  7.             reject('some error.'); 
  8.  
  9.         }, 1000); 
  10.  
  11.     }) 
  12.  
  13.  
  14.   
  15.  
  16. const foo = async () => { 
  17.  
  18.     try { 
  19.  
  20.         await fn(); 
  21.  
  22.     } catch (e) { 
  23.  
  24.         console.log(e);  // some error 
  25.  
  26.     } 
  27.  
  28.  
  29.   
  30.  
  31. foo();  

如果有多个await函数,那么只会返回第一个捕获到的异常。

  1. function fn1() { 
  2.  
  3.     return new Promise((resolve, reject) => { 
  4.  
  5.         setTimeout(() => { 
  6.  
  7.             reject('some error fn1.'); 
  8.  
  9.         }, 1000); 
  10.  
  11.     }) 
  12.  
  13.  
  14. function fn2() { 
  15.  
  16.     return new Promise((resolve, reject) => { 
  17.  
  18.         setTimeout(() => { 
  19.  
  20.             reject('some error fn2.'); 
  21.  
  22.         }, 1000); 
  23.  
  24.     }) 
  25.  
  26.  
  27.   
  28.  
  29. const foo = async () => { 
  30.  
  31.     try { 
  32.  
  33.         await fn1(); 
  34.  
  35.         await fn2(); 
  36.  
  37.     } catch (e) { 
  38.  
  39.         console.log(e);  // some error fn1. 
  40.  
  41.     } 
  42.  
  43.  
  44.   
  45.  
  46. foo();  

实践

在实践中我们遇到异步场景最多的就是接口请求,那么这里就以jquery中的$.get为例简单展示一下如何配合async/await来解决这个场景。

  1. // 先定义接口请求的方法,由于jquery封装的几个请求方法都是返回Promise实例,因此可以直接使用await函数实现同步 
  2.  
  3. const getUserInfo = () => $.get('xxxx/api/xx'); 
  4.  
  5.   
  6.  
  7. const clickHandler = async () => { 
  8.  
  9.     try { 
  10.  
  11.         const resp = await getUserInfo(); 
  12.  
  13.         // resp为接口返回内容,接下来利用它来处理对应的逻辑 
  14.  
  15.         console.log(resp); 
  16.  
  17.   
  18.  
  19.         // do something 
  20.  
  21.     } catch (e) { 
  22.  
  23.         // 处理错误逻辑 
  24.  
  25.     } 
  26.  
  27.  

为了保证逻辑的完整性,在实践中try/catch必不可少。总之,不处理错误逻辑的程序员不是好程序员。

与Promise相比,个人认为async/await有一定的简洁性,但也并非就比Promise有绝对的优势,因此只能算是提供了另外一种稍好的方式,至于大家学习之后选择哪种方式来解决自己的问题,这仅仅只是你的个人喜好问题。

【编辑推荐】

  1. JavaScript 的 Async/Await 完胜 Promise 的六个理由
  2. 前端MVC变形记
  3. 现代前端开发技术栈
  4. 前端模板的原理与实现
  5. 前端性能优化以及解决方案
【责任编辑:枯木 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

网络工程师教程(第2版)

本书是全国计算机技术与软件专业技术资格(水平)考试的指定用书。按照新的网络工程师考试大纲的规定,本书包含了数据通信基础知识、网络体...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× 学习达标赢Beats耳机