【轉】用 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
更多相關文章
  • Leetcode 之 Mysql（day01）
    大四已經接近一半了，下學期就要準備找工作實習了。為了自己能找到一份比較滿意的實習，今天開始要刷一下題目。今天就刷 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函數的特殊特現象
    MySQL中的系統函數sleep，實際應用的場景不多，一般用來做實驗測試，昨天在測試的時候，意外發現sleep函數的一個特殊現象。如果在查詢語句中使用sleep函數，那麼休眠的時間跟返回的記錄有關。如下測試所示： mysql> create table test(id int);Query OK, ... ...
  • MySQL詳細安裝（windows）
    一、在MySQL官網上下載MySQL Community Server(目前推薦5.7版本，8.0版本在安裝的時候遇到的問題比較多) 點擊DOWNLOADS→Community→MySQL Community Server 自行選擇下載，不過推薦最新版的上一版（即5.7版本） 二、解壓文件、增加配置 ...
  • 關於SQLite資料庫 欄位 DateTime 類型
    這兩天剛接觸SQLite 資料庫 還沒有太過於深入的瞭解 ， 於是出現了一個問題 ： 我在 C#中 ，使用SQLiteHelper 查詢SQLite資料庫數據時，報了這個錯誤： System.FormatException:“該字元串未被識別為有效的 DateTime。” 在網上查詢了一些文章後，我 ...
  • js 獲取數組最後一個元素
    javascript獲取數組最後一個元素，js獲取Array末尾元素 一、JavaScript pop() 方法 pop() 方法用於刪除並返回數組的最後一個元素。 註意： pop() 方法將刪除 arrayObject 的最後一個元素，把數組長度減 1，並且返回它刪除的元素的值。如果數組已經為空， ...
  • HTML常用標簽一
    html文本格式化標簽 1. 在網頁中，有時需要為文字設置 粗體 、 斜體 或下劃線 效果，這是就需要用到HTML中的文本格式標簽，是文字以特殊的方式顯示 2. 標簽語義：突出重要性，比普通文字更重要 | 語義 | 標簽 | 說明 | | | | | | 加粗 | 或者 | 推薦使用標簽，語義更加強 ...
  • 鬆軟科技web課堂:JavaScript Math 對象
    JavaScript Math 對象允許您對數字執行數學任務。 實例 Math.PI; // 返回 3.141592653589793 實例 Math.round() Math.round(x) 的返回值是 x 四捨五入為最接近的整數： 實例 Math.round(6.8); // 返回 7 Mat ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類