【轉】用 async/await 來處理非同步

来源:https://www.cnblogs.com/PeunZhang/archive/2019/10/26/11743609.html
-Advertisement-
Play Games

原文地址:https://www.cnblogs.com/SamWeb/p/8417940.html 昨天看了一篇vue的教程,作者用async/ await來發送非同步請求,從服務端獲取數據,代碼很簡潔,同時async/await 已經被標準化,也是需要學習一下了。 先說一下async的用法,它作為 ...


原文地址:https://www.cnblogs.com/SamWeb/p/8417940.html  

昨天看了一篇vue的教程,作者用async/ await來發送非同步請求,從服務端獲取數據,代碼很簡潔,同時async/await 已經被標準化,也是需要學習一下了。

  先說一下async的用法,它作為一個關鍵字放到函數前面,

async function timeout() {
  return 'hello world';
}

   只有一個作用, 它的調用會返回一個promise 對象。調用一下看看就知道了,怎麼調用?async 函數也是函數,所以它的調用和普通函數的調用沒有什麼區別,直接加括弧調用就可以了,為了看結果,console.log 一下

async function timeout() {
    return 'hello world'
}
console.log(timeout());

  看一下控制台

  async函數(timeout)的調用,確實返回promise 對象,並且Promise 還有status和value,如果async 函數中有返回值 ,當調用該函數時,內部會調用Promise.solve() 方法把它轉化成一個promise 對象作為返回, 但如果timeout 函數內部拋出錯誤呢?

async function timeout() {
    throw new Error('rejected');
}
console.log(timeout());

  就會調用Promise.reject() 返回一個promise 對象,

  那麼要想獲取到async 函數的執行結果,就要調用promise的then 或catch 來給它註冊回調函數,

複製代碼
async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
複製代碼

  如果async 函數執行完,返回的promise 沒有註冊回調函數,比如函數內部做了一次for 迴圈,你會發現函數的調用,就是執行了函數體,和普通函數沒有區別,唯一的區別就是函數執行完會返回一個promise 對象。

複製代碼
async function timeout() {
    for (let index = 0; index < 3; index++) {
        console.log('async '+ index);
    }
}
console.log(timeout());
console.log('outer')
複製代碼

  async 關鍵字差不多了,最重要的就是async函數的執行會返回一個promise 對象,並且把內部的值進行promise的封裝。如果promise對象通過then或catch方法又註冊了回調函數,async函數執行完以後,註冊的回調函數就會放到非同步隊列中,等待執行。如果只是async,  和promise 差不多,但有了await就不一樣了, await 關鍵字只能放到async 函數裡面,await是等待的意思,那麼它等待什麼呢,它後面跟著什麼呢?其實它後面可以放任何表達式,不過我們更多的是放一個返回promise 對象的表達式,它等待的是promise 對象的執行完畢,並返回結果

  現在寫一個函數,讓它返回promise 對象,該函數的作用是2s 之後讓數值乘以2

複製代碼
// 2s 之後返回雙倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}
複製代碼

  現在再寫一個async 函數,從而可以使用await 關鍵字, await 後面放置的就是返回promise對象的一個表達式,所以它後面可以寫上 doubleAfter2seconds 函數的調用

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}

  現在調用testResult 函數

testResult();

  打開控制台,2s 之後,輸出了60. 

  現在看看代碼的執行過程,調用testResult 函數,它裡面遇到了await, await 表示等待,代碼就暫停到這裡,不再向下執行了,它等待後面的promise對象執行完畢,然後拿到promise resolve 的值併進行返回,返回值拿到之後,它繼續向下執行。具體到 我們的代碼, 遇到await 之後,代碼就暫停執行了, 等待doubleAfter2seconds(30) 執行完畢,doubleAfter2seconds(30) 返回的promise 開始執行,2秒 之後,promise resolve 了, 並返回了值為60, 這時await 才拿到返回值60, 然後賦值給result, 暫停結束,代碼繼續執行,執行 console.log語句。

  就這一個函數,我們可能看不出async/await 的作用,如果我們要計算3個數的值,然後把得到的值進行輸出呢?

複製代碼
async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}
複製代碼

  6秒後,控制台輸出220, 我們可以看到,寫非同步代碼就像寫同步代碼一樣了,再也沒有回調地域了。

  這裡強調一下等待,當js引擎在等待promise resolve 的時候,它並沒有真正的暫停工作,它可以處理其它的一些事情,如果我們在testResult函數的調用後面,console.log 一下,你發現 後面console.log的代碼先執行。

複製代碼
async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

testResult();
console.log('先執行');
複製代碼

  再寫一個真實的例子,我原來做過一個小功能,話費充值,當用戶輸入電話號碼後,先查找這個電話號碼所在的省和市,然後再根據省和市,找到可能充值的面值,進行展示。

為了模擬一下後端介面,我們新建一個node 項目。 新建一個文件夾 async, 然後npm init -y 新建package.json文件,npm install express --save 安裝後端依賴,再新建server.js 文件作為服務端代碼, public文件夾作為靜態文件的放置位置, 在public 文件夾裡面放index.html 文件, 整個目錄如下

 

  server.js 文件如下,建立最簡單的web 伺服器

複製代碼
const express = require('express');
const app = express();// express.static 提供靜態文件,就是html, css, js 文件
app.use(express.static('public'));

app.listen(3000, () => {
    console.log('server start');
})
複製代碼

  再寫index.html 文件,我在這裡用了vue構建頁面,用axios 發送ajax請求, 為了簡單,用cdn 引入它們。 html部分很簡單,一個輸入框,讓用戶輸入手機號,一個充值金額的展示區域, js部分,按照vue 的要求搭建了模版

複製代碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Async/await</title>
    <!-- CDN 引入vue 和 axios -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">

        <!-- 輸入框區域 -->
        <div style="height:50px">
            <input type="text" placeholder="請輸入電話號碼" v-model="phoneNum">
            <button @click="getFaceResult">確定</button>
        </div>

        <!-- 充值面值 顯示區域 -->
        <div>
            充值面值:
            <span v-for="item in faceList" :key='item'>
                {{item}}
            </span>
        </div>
    </div>

    <!-- js 代碼區域 -->
    <script>
        new Vue({
            el: '#app',
            data: {
                phoneNum: '12345',
                faceList: ["20元", "30元", "50元"]
            },
            methods: {
                getFaceResult() {

                }
            }
        })
    </script>
</body>
</html>
複製代碼

  為了得到用戶輸入的手機號,給input 輸入框添加v-model指令,綁定phoneNum變數。展示區域則是 綁定到faceList 數組,v-for 指令進行展示, 這時命令行nodemon server 啟動伺服器,如果你沒有安裝nodemon, 可以npm install -g nodemon 安裝它。啟動成功後,在瀏覽器中輸入 http://localhost:3000, 可以看到頁面如下, 展示正確

  現在我們來動態獲取充值面值。當點擊確定按鈕時, 我們首先要根據手機號得到省和市,所以寫一個方法來發送請求獲取省和市,方法命名為getLocation, 接受一個參數phoneNum , 後臺介面名為phoneLocation,當獲取到城市位置以後,我們再發送請求獲取充值面值,所以還要再寫一個方法getFaceList, 它接受兩個參數, province 和city, 後臺介面為faceList,在methods 下麵添加這兩個方法getLocation, getFaceList

複製代碼
        methods: {
            //獲取到城市信息
            getLocation(phoneNum) {
               return axios.post('phoneLocation', {
                    phoneNum
                })
            },
            // 獲取面值
            getFaceList(province, city) {
                return axios.post('/faceList', {
                    province,
                    city
                })
            },
            // 點擊確定按鈕時,獲取面值列表
            getFaceResult () {
               
            }
        }
複製代碼

  現在再把兩個後臺介面寫好,為了演示,寫的非常簡單,沒有進行任何的驗證,只是返回前端所需要的數據。Express 寫這種簡單的介面還是非常方便的,在app.use 和app.listen 之間添加如下代碼

複製代碼
// 電話號碼返回省和市,為了模擬延遲,使用了setTimeout
app.post('/phoneLocation', (req, res) => {
    setTimeout(() => {
        res.json({
            success: true,
            obj: {
                province: '廣東',
                city: '深圳'
            }
        })
    }, 1000);
})

// 返回面值列表
app.post('/faceList', (req, res) => {
    setTimeout(() => {
        res.json(
            {
                success: true,
                obj:['20元', '30元', '50元']
            }
            
        )
    }, 1000);
})
複製代碼

  最後是前端頁面中的click 事件的getFaceResult, 由於axios 返回的是promise 對象,我們使用then 的鏈式寫法,先調用getLocation方法,在其then方法中獲取省和市,然後再在裡面調用getFaceList,再在getFaceList 的then方法獲取面值列表,

複製代碼
            // 點擊確定按鈕時,獲取面值列表
            getFaceResult () {
                this.getLocation(this.phoneNum)
                    .then(res => {
                        if (res.status === 200 && res.data.success) {
                            let province = res.data.obj.province;
                            let city = res.data.obj.city;

                            this.getFaceList(province, city)
                                .then(res => {
                                    if(res.status === 200 && res.data.success) {
                                        this.faceList = res.data.obj
                                    }
                                })
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }
複製代碼

  現在點擊確定按鈕,可以看到頁面中輸出了 從後臺返回的面值列表。這時你看到了then 的鏈式寫法,有一點回調地域的感覺。現在我們在有async/ await 來改造一下。

首先把 getFaceResult 轉化成一個async 函數,就是在其前面加async, 因為它的調用方法和普通函數的調用方法是一致,所以沒有什麼問題。然後就把 getLocation 和

getFaceList 放到await 後面,等待執行, getFaceResult  函數修改如下 複製代碼
            // 點擊確定按鈕時,獲取面值列表
            async getFaceResult () {
                let location = await this.getLocation(this.phoneNum);
                if (location.data.success) {
                    let province = location.data.obj.province;
                    let city = location.data.obj.city;
                    let result = await this.getFaceList(province, city);
                    if (result.data.success) {
                        this.faceList = result.data.obj;
                    }
                }
            }
複製代碼

  現在代碼的書寫方式,就像寫同步代碼一樣,沒有回調的感覺,非常舒服。

  現在就還差一點需要說明,那就是怎麼處理異常,如果請求發生異常,怎麼處理? 它用的是try/catch 來捕獲異常,把await 放到 try 中進行執行,如有異常,就使用catch 進行處理。

複製代碼
            async getFaceResult () {
                try {
                    let location = await this.getLocation(this.phoneNum);
                    if (location.data.success) {
                        let province = location.data.obj.province;
                        let city = location.data.obj.city;
                        let result = await this.getFaceList(province, city);
                        if (result.data.success) {
                            this.faceList = result.data.obj;
                        }
                    }
                } catch(err) {
                    console.log(err);
                }
            }
複製代碼

  現在把伺服器停掉,可以看到控制臺中輸出net Erorr,整個程式正常運行。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 大四已經接近一半了,下學期就要準備找工作實習了。為了自己能找到一份比較滿意的實習,今天開始要刷一下題目。今天就刷 MySQL 語言。以下就是我今天刷的題目。大家也可以去 leetcode 註冊一個賬號來刷一下題目。裡面有很多的演算法題。 第一題:編寫一個 SQL 查詢,滿足條件:無論 person 是 ...
  • 1.普通查詢 2.排序查詢 order by asc | desc 3.區間查詢 between | and 4.範圍查詢 in | not in 5.模糊查詢 like % | _ (下劃線一次只能匹配任意一個字元) 6.為空查詢 is null | is not null 7.多條件查詢 and ...
  • MySQL中的系統函數sleep,實際應用的場景不多,一般用來做實驗測試,昨天在測試的時候,意外發現sleep函數的一個特殊現象。如果在查詢語句中使用sleep函數,那麼休眠的時間跟返回的記錄有關。如下測試所示: mysql> create table test(id int);Query OK, ... ...
  • 一、在MySQL官網上下載MySQL Community Server(目前推薦5.7版本,8.0版本在安裝的時候遇到的問題比較多) 點擊DOWNLOADS→Community→MySQL Community Server 自行選擇下載,不過推薦最新版的上一版(即5.7版本) 二、解壓文件、增加配置 ...
  • 這兩天剛接觸SQLite 資料庫 還沒有太過於深入的瞭解 , 於是出現了一個問題 : 我在 C#中 ,使用SQLiteHelper 查詢SQLite資料庫數據時,報了這個錯誤: System.FormatException:“該字元串未被識別為有效的 DateTime。” 在網上查詢了一些文章後,我 ...
  • javascript獲取數組最後一個元素,js獲取Array末尾元素 一、JavaScript pop() 方法 pop() 方法用於刪除並返回數組的最後一個元素。 註意: pop() 方法將刪除 arrayObject 的最後一個元素,把數組長度減 1,並且返回它刪除的元素的值。如果數組已經為空, ...
  • html文本格式化標簽 1. 在網頁中,有時需要為文字設置 粗體 、 斜體 或下劃線 效果,這是就需要用到HTML中的文本格式標簽,是文字以特殊的方式顯示 2. 標簽語義:突出重要性,比普通文字更重要 | 語義 | 標簽 | 說明 | | | | | | 加粗 | 或者 | 推薦使用標簽,語義更加強 ...
  • JavaScript Math 對象允許您對數字執行數學任務。 實例 Math.PI; // 返回 3.141592653589793 實例 Math.round() Math.round(x) 的返回值是 x 四捨五入為最接近的整數: 實例 Math.round(6.8); // 返回 7 Mat ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...