async / await：更好的異步解決方案
在實(shí)際開(kāi)發(fā)中總會(huì)遇到許多異步的問(wèn)題，最常見(jiàn)的場(chǎng)景接口請(qǐng)求之后一定要等一段時(shí)間才能得到結(jié)果，如果遇到多個(gè)接口前后依賴(lài)，那么問(wèn)題就變得復(fù)雜。大家都一直在嘗試使用更好的方案來(lái)解決這些問(wèn)題。最開(kāi)始只能利用回調(diào)函數(shù)，后來(lái)開(kāi)始有人使用Promise的思維來(lái)搞定。到ES6中開(kāi)始支持原生的Promise，引入Generator函數(shù)。
直到ES7，有了async/await。
這是一個(gè)用同步的思維來(lái)解決異步問(wèn)題的方案。
我想很多人可能還不太分得清同步與異步的區(qū)別。如果你已經(jīng)徹底了解了事件循環(huán)，那么想必對(duì)異步的概念應(yīng)該非常了解。當(dāng)我們發(fā)出了請(qǐng)求，并不會(huì)等待響應(yīng)結(jié)果，而是會(huì)繼續(xù)執(zhí)行后面的代碼，響應(yīng)結(jié)果的處理在之后的事件循環(huán)中解決。那么同步的意思，就是等結(jié)果出來(lái)之后，代碼才會(huì)繼續(xù)往下執(zhí)行。
我們可以用一個(gè)兩人問(wèn)答的場(chǎng)景來(lái)比喻異步與同步。A向B問(wèn)了一個(gè)問(wèn)題之后，不等待B的回答，接著問(wèn)下一個(gè)問(wèn)題，這是異步。A向B問(wèn)了一個(gè)問(wèn)題之后，然后就笑呵呵的等著B(niǎo)回答，B回答了之后他才會(huì)接著問(wèn)下一個(gè)問(wèn)題。
那么我們先記住這個(gè)特點(diǎn)，async/await使用同步的思維，來(lái)解決異步的問(wèn)題。在繼續(xù)講解它的語(yǔ)法與使用之前，我們先介紹一下如何在我們的開(kāi)發(fā)環(huán)境中支持該語(yǔ)法。
如果你已經(jīng)知道如何配置，可跳過(guò)
一、如何在自己的開(kāi)發(fā)環(huán)境中支持async/await語(yǔ)法
這里主要介紹兩種方式。
1. webpack中支持該語(yǔ)法
首先在當(dāng)前項(xiàng)目中使用npm下載babel-loader。
- > npm install babel-loader --save-dev
然后在配置文件webpack.confing.dev.js中配置，在module.exports.module.rules中添加如下配置元素即可。
- {
- test: /\.(js|jsx)$/,
- include: paths.appSrc,
- loader: require.resolve('babel-loader'),
- options: {
- cacheDirectory: true,
- },
- },
如果你使用***版本的create-react-app或者vue-cli來(lái)構(gòu)建你的代碼，那么它們應(yīng)該已經(jīng)支持了該配置。
2. gulp中支持該語(yǔ)法
首先安裝gulp插件
- > npm install gulp-babel --save-dev
然后編寫(xiě)任務(wù)
- var gulp = require('gulp');
- var babel = require('gulp-babel');
- gulp.task('babel', function() {
- return gulp.src('src/app.js')
- .pipe(babel())
- .pipe(gulp.dest('dist'));
- });
二、如何使用
async函數(shù)是Generator的一個(gè)語(yǔ)法糖。如果你不知道Generator是什么函數(shù)也沒(méi)有關(guān)系，我們只需要知道async函數(shù)實(shí)際上返回的是一個(gè)Promise對(duì)象即可。
- async function fn() {
- return 30;
- }
- // 或者
- const fn = async () => {
- return 30;
- }
在聲明函數(shù)時(shí)，前面加上關(guān)鍵字async，這就是async的用法。當(dāng)我們用console.log打印出上面聲明的函數(shù)fn，我們可以看到如下結(jié)果：
- console.log(fn());
- // result
- Promise = {
- __proto__: Promise,
- [[PromiseStatus]]: "resolved",
- [[PromiseValue]]: 30
- }
很顯然，fn的運(yùn)行結(jié)果其實(shí)就是一個(gè)Promise對(duì)象。因此我們也可以使用then來(lái)處理后續(xù)邏輯。
- fn().then(res => {
- console.log(res); // 30
- })
await的含義為等待。意思就是代碼需要等待await后面的函數(shù)運(yùn)行完并且有了返回結(jié)果之后，才繼續(xù)執(zhí)行下面的代碼。這正是同步的效果。
但是我們需要注意的是，await關(guān)鍵字只能在async函數(shù)中使用。并且await后面的函數(shù)運(yùn)行后必須返回一個(gè)Promise對(duì)象才能實(shí)現(xiàn)同步的效果。
當(dāng)我們使用一個(gè)變量去接收await的返回值時(shí)，該返回值為Promise中resolve出來(lái)的值。
- // 定義一個(gè)返回Promise對(duì)象的函數(shù)
- function fn() {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- resolve(30);
- }, 1000);
- })
- }
- // 然后利用async/await來(lái)完成代碼
- const foo = async () => {
- const t = await fn();
- console.log(t);
- console.log('next code');
- }
- foo();
- // result:
- // 30
- // next code
運(yùn)行這個(gè)例子我們可以看出，當(dāng)在async函數(shù)中，運(yùn)行遇到await時(shí)，就會(huì)等待await后面的函數(shù)運(yùn)行完畢，而不會(huì)直接執(zhí)行next code。
如果我們直接使用then方法的話(huà)，想要達(dá)到同樣的結(jié)果，就不得不把后續(xù)的邏輯寫(xiě)在then方法中。
- const foo = () => {
- return fn().then(t => {
- console.log(t);
- console.log('next code');
- })
- }
- foo();
很顯然如果使用async/await的話(huà)，代碼結(jié)構(gòu)會(huì)更加簡(jiǎn)潔，邏輯也更加清晰。
異常處理
在Promise中，我們知道是通過(guò)catch的方式來(lái)捕獲異常。而當(dāng)我們使用async時(shí)，則通過(guò)try/catch來(lái)捕獲異常。
- function fn() {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- reject('some error.');
- }, 1000);
- })
- }
- const foo = async () => {
- try {
- await fn();
- } catch (e) {
- console.log(e); // some error
- }
- }
- foo();
如果有多個(gè)await函數(shù)，那么只會(huì)返回***個(gè)捕獲到的異常。
- function fn1() {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- reject('some error fn1.');
- }, 1000);
- })
- }
- function fn2() {
- return new Promise((resolve, reject) => {
- setTimeout(() => {
- reject('some error fn2.');
- }, 1000);
- })
- }
- const foo = async () => {
- try {
- await fn1();
- await fn2();
- } catch (e) {
- console.log(e); // some error fn1.
- }
- }
- foo();
實(shí)踐
在實(shí)踐中我們遇到異步場(chǎng)景最多的就是接口請(qǐng)求，那么這里就以jquery中的$.get為例簡(jiǎn)單展示一下如何配合async/await來(lái)解決這個(gè)場(chǎng)景。
- // 先定義接口請(qǐng)求的方法，由于jquery封裝的幾個(gè)請(qǐng)求方法都是返回Promise實(shí)例，因此可以直接使用await函數(shù)實(shí)現(xiàn)同步
- const getUserInfo = () => $.get('xxxx/api/xx');
- const clickHandler = async () => {
- try {
- const resp = await getUserInfo();
- // resp為接口返回內(nèi)容，接下來(lái)利用它來(lái)處理對(duì)應(yīng)的邏輯
- console.log(resp);
- // do something
- } catch (e) {
- // 處理錯(cuò)誤邏輯
- }
- }
為了保證邏輯的完整性，在實(shí)踐中try/catch必不可少?？傊?，不處理錯(cuò)誤邏輯的程序員不是好程序員。
與Promise相比，個(gè)人認(rèn)為async/await有一定的簡(jiǎn)潔性，但也并非就比Promise有絕對(duì)的優(yōu)勢(shì)，因此只能算是提供了另外一種稍好的方式，至于大家學(xué)習(xí)之后選擇哪種方式來(lái)解決自己的問(wèn)題，這僅僅只是你的個(gè)人喜好問(wèn)題。
