用async/ await來發送異步

時間 2019-11-20

標籤 async await 發送異步欄目 Java 简体版

原文原文鏈接

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

　　先說一下async的用法，它做爲一個關鍵字放到函數前面，用於表示函數是一個異步函數，由於async就是異步的意思，異步函數也就意味着該函數的執行不會阻塞後面代碼的執行。寫一個async 函數html

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

　　語法很簡單，就是在函數前面加上async 關鍵字，來表示它是異步的，那怎麼調用呢？async 函數也是函數，平時咱們怎麼使用函數就怎麼使用它，直接加括號調用就能夠了，爲了表示它沒有阻塞它後面代碼的執行，咱們在async 函數調用以後加一句console.log;前端

async function timeout() {
    return 'hello world'
}
timeout();
console.log('雖然在後面，可是我先執行');

　　打開瀏覽器控制檯，咱們看到了vue

　　async 函數 timeout 調用了，可是沒有任何輸出，它不是應該返回 'hello world', 先不要着急，看一看timeout()執行返回了什麼？把上面的 timeout() 語句改成console.log(timeout())node

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('雖然在後面，可是我先執行');

　　繼續看控制檯ios

　　原來async 函數返回的是一個promise 對象，若是要獲取到promise 返回值，咱們應該用then 方法，繼續修改代碼web

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('雖然在後面，可是我先執行');

　　看控制檯ajax

　　咱們獲取到了"hello world', 同時timeout 的執行也沒有阻塞後面代碼的執行，和咱們剛纔說的一致。express

　　這時，你可能注意到控制檯中的Promise 有一個resolved，這是async 函數內部的實現原理。若是async 函數中有返回一個值 ,當調用該函數時，內部會調用Promise.solve() 方法把它轉化成一個promise 對象做爲返回，但若是timeout 函數內部拋出錯誤呢？那麼就會調用Promise.reject() 返回一個promise 對象，這時修改一下timeout 函數npm

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 調用Promise.resolve() 返回promise 對象。
console.log(timeout(false)); // 調用Promise.reject() 返回promise 對象。

　　控制檯以下：

　　若是函數內部拋出錯誤， promise 對象有一個catch 方法進行捕獲。

timeout(false).catch(err => {
    console.log(err)
})

　　async 關鍵字差很少了，咱們再來考慮await 關鍵字，await是等待的意思，那麼它等待什麼呢，它後面跟着什麼呢？其實它後面能夠聽任何表達式，不過咱們更多的是放一個返回promise 對象的表達式。注意await 關鍵字只能放到async 函數裏面

　　如今寫一個函數，讓它返回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, 咱們能夠看到，寫異步代碼就像寫同步代碼同樣了，再也沒有回調地域了。

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

爲了模擬一下後端接口，咱們新建一個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，整個程序正常運行