前言

成都創(chuàng)新互聯(lián)公司專注于嫩江網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供嫩江營銷型網(wǎng)站建設(shè)，嫩江網(wǎng)站制作、嫩江網(wǎng)頁設(shè)計(jì)、嫩江網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造嫩江網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供嫩江網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

在面試的時(shí)候，async/await是很能看出應(yīng)試者知識面的一個(gè)點(diǎn)。當(dāng)然自己也沒想好從什么角度去闡釋這個(gè)知識點(diǎn)。當(dāng)面試管問的時(shí)候，你可以答自執(zhí)行的generator的語法糖。但是自己有些過實(shí)現(xiàn)么，或者是看過他的實(shí)現(xiàn)。

babel是如何來實(shí)現(xiàn)的

注：對于generator不了解的，可以先去看一下generator，順帶可以把iterator看了。

ex代碼：

async function t() {
    const x = await getResult();
  	const y = await getResult2();
  	return x + y;
}

babel轉(zhuǎn)化代碼

"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
    try {
        var info = gen[key](arg);
        var value = info.value;
    } catch (error) {
        reject(error);
        return;
    }
    if (info.done) {
        resolve(value);
    } else {
        Promise.resolve(value).then(_next, _throw);
    }
}

function _asyncToGenerator(fn) {
    return function () {
        var self = this, args = arguments;
        return new Promise(function (resolve, reject) {
            var gen = fn.apply(self, args);
            function _next(value) {
                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
            }
            function _throw(err) {
                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
            }
            _next(undefined);
        });
    };
}

function t() {
  return _t.apply(this, arguments);
}

function _t() {
  _t = _asyncToGenerator(function* () {
    const x = yield getResult();
    const y = yield getResult2();
    return x + y;
  });
  return _t.apply(this, arguments);
}

從代碼中可以看出，babel將一個(gè)generator轉(zhuǎn)化為async用了兩步_asyncToGenerator和asyncGeneratorStep。

_asyncToGenerator干了什么

1、調(diào)用_asyncToGenerator返回了一個(gè)promise，剛好符合async函數(shù)可以接then的特性。

2、定義了一個(gè)成功的方法_next，定義了一個(gè)失敗的方法_throw。兩個(gè)函數(shù)中是調(diào)用asyncGeneratorStep。看完asyncGeneratorStep就知道這其實(shí)是一個(gè)遞歸。

3、執(zhí)行_next。也就是上面說的自執(zhí)行的generator。

asyncGeneratorStep干了什么

1、try-catch去捕獲generator執(zhí)行過程中的錯(cuò)誤。如果有報(bào)錯(cuò)，async函數(shù)直接是reject狀態(tài)。

2、判斷info中的done值，是否為true，為true就代表迭代器已經(jīng)執(zhí)行完畢了，可以將value值resolve出去。反之，則繼續(xù)調(diào)用_next將值傳遞到下一個(gè)去。

這里我唯一沒有看明白的是`_throw`，這個(gè)看代碼像是執(zhí)行不到的。promise.resolve狀態(tài)值應(yīng)該是fulfilled。看懂的
可以在評論中和我說一下，感謝。

async/await的優(yōu)勢

每當(dāng)一種新的語法糖出現(xiàn)，必定是彌補(bǔ)上一代解決方案的缺陷。

ex：

promise的出現(xiàn)，是為了去避免callback hell，避免的方式就是鏈?zhǔn)秸{(diào)用。

那async/await為了去解決什么呢？

用async/await去替換掉promise的幾點(diǎn)必要性

同步的方式處理異步

async/await更貼近于同步性的風(fēng)格，而promise則是用then的方式，于async/await相比，代碼會變多，而且async/await和同步函數(shù)差別不大，promise則寫法上還是有差距的。

promise和async/await代碼對比

promise版

function getData() {
    getRes().then((res) => {
        console.log(res);
    })
}

async/await版

const getData = async function() {
    const res = await getRes();
    console.log(res);
}

中間值

用promise的時(shí)候會發(fā)現(xiàn)，多個(gè)promise串行的時(shí)候，后面的promise需要去獲取前面promise的值是非常困難的。而async恰好解決了這個(gè)點(diǎn)。

promise獲取中間值的例子

const morePromise = () => {
	return promiseFun1().then((value1) => {
		return promiseFun2(value1).then((value2) => {
			return promiseFun3(value1, value2).then((res) => {
				console.log(res);
			})
		}) 
	})
}

上面是嵌套版本的，可能根據(jù)不同的需求可以不嵌套的。

const morePromise = () => {
	return promiseFun1().then((value1) => {
		return promiseAll([value1, promiseFun2(value1)])
	}).then(([value1, value2]) => {
		return promiseFun3(value1, value2).then((res) => {
			console.log(res);
		})
	})
}

少了嵌套層級，但是還是不盡如人意。

用async/await優(yōu)化例子

const morePromise = async function() {
	const value1 = await promiseFun1();
	const value2 = await promiseFun2(value1);
	const res = await promiseFun3(value1, valuw2);
	return res;
}

串行的異步流程，必定會有中間值的牽扯，所以async/await的優(yōu)勢就很明顯了。

條件語句的情況

比如，目前有個(gè)需求，你請求完一個(gè)數(shù)據(jù)之后，再去判斷是否還需要請求更多數(shù)據(jù)。用promise去實(shí)現(xiàn)還是會出現(xiàn)嵌套層級。

const a = () => {
    return getResult().then((data) => {
        if(data.hasMore) {
            return getMoreRes(data).then((dataMore) => {
                return dataMore;
            })
        } else {
            return data;
        }
    })
}

但是用async去優(yōu)化這個(gè)例子的話，能使代碼更加優(yōu)美。

async/await優(yōu)化例子

const a = async() => {
    const data = await getResult();
    if(data.hasMore) {
        const dataMore = await getMoreRes(data);
        return dataMore;
    } else {
        return data;
    }
}

async/await的劣勢

上面我們講了幾點(diǎn)async/await的優(yōu)勢所在，但是async/await也不是萬能的。上面清一色的是講串聯(lián)異步的場景。當(dāng)我們變成并聯(lián)異步場景時(shí)。還是需要借助于promise.all來實(shí)現(xiàn)

并聯(lián)異步的場景

const a = async function() {
    const res = await Promise.all[getRes1(), getRes2()];
    return res;
}

async/await的錯(cuò)誤處理

async/await在錯(cuò)誤捕獲方面主要使用的是try-catch。

try-catch

const a = async () => {
    try{
        const res = await Promise.reject(1);
    } catch(err) {
        console.log(err);
    }
}

promise的catch

可以抽離一個(gè)公共函數(shù)來做這件事情。因?yàn)槊總€(gè)promise后面都去做catch的處理，代碼會寫的很冗長。

const a = async function() {
    const res = await Promise.reject(1).catch((err) => {
        console.log(err);
    })
}

// 公共函數(shù)

function errWrap(promise) {
    return promise().then((data) => {
        return [null, data];
    }).catch((err) => {
        return [err, null];
    })
}

以上就是async/await的來龍去脈的詳細(xì)內(nèi)容，更多請關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！