昨天看了一篇vue的教程贮折，作者用async/ await來發(fā)送異步請求锹锰，從服務端獲取數(shù)據(jù)掏导，代碼很簡潔享怀，同時async/await 已經(jīng)被標準化，是時候?qū)W習一下了趟咆。
先說一下async的用法添瓷，它作為一個關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個異步函數(shù)值纱，因為async就是異步的意思鳞贷， 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會阻塞后面代碼的執(zhí)行。 寫一個async 函數(shù)
asyncfunctiontimeout() {
return 'hello world';
}
?語法很簡單虐唠，就是在函數(shù)前面加上async?關(guān)鍵字搀愧，來表示它是異步的，那怎么調(diào)用呢疆偿？async?函數(shù)也是函數(shù)咱筛，平時我們怎么使用函數(shù)就怎么使用它，直接加括號調(diào)用就可以了杆故，為了表示它沒有阻塞它后面代碼的執(zhí)行迅箩，我們在async?函數(shù)調(diào)用之后加一句console.log;
asyncfunction timeout() {
? ? return'hello world'}
timeout();
console.log('雖然在后面，但是我先執(zhí)行');
打開瀏覽器控制臺处铛，我們看到了
async?函數(shù) timeout? 調(diào)用了饲趋，但是沒有任何輸出，它不是應該返回 'hello world',? 先不要著急撤蟆，?看一看timeout()執(zhí)行返回了什么奕塑？?把上面的 timeout()?語句改為console.log(timeout())
asyncfunction timeout() {
? ? return'hello world'}
console.log(timeout());
console.log('雖然在后面，但是我先執(zhí)行');
繼續(xù)看控制臺
原來async?函數(shù)返回的是一個promise?對象家肯，如果要獲取到promise?返回值龄砰，我們應該用then?方法，?繼續(xù)修改代碼
asyncfunction timeout() {
? ? return'hello world'}
timeout().then(result => {
? ? console.log(result);
})
console.log('雖然在后面息楔，但是我先執(zhí)行');
看控制臺
我們獲取到了"hello world',? 同時timeout?的執(zhí)行也沒有阻塞后面代碼的執(zhí)行寝贡，和?我們剛才說的一致。
這時值依，你可能注意到控制臺中的Promise?有一個resolved圃泡，這是async?函數(shù)內(nèi)部的實現(xiàn)原理。如果async?函數(shù)中有返回一個值 ,當調(diào)用該函數(shù)時愿险，內(nèi)部會調(diào)用Promise.solve()?方法把它轉(zhuǎn)化成一個promise?對象作為返回颇蜡，但如果timeout?函數(shù)內(nèi)部拋出錯誤呢价说？ 那么就會調(diào)用Promise.reject()?返回一個promise?對象，?這時修改一下timeout?函數(shù)
asyncfunction timeout(flag) {
? ? if (flag) {
? ? ? ? return'hello world'? ? } else {
? ? ? ? throw'my god, failure'? ? }
}
console.log(timeout(true))// 調(diào)用Promise.resolve() 返回promise 對象风秤。console.log(timeout(false));// 調(diào)用Promise.reject() 返回promise 對象鳖目。
控制臺如下：
如果函數(shù)內(nèi)部拋出錯誤， promise?對象有一個catch?方法進行捕獲缤弦。
timeout(false).catch(err => {
? ? console.log(err)
})
async?關(guān)鍵字差不多了领迈，我們再來考慮await?關(guān)鍵字，await是等待的意思碍沐，那么它等待什么呢狸捅，它后面跟著什么呢？其實它后面可以放任何表達式累提，不過我們更多的是放一個返回promise?對象的表達式尘喝。注意await?關(guān)鍵字只能放到async?函數(shù)里面
現(xiàn)在寫一個函數(shù)，讓它返回promise?對象斋陪，該函數(shù)的作用是2s?之后讓數(shù)值乘以2
// 2s 之后返回雙倍的值
function doubleAfter2seconds(num) {
? ? returnnewPromise((resolve, reject) => {
? ? ? ? setTimeout(() => {
? ? ? ? ? ? resolve(2 * num)
? ? ? ? }, 2000);
? ? } )
}
現(xiàn)在再寫一個async?函數(shù)朽褪，從而可以使用await?關(guān)鍵字， await?后面放置的就是返回promise對象的一個表達式无虚，所以它后面可以寫上?doubleAfter2seconds?函數(shù)的調(diào)用
asyncfunction testResult() {
? ? let result = await doubleAfter2seconds(30);
? ? console.log(result);
}
現(xiàn)在調(diào)用testResult?函數(shù)
testResult();
打開控制臺缔赠，2s?之后，輸出了60.?
現(xiàn)在我們看看代碼的執(zhí)行過程骑科，調(diào)用testResult?函數(shù)橡淑，它里面遇到了await, await?表示等一下，代碼就暫停到這里咆爽，不再向下執(zhí)行了，它等什么呢置森？等后面的promise對象執(zhí)行完畢斗埂，然后拿到promise resolve?的值并進行返回，返回值拿到之后凫海，它繼續(xù)向下執(zhí)行呛凶。具體到?我們的代碼,?遇到await?之后，代碼就暫停執(zhí)行了行贪，?等待doubleAfter2seconds(30) 執(zhí)行完畢漾稀，doubleAfter2seconds(30)?返回的promise?開始執(zhí)行，2秒?之后建瘫，promise resolve?了崭捍，?并返回了值為60，?這時await?才拿到返回值60啰脚，?然后賦值給result殷蛇，?暫停結(jié)束，代碼才開始繼續(xù)執(zhí)行，執(zhí)行 console.log語句粒梦。
就這一個函數(shù)亮航，我們可能看不出async/await?的作用，如果我們要計算3個數(shù)的值匀们，然后把得到的值進行輸出呢缴淋？
asyncfunction testResult() {
? ? let first = await doubleAfter2seconds(30);
? ? let second = await doubleAfter2seconds(50);
? ? let third = await doubleAfter2seconds(30);
? ? console.log(first + second + third);
}
6秒后，控制臺輸出220,?我們可以看到泄朴，寫異步代碼就像寫同步代碼一樣了宴猾，再也沒有回調(diào)地域了。
再寫一個真實的例子叼旋，我原來做過一個小功能仇哆，話費充值，當用戶輸入電話號碼后夫植，先查找這個電話號碼所在的省和市讹剔，然后再根據(jù)省和市，找到可能充值的面值详民，進行展示延欠。
為了模擬一下后端接口，我們新建一個node?項目沈跨。 新建一個文件夾 async,?然后npm init -y?新建package.json文件由捎，npm install express --save?安裝后端依賴，再新建server.js?文件作為服務端代碼饿凛， public文件夾作為靜態(tài)文件的放置位置狞玛，?在public?文件夾里面放index.html?文件，?整個目錄如下
server.js?文件如下涧窒，建立最簡單的web?服務器
const express = require('express');const app = express();// express.static 提供靜態(tài)文件心肪，就是html, css, js 文件app.use(express.static('public'));
app.listen(3000, () => {
? ? console.log('server start');
})
再寫index.html?文件，我在這里用了vue構(gòu)建頁面纠吴，用axios?發(fā)送ajax請求硬鞍，?為了簡單，用cdn?引入它們戴已。 html部分很簡單固该，一個輸入框，讓用戶輸入手機號糖儡，一個充值金額的展示區(qū)域伐坏， 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">
<!-- 輸入框區(qū)域 -->
<div style="height:50px">
????<input type="text" placeholder="請輸入電話號碼" v-model="phoneNum">
????<button @click="getFaceResult">確定</button>
</div>
<!-- 充值面值 顯示區(qū)域 -->
<div>? ? ? ? ? ?
????充值面值：
? ? <span v-for="item in faceList" :key='item'>{{item}}</span>
</div>
</div>
<!-- js 代碼區(qū)域 -->
<script>
new Vue({
? ? ? ? ? ? el: '#app',
? ? ? ? ? ? data: {
? ? ? ? ? ? ? ? phoneNum: '12345',
? ? ? ? ? ? ? ? faceList: ["20元", "30元", "50元"]
? ? ? ? ? ? },
? ? ? ? ? ? methods: {
? ? ? ? ? ? ? ? getFaceResult() {
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
為了得到用戶輸入的手機號休玩，給input?輸入框添加v-model指令著淆，綁定phoneNum變量劫狠。展示區(qū)域則是?綁定到faceList?數(shù)組，v-for?指令進行展示永部，?這時命令行nodemon server?啟動服務器独泞，如果你沒有安裝nodemon，?可以npm install -g nodemon?安裝它苔埋。啟動成功后懦砂，在瀏覽器中輸入 http://localhost:3000,?可以看到頁面如下，?展示正確
現(xiàn)在我們來動態(tài)獲取充值面值组橄。當點擊確定按鈕時荞膘， 我們首先要根據(jù)手機號得到省和市，所以寫一個方法來發(fā)送請求獲取省和市玉工，方法命名為getLocation, 接受一個參數(shù)phoneNum , 后臺接口名為phoneLocation羽资，當獲取到城市位置以后，我們再發(fā)送請求獲取充值面值遵班，所以還要再寫一個方法getFaceList, 它接受兩個參數(shù), province 和city, 后臺接口為faceList屠升，在methods 下面添加這兩個方法getLocation, getFaceList
methods: {
? ? ? ? ? ? //獲取到城市信息? ? ? ? ? ?
????getLocation(phoneNum) {
? ? ? ? ? ? ? returnaxios.post('phoneLocation', {
? ? ? ? ? ? ? ? ? ? phoneNum
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? // 獲取面值? ? ? ? ? ?
????getFaceList(province, city) {
? ? ? ? ? ? ? ? returnaxios.post('/faceList', {
? ? ? ? ? ? ? ? ? ? province,
? ? ? ? ? ? ? ? ? ? city
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? // 點擊確定按鈕時，獲取面值列表? ? ? ? ? ?
????????getFaceResult () {
? ? ? ? ? ? }
? ? ? ? }
現(xiàn)在再把兩個后臺接口寫好狭郑，為了演示腹暖，寫的非常簡單，沒有進行任何的驗證翰萨，只是返回前端所需要的數(shù)據(jù)脏答。Express 寫這種簡單的接口還是非常方便的，在app.use 和app.listen 之間添加如下代碼
// 電話號碼返回省和市亩鬼，為了模擬延遲殖告，使用了
setTimeoutapp.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 的鏈式寫法，先調(diào)用getLocation方法，在其then方法中獲取省和市轩娶，然后再在里面調(diào)用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)
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
現(xiàn)在點擊確定按鈕冶匹，可以看到頁面中輸出了?從后臺返回的面值列表。這時你看到了then?的鏈式寫法咆瘟，有一點回調(diào)地域的感覺〗腊現(xiàn)在我們在有async/ await?來改造一下。
首先把?getFaceResult?轉(zhuǎn)化成一個async?函數(shù)袒餐，就是在其前面加async飞蛹，?因為它的調(diào)用方法和普通函數(shù)的調(diào)用方法是一致谤狡，所以沒有什么問題。然后就把?getLocation?和
getFaceList?放到await?后面卧檐，等待執(zhí)行墓懂， getFaceResult? 函數(shù)修改如下
// 點擊確定按鈕時，獲取面值列表? ? ? ? ? ?
async getFaceResult () {
? ? ? ? ? ? ? ? let location = awaitthis.getLocation(this.phoneNum);
? ? ? ? ? ? ? ? if (location.data.success) {
? ? ? ? ? ? ? ? ? ? let province = location.data.obj.province;
? ? ? ? ? ? ? ? ? ? let city = location.data.obj.city;
? ? ? ? ? ? ? ? ? ? let result = awaitthis.getFaceList(province, city);
? ? ? ? ? ? ? ? ? ? if (result.data.success) {
? ? ? ? ? ? ? ? ? ? ? ? this.faceList = result.data.obj;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
現(xiàn)在代碼的書寫方式霉囚，就像寫同步代碼一樣捕仔，沒有回調(diào)的感覺，非常舒服盈罐。
現(xiàn)在就還差一點需要說明榜跌，那就是怎么處理異常，如果請求發(fā)生異常盅粪，怎么處理钓葫？?它用的是try/catch?來捕獲異常，把await?放到 try?中進行執(zhí)行票顾，如有異常础浮，就使用catch?進行處理。
? ? ? ? ? ? async getFaceResult () {
? ? ? ? ? ? ? ? try {
? ? ? ? ? ? ? ? ? ? let location = awaitthis.getLocation(this.phoneNum);
? ? ? ? ? ? ? ? ? ? if (location.data.success) {
? ? ? ? ? ? ? ? ? ? ? ? let province = location.data.obj.province;
? ? ? ? ? ? ? ? ? ? ? ? let city = location.data.obj.city;
? ? ? ? ? ? ? ? ? ? ? ? let result = awaitthis.getFaceList(province, city);
? ? ? ? ? ? ? ? ? ? ? ? if (result.data.success) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? this.faceList = result.data.obj;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } catch(err) {
? ? ? ? ? ? ? ? ? ? console.log(err);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
現(xiàn)在把服務器停掉库物，可以看到控制臺中輸出net Erorr霸旗，整個程序正常運行。
