用 async/await 來(lái)處理異步
昨天看了一篇vue的教程，作者用async/ await來(lái)發(fā)送異步請(qǐng)求急鳄，從服務(wù)端獲取數(shù)據(jù)唯竹，代碼很簡(jiǎn)潔值依，同時(shí)async/await 已經(jīng)被標(biāo)準(zhǔn)化，是時(shí)候?qū)W習(xí)一下了窥浪。
先說(shuō)一下async的用法祖很，它作為一個(gè)關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個(gè)異步函數(shù)漾脂，因?yàn)閍sync就是異步的意思假颇， 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行。 寫一個(gè)async 函數(shù)
<pre style="margin: 0px; padding: 0px;">async function timeout() {
return 'hello world';
}</pre>
語(yǔ)法很簡(jiǎn)單骨稿，就是在函數(shù)前面加上async 關(guān)鍵字笨鸡，來(lái)表示它是異步的，那怎么調(diào)用呢啊终？async 函數(shù)也是函數(shù)镜豹，平時(shí)我們?cè)趺词褂煤瘮?shù)就怎么使用它，直接加括號(hào)調(diào)用就可以了蓝牲，為了表示它沒(méi)有阻塞它后面代碼的執(zhí)行趟脂，我們?cè)赼sync 函數(shù)調(diào)用之后加一句console.log;
<pre style="margin: 0px; padding: 0px;">async function timeout() {
return 'hello world'
}
timeout();
console.log('雖然在后面，但是我先執(zhí)行');</pre>
打開(kāi)瀏覽器控制臺(tái)例衍，我們看到了
async 函數(shù) timeout 調(diào)用了昔期，但是沒(méi)有任何輸出，它不是應(yīng)該返回 'hello world', 先不要著急佛玄， 看一看timeout()執(zhí)行返回了什么硼一？ 把上面的 timeout() 語(yǔ)句改為console.log(timeout())
<pre style="margin: 0px; padding: 0px;">async function timeout() {
return 'hello world'
}
console.log(timeout());
console.log('雖然在后面，但是我先執(zhí)行');</pre>
繼續(xù)看控制臺(tái)
原來(lái)async 函數(shù)返回的是一個(gè)promise 對(duì)象梦抢，如果要獲取到promise 返回值般贼，我們應(yīng)該用then 方法， 繼續(xù)修改代碼
<pre style="margin: 0px; padding: 0px;">async function timeout() {
return 'hello world'
}
timeout().then(result => {
console.log(result);
})
console.log('雖然在后面，但是我先執(zhí)行');</pre>
看控制臺(tái)
我們獲取到了"hello world', 同時(shí)timeout 的執(zhí)行也沒(méi)有阻塞后面代碼的執(zhí)行哼蛆，和 我們剛才說(shuō)的一致蕊梧。
這時(shí)，你可能注意到控制臺(tái)中的Promise 有一個(gè)resolved腮介，這是async 函數(shù)內(nèi)部的實(shí)現(xiàn)原理肥矢。如果async 函數(shù)中有返回一個(gè)值 ,當(dāng)調(diào)用該函數(shù)時(shí)，內(nèi)部會(huì)調(diào)用Promise.solve() 方法把它轉(zhuǎn)化成一個(gè)promise 對(duì)象作為返回叠洗，但如果timeout 函數(shù)內(nèi)部拋出錯(cuò)誤呢甘改？ 那么就會(huì)調(diào)用Promise.reject() 返回一個(gè)promise 對(duì)象， 這時(shí)修改一下timeout 函數(shù)
<pre style="margin: 0px; padding: 0px;">async function timeout(flag) {
if (flag) {
return 'hello world'
} else {
throw 'my god, failure'
}
}
console.log(timeout(true)) // 調(diào)用Promise.resolve() 返回promise 對(duì)象灭抑。
console.log(timeout(false)); // 調(diào)用Promise.reject() 返回promise 對(duì)象十艾。</pre>
控制臺(tái)如下：
如果函數(shù)內(nèi)部拋出錯(cuò)誤， promise 對(duì)象有一個(gè)catch 方法進(jìn)行捕獲名挥。
<pre style="margin: 0px; padding: 0px;">timeout(false).catch(err => {
console.log(err)
})</pre>
async 關(guān)鍵字差不多了疟羹，我們?cè)賮?lái)考慮await 關(guān)鍵字，await是等待的意思禀倔，那么它等待什么呢榄融，它后面跟著什么呢？其實(shí)它后面可以放任何表達(dá)式救湖，不過(guò)我們更多的是放一個(gè)返回promise 對(duì)象的表達(dá)式愧杯。注意await 關(guān)鍵字只能放到async 函數(shù)里面
現(xiàn)在寫一個(gè)函數(shù)，讓它返回promise 對(duì)象鞋既，該函數(shù)的作用是2s 之后讓數(shù)值乘以2
<pre style="margin: 0px; padding: 0px;">// 2s 之后返回雙倍的值
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
} )
}</pre>
現(xiàn)在再寫一個(gè)async 函數(shù)力九，從而可以使用await 關(guān)鍵字， await 后面放置的就是返回promise對(duì)象的一個(gè)表達(dá)式邑闺，所以它后面可以寫上 doubleAfter2seconds 函數(shù)的調(diào)用
<pre style="margin: 0px; padding: 0px;">async function testResult() {
let result = await doubleAfter2seconds(30);
console.log(result);
}</pre>
現(xiàn)在調(diào)用testResult 函數(shù)
<pre style="margin: 0px; padding: 0px;">testResult();</pre>
打開(kāi)控制臺(tái)跌前，2s 之后，輸出了60.
現(xiàn)在我們看看代碼的執(zhí)行過(guò)程陡舅，調(diào)用testResult 函數(shù)抵乓，它里面遇到了await, await 表示等一下，代碼就暫停到這里靶衍，不再向下執(zhí)行了灾炭，它等什么呢？等后面的promise對(duì)象執(zhí)行完畢颅眶，然后拿到promise resolve 的值并進(jìn)行返回蜈出，返回值拿到之后，它繼續(xù)向下執(zhí)行涛酗。具體到 我們的代碼, 遇到await 之后铡原，代碼就暫停執(zhí)行了偷厦， 等待doubleAfter2seconds(30) 執(zhí)行完畢，doubleAfter2seconds(30) 返回的promise 開(kāi)始執(zhí)行燕刻，2秒 之后沪哺，promise resolve 了， 并返回了值為60酌儒， 這時(shí)await 才拿到返回值60， 然后賦值給result枯途， 暫停結(jié)束忌怎，代碼才開(kāi)始繼續(xù)執(zhí)行，執(zhí)行 console.log語(yǔ)句酪夷。
就這一個(gè)函數(shù)榴啸，我們可能看不出async/await 的作用，如果我們要計(jì)算3個(gè)數(shù)的值晚岭，然后把得到的值進(jìn)行輸出呢鸥印？
<pre style="margin: 0px; padding: 0px;">async function testResult() {
let first = await doubleAfter2seconds(30);
let second = await doubleAfter2seconds(50);
let third = await doubleAfter2seconds(30);
console.log(first + second + third);
}</pre>
6秒后，控制臺(tái)輸出220, 我們可以看到坦报，寫異步代碼就像寫同步代碼一樣了库说，再也沒(méi)有回調(diào)地域了。
再寫一個(gè)真實(shí)的例子片择，我原來(lái)做過(guò)一個(gè)小功能潜的，話費(fèi)充值，當(dāng)用戶輸入電話號(hào)碼后字管，先查找這個(gè)電話號(hào)碼所在的省和市啰挪，然后再根據(jù)省和市，找到可能充值的面值嘲叔，進(jìn)行展示亡呵。
為了模擬一下后端接口，我們新建一個(gè)node 項(xiàng)目硫戈。 新建一個(gè)文件夾 async, 然后npm init -y 新建package.json文件锰什，npm install express --save 安裝后端依賴，再新建server.js 文件作為服務(wù)端代碼掏愁， public文件夾作為靜態(tài)文件的放置位置歇由， 在public 文件夾里面放index.html 文件， 整個(gè)目錄如下
server.js 文件如下果港，建立最簡(jiǎn)單的web 服務(wù)器
<pre style="margin: 0px; padding: 0px;">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');
})</pre>
再寫index.html 文件，我在這里用了vue構(gòu)建頁(yè)面辛掠，用axios 發(fā)送ajax請(qǐng)求谢谦， 為了簡(jiǎn)單释牺，用cdn 引入它們。 html部分很簡(jiǎn)單回挽，一個(gè)輸入框没咙，讓用戶輸入手機(jī)號(hào)，一個(gè)充值金額的展示區(qū)域千劈， js部分祭刚，按照vue 的要求搭建了模版
<pre style="margin: 0px; padding: 0px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Async/await</title>
<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="請(qǐng)輸入電話號(hào)碼" 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></pre>
為了得到用戶輸入的手機(jī)號(hào)，給input 輸入框添加v-model指令墙牌，綁定phoneNum變量涡驮。展示區(qū)域則是 綁定到faceList 數(shù)組，v-for 指令進(jìn)行展示喜滨， 這時(shí)命令行nodemon server 啟動(dòng)服務(wù)器捉捅，如果你沒(méi)有安裝nodemon， 可以npm install -g nodemon 安裝它虽风。啟動(dòng)成功后棒口，在瀏覽器中輸入 http://localhost:3000, 可以看到頁(yè)面如下， 展示正確
現(xiàn)在我們來(lái)動(dòng)態(tài)獲取充值面值辜膝。當(dāng)點(diǎn)擊確定按鈕時(shí)无牵， 我們首先要根據(jù)手機(jī)號(hào)得到省和市，所以寫一個(gè)方法來(lái)發(fā)送請(qǐng)求獲取省和市内舟，方法命名為getLocation, 接受一個(gè)參數(shù)phoneNum , 后臺(tái)接口名為phoneLocation合敦，當(dāng)獲取到城市位置以后，我們?cè)侔l(fā)送請(qǐng)求獲取充值面值验游，所以還要再寫一個(gè)方法getFaceList, 它接受兩個(gè)參數(shù), province 和city, 后臺(tái)接口為faceList充岛，在methods 下面添加這兩個(gè)方法getLocation, getFaceList
<pre style="margin: 0px; padding: 0px;"> methods: {
//獲取到城市信息
getLocation(phoneNum) {
return axios.post('phoneLocation', {
phoneNum
})
},
// 獲取面值
getFaceList(province, city) {
return axios.post('/faceList', {
province,
city
})
},
// 點(diǎn)擊確定按鈕時(shí)，獲取面值列表
getFaceResult () {
}
}</pre>
現(xiàn)在再把兩個(gè)后臺(tái)接口寫好耕蝉，為了演示崔梗，寫的非常簡(jiǎn)單，沒(méi)有進(jìn)行任何的驗(yàn)證垒在，只是返回前端所需要的數(shù)據(jù)蒜魄。Express 寫這種簡(jiǎn)單的接口還是非常方便的，在app.use 和app.listen 之間添加如下代碼
<pre style="margin: 0px; padding: 0px;">// 電話號(hào)碼返回省和市场躯，為了模擬延遲谈为，使用了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);
})</pre>
最后是前端頁(yè)面中的click 事件的getFaceResult, 由于axios 返回的是promise 對(duì)象，我們使用then 的鏈?zhǔn)綄懛ㄌ吖兀日{(diào)用getLocation方法伞鲫，在其then方法中獲取省和市，然后再在里面調(diào)用getFaceList签舞，再在getFaceList 的then方法獲取面值列表秕脓，
<pre style="margin: 0px; padding: 0px;"> // 點(diǎn)擊確定按鈕時(shí)柒瓣，獲取面值列表
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)
})
}</pre>
現(xiàn)在點(diǎn)擊確定按鈕，可以看到頁(yè)面中輸出了 從后臺(tái)返回的面值列表吠架。這時(shí)你看到了then 的鏈?zhǔn)綄懛ㄜ狡叮幸稽c(diǎn)回調(diào)地域的感覺(jué)。現(xiàn)在我們?cè)谟衋sync/ await 來(lái)改造一下傍药。
首先把 getFaceResult 轉(zhuǎn)化成一個(gè)async 函數(shù)磺平，就是在其前面加async， 因?yàn)樗恼{(diào)用方法和普通函數(shù)的調(diào)用方法是一致拐辽，所以沒(méi)有什么問(wèn)題褪秀。然后就把 getLocation 和
getFaceList 放到await 后面，等待執(zhí)行薛训， getFaceResult 函數(shù)修改如下
<pre style="margin: 0px; padding: 0px;"> // 點(diǎn)擊確定按鈕時(shí)，獲取面值列表
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;
}
}
}</pre>
現(xiàn)在代碼的書寫方式仑氛，就像寫同步代碼一樣乙埃，沒(méi)有回調(diào)的感覺(jué)，非常舒服锯岖。
現(xiàn)在就還差一點(diǎn)需要說(shuō)明介袜，那就是怎么處理異常，如果請(qǐng)求發(fā)生異常出吹，怎么處理遇伞？ 它用的是try/catch 來(lái)捕獲異常，把a(bǔ)wait 放到 try 中進(jìn)行執(zhí)行捶牢，如有異常鸠珠，就使用catch 進(jìn)行處理。
<pre style="margin: 0px; padding: 0px;"> 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);
}
}</pre>
現(xiàn)在把服務(wù)器停掉秋麸，可以看到控制臺(tái)中輸出net Erorr渐排，整個(gè)程序正常運(yùn)行。
