20190611-對async和await的一點理解

xiaolinbang 發布于2019-08-23 18:04 / 2234人閱讀

摘要：異步函數是指通過事件循環異步執行的函數，它會通過一個隱式的返回其結果。返回值返回對象的處理結果。當請求必須要請求完成后，才能根據請求的結果，進行是否繼續請求的時候根據所有請求完成后，進行統計請求成功失敗數量等異步操作最后的回調

首先看下這段代碼：

async function submit(){
    console.log("請求開始！")
    
    let data = await fetch("127.0.0.1:8888")
        .then(res => res.json())
        .then(res => {
            console.log("請求成功！")
            return res
        })
        
    console.log("請求結束")；
}

console.log("請求成功了么？")；

執行這這段代碼，你會發現控制板輸出的數據順序

"請求成功了么？"
"請求開始！"
"請求成功！"
"請求結束！"

async 定義

MDN:

async function 聲明用于定義一個返回 AsyncFunction 對象的異步函數。異步函數是指通過事件循環異步執行的函數，它會通過一個隱式的 Promise 返回其結果。但是如果你的代碼使用了異步函數，它的語法和結構會更像是標準的同步函數。

通俗的講，就是「異步」。讓這個fn支持異步繼續，所以首先打印出來的是

"請求成功了么？"

async利用了影藏的promise對象，來控制函數異步進行，所以你在執行async中，console會出來一個promise對象。

同時需要搭配await來阻塞內部異步，來講操作

await 定義

MDN：

await表達式會暫停當前「async function」的執行，等待Pormise處理完成，若Promise正常處理，則回調的resolve函數作為await表達式的值，繼續進行async function。

表達式

一個 Promise 對象或者任何要等待的值。

返回值

返回 Promise 對象的處理結果。如果等待的不是 Promise 對象，則返回該值本身。

所以上面代碼，內部的執行順序是

async function submit(){
    // 開始執行
    console.log("請求開始！")
    
    // 遇到await，等待處理結果
    let data = await fetch("127.0.0.1:8888")
        .then(res => res.json())
        .then(res => {
            // 處理完成，返回處理結果
            console.log("請求成功！")
            return res
        })
    
    // 等待await處理完成后，執行。
    console.log("請求結束")；
}

注意：如果返回值不是Promise，則把該值轉換為已經常處理的Promise，等待處理結構（就是拋出該值）

async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();

應用場景

await可以阻塞主函數，直到后面的Promise對象處理完成，這就很容易的解決了按順控制異步操作。

當B請求必須要A請求完成后，才能根據A請求的結果，進行是否繼續請求B的時候

根據所有請求完成后，進行統計請求成功、失敗數量等

異步操作最后的回調

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

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

【全棧之路】JAVA基礎課程二_數據類型和垃圾回收機制（20190611v1.0）

摘要：，用于調用垃圾收集器，在調用時，垃圾收集器將運行以回收未使用的內存空間。然而調用附帶一個免責聲明，無法保證對垃圾收集器的調用。所以并不能說是完美主動進行了垃圾回收。歡迎進入JAVA基礎課程博客地址：https://blog.csdn.net/houjiyu...本系列文章將主要針對JAVA一些基礎知識點進行講解，為平時歸納所總結，不管是剛接觸JAVA開發菜鳥還是業界資深人士，都希...

big_cat 2019-08-16 18:04 評論0 收藏0
如何正確合理使用 JavaScript async/await ！

摘要：想閱讀更多優質文章請猛戳博客一年百來篇優質文章等著你引入的在的異步編程中是一個極好的改進。可能會產生誤導一些文章將與進行了比較，并聲稱它是下一代異步編程風格，對此作者深表異議。結論引入的關鍵字無疑是對異步編程的改進。 showImg(https://segmentfault.com/img/bVbjFP0?w=800&h=450); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇...

trigkit4 2019-08-23 14:27 評論0 收藏0
深入前端-JavaScript異步編程

摘要：缺點無法取消當處于狀態時，無法得知目前進展到哪一個階段錯誤不能被生成器什么是函數是提供的一種異步編程解決方案，語法行為與傳統函數完全不同函數有多種理解角度。 JavaScript的執行機制在上篇文章中進行了深入的探討，那么既然是一門單線程語言，如何進行良好體驗的異步編程呢回調函數Callbacks 當程序跑起來時，一般情況下，應用程序（application program）會時常通...

2json 2019-08-02 15:37 評論0 收藏0
深入前端-JavaScript異步編程

摘要：缺點無法取消當處于狀態時，無法得知目前進展到哪一個階段錯誤不能被生成器什么是函數是提供的一種異步編程解決方案，語法行為與傳統函數完全不同函數有多種理解角度。 JavaScript的執行機制在上篇文章中進行了深入的探討，那么既然是一門單線程語言，如何進行良好體驗的異步編程呢回調函數Callbacks 當程序跑起來時，一般情況下，應用程序（application program）會時常通...

raise_yang 2019-08-26 10:22 評論0 收藏0