async/await 更好的異步解決方案

Ali_ 發(fā)布于2019-08-22 11:16 / 3405人閱讀

摘要：大家都一直在嘗試使用更好的方案來解決這些問題。這是一個用同步的思維來解決異步問題的方案。當我們發(fā)出了請求，并不會等待響應結果，而是會繼續(xù)執(zhí)行后面的代碼，響應結果的處理在之后的事件循環(huán)中解決。我們可以用一個兩人問答的場景來比喻異步與同步。

在實際開發(fā)中總會遇到許多異步的問題，最常見的場景便是接口請求之后一定要等一段時間才能得到結果，如果遇到多個接口前后依賴，那么問題就變得復雜。大家都一直在嘗試使用更好的方案來解決這些問題。最開始只能利用回調函數，后來開始有人使用Promise的思維來搞定。到ES6中開始支持原生的Promise，引入Generator函數。

直到ES7，有了async/await。

這是一個用同步的思維來解決異步問題的方案。

我想很多人可能還不太分得清同步與異步的區(qū)別。如果你已經徹底了解了事件循環(huán)，那么想必對異步的概念應該非常了解。當我們發(fā)出了請求，并不會等待響應結果，而是會繼續(xù)執(zhí)行后面的代碼，響應結果的處理在之后的事件循環(huán)中解決。那么同步的意思，就是等結果出來之后，代碼才會繼續(xù)往下執(zhí)行。

我們可以用一個兩人問答的場景來比喻異步與同步。A向B問了一個問題之后，不等待B的回答，接著問下一個問題，這是異步。A向B問了一個問題之后，然后就笑呵呵的等著B回答，B回答了之后他才會接著問下一個問題，這是同步。

那么我們先記住這個特點，async/await使用同步的思維，來解決異步的問題。

在繼續(xù)分析它的語法與使用之前，我們先介紹一下如何在我們的開發(fā)環(huán)境中支持該語法。

如果你已經知道如何配置，可跳過

一、如何在自己的開發(fā)環(huán)境中支持async/await語法

這里主要介紹兩種方式。

1. webpack中支持該語法

首先在當前項目中使用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來構建你的代碼，那么它們應該已經支持了該配置。

2. gulp中支持該語法

首先安裝gulp插件

> npm install gulp-babel --save-dev

然后編寫任務

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函數是Generator的一個語法糖。如果你不知道Generator是什么函數也沒有關系，我們只需要知道async函數實際上返回的是一個Promise對象即可。

async function fn() {
    return 30;
}

// 或者
const fn = async () => {
    return 30;
}

在聲明函數時，前面加上關鍵字async，這就是async的用法。當我們用console.log打印出上面聲明的函數fn，我們可以看到如下結果：

console.log(fn());

// result
Promise = {
    __proto__: Promise,
    [[PromiseStatus]]: "resolved",
    [[PromiseValue]]: 30
}

很顯然，fn的運行結果其實就是一個Promise對象。因此我們也可以使用then來處理后續(xù)邏輯。

fn().then(res => {
    console.log(res);  // 30
})

await的含義為等待。意思就是代碼需要等待await后面的函數運行完并且有了返回結果之后，才繼續(xù)執(zhí)行下面的代碼。這正是同步的效果。

但是我們需要注意的是，await關鍵字只能在async函數中使用。并且await后面的函數運行后必須返回一個Promise對象才能實現同步的效果。

當我們使用一個變量去接收await的返回值時，該返回值為Promise中resolve出來的值（也就是PromiseValue）。

// 定義一個返回Promise對象的函數
function fn() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(30);
        }, 1000);
    })
}

// 然后利用async/await來完成代碼
const foo = async () => {
    const t = await fn();
    console.log(t);
    console.log("next code");
}

foo();

// result:
// 30
// next code

運行這個例子我們可以看出，當在async函數中，運行遇到await時，就會等待await后面的函數運行完畢，而不會直接執(zhí)行next code。

如果我們直接使用then方法的話，想要達到同樣的結果，就不得不把后續(xù)的邏輯寫在then方法中。

const foo = () => {
    return fn().then(t => {
        console.log(t);
        console.log("next code");    
    })
}

foo();

很顯然如果使用async/await的話，代碼結構會更加簡潔，邏輯也更加清晰。

異常處理

在Promise中，我們知道是通過catch的方式來捕獲異常。而當我們使用async時，則通過try/catch來捕獲異常。

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();

如果有多個await函數，那么只會返回第一個捕獲到的異常。

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();

實踐

在實踐中我們遇到異步場景最多的就是接口請求，那么這里就以jquery中的$.get為例簡單展示一下如何配合async/await來解決這個場景。

// 先定義接口請求的方法，由于jquery封裝的幾個請求方法都是返回Promise實例，因此可以直接使用await函數實現同步
const getUserInfo = () => $.get("xxxx/api/xx");

const clickHandler = async () => {
    try {
        const resp = await getUserInfo();
        // resp為接口返回內容，接下來利用它來處理對應的邏輯
        console.log(resp);

        // do something
    } catch (e) {
        // 處理錯誤邏輯
    }
}

為了保證邏輯的完整性，在實踐中try/catch必不可少。總之，不處理錯誤邏輯的程序員不是好程序員。

與Promise相比，個人認為async/await有一定的簡潔性，但也并非就比Promise有絕對的優(yōu)勢，因此只能算是提供了另外一種同樣很棒的方式，至于大家學習之后選擇哪種方式來解決自己的問題，我認為這僅僅只是個人的喜好問題。

云服務器 GPU云服務器 async await js異步解決方案數據如何更好的分析 js 異步解決方案

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92095.html

如何更好的編寫async函數

摘要：一個簡單的轉換為的例子我們調用函數返回一個的實例，在實例化的過程中進行文件的讀取，當文件讀取的回調觸發(fā)式，進行狀態(tài)的變更，或者狀態(tài)的變更我們使用來監(jiān)聽，第一個回調為的處理，第二個回調為的處理。 2018年已經到了5月份，node的4.x版本也已經停止了維護我司的某個服務也已經切到了8.x，目前正在做koa2.x的遷移將之前的generator全部替換為async 但是，在替換...

isaced 2019-08-22 17:11 評論0 收藏0
async & await (譯)

摘要：的出現，讓我們可以走出回調地獄，著實驚艷。我已經開始使用里的和關鍵字來簡化的處理。異步任務在這個例子是執(zhí)行之后，一直在執(zhí)行完成才繼續(xù)下一個任務并沒有產生阻塞。最后這個函數處理了返回值并且返回了一個對象。依然很棒，但和使得它可維護性更好。 JavaScript Promises的出現，讓我們可以走出回調地獄，著實驚艷。Promises 允許我們更好的引入和處理異步任務，雖然如此，但引入好...

The question 2019-08-22 11:07 評論0 收藏0
【面試篇】寒冬求職季之你必須要懂的原生JS(中)

摘要：如果你還沒讀過上篇上篇和中篇并無依賴關系，您可以讀過本文之后再閱讀上篇，可戳面試篇寒冬求職季之你必須要懂的原生上小姐姐花了近百個小時才完成這篇文章，篇幅較長，希望大家閱讀時多花點耐心，力求真正的掌握相關知識點。互聯(lián)網寒冬之際，各大公司都縮減了HC，甚至是采取了裁員措施，在這樣的大環(huán)境之下，想要獲得一份更好的工作，必然需要付出更多的努力。一年前，也許你搞清楚閉包，this，原型鏈，就能獲得...

andycall 2019-05-23 16:26 評論0 收藏0
ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
[翻譯] Async/Await 使你的代碼更簡潔

摘要：取而代之，利用事件循環(huán)體系，使用了一種類似語法的工作方式一旦非阻塞的異步操作完成之后，就可以讓開發(fā)者分配的回調函數被觸發(fā)。第一個嘗試嵌套的回調函數下面是使用嵌套的回調函數的實現方法這可能對于任何使用者來說再熟悉不過了。寫在文章前這篇文章翻譯自 ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER,這是一篇寫于2017年八月的文章，并由某專欄提名為17年十大...

hightopo 2019-08-26 11:31 評論0 收藏0