昨天看了一篇vue的教程，作者用async/ await來發(fā)送異步請(qǐng)求，從服務(wù)端獲取數(shù)據(jù)，代碼很簡潔，同時(shí)async/await 已經(jīng)被標(biāo)準(zhǔn)化，也是需要學(xué)習(xí)一下了。
先說一下async的用法，它作為一個(gè)關(guān)鍵字放到函數(shù)前面，
asyncfunctiontimeout() {
return 'hello world';
}
? 只有一個(gè)作用, 它的調(diào)用會(huì)返回一個(gè)promise?對(duì)象。調(diào)用一下看看就知道了，怎么調(diào)用？async?函數(shù)也是函數(shù)，所以它的調(diào)用和普通函數(shù)的調(diào)用沒有什么區(qū)別，直接加括號(hào)調(diào)用就可以了，為了看結(jié)果，console.log?一下
asyncfunction timeout() {
? ? return'hello world'}
console.log(timeout());
看一下控制臺(tái)
async函數(shù)(timeout)的調(diào)用，確實(shí)返回promise?對(duì)象，并且Promise?還有status和value，如果async?函數(shù)中有返回值 ,當(dāng)調(diào)用該函數(shù)時(shí)，內(nèi)部會(huì)調(diào)用Promise.solve()?方法把它轉(zhuǎn)化成一個(gè)promise?對(duì)象作為返回, 但如果timeout?函數(shù)內(nèi)部拋出錯(cuò)誤呢？
async function timeout() {
? ? thrownewError('rejected');
}
console.log(timeout());
就會(huì)調(diào)用Promise.reject()?返回一個(gè)promise 對(duì)象，
那么要想獲取到async?函數(shù)的執(zhí)行結(jié)果，就要調(diào)用promise的then?或catch?來給它注冊(cè)回調(diào)函數(shù)，
按 Ctrl+C 復(fù)制代碼
按 Ctrl+C 復(fù)制代碼
如果async?函數(shù)執(zhí)行完，返回的promise 沒有注冊(cè)回調(diào)函數(shù)，比如函數(shù)內(nèi)部做了一次for?循環(huán)，你會(huì)發(fā)現(xiàn)函數(shù)的調(diào)用，就是執(zhí)行了函數(shù)體，和普通函數(shù)沒有區(qū)別，唯一的區(qū)別就是函數(shù)執(zhí)行完會(huì)返回一個(gè)promise?對(duì)象。
按 Ctrl+C 復(fù)制代碼
按 Ctrl+C 復(fù)制代碼
async?關(guān)鍵字差不多了，最重要的就是async函數(shù)的執(zhí)行會(huì)返回一個(gè)promise?對(duì)象，并且把內(nèi)部的值進(jìn)行promise的封裝。如果promise對(duì)象通過then或catch方法又注冊(cè)了回調(diào)函數(shù)，async函數(shù)執(zhí)行完以后，注冊(cè)的回調(diào)函數(shù)就會(huì)放到異步隊(duì)列中，等待執(zhí)行。如果只是async,? 和promise?差不多，但有了await就不一樣了， await?關(guān)鍵字只能放到async?函數(shù)里面，await是等待的意思，那么它等待什么呢，它后面跟著什么呢？其實(shí)它后面可以放任何表達(dá)式，不過我們更多的是放一個(gè)返回promise?對(duì)象的表達(dá)式，它等待的是promise?對(duì)象的執(zhí)行完畢，并返回結(jié)果
現(xiàn)在寫一個(gè)函數(shù)，讓它返回promise?對(duì)象，該函數(shù)的作用是2s?之后讓數(shù)值乘以2
// 2s 之后返回雙倍的值function doubleAfter2seconds(num) {
? ? returnnewPromise((resolve, reject) => {
? ? ? ? setTimeout(() => {
? ? ? ? ? ? resolve(2 * num)
? ? ? ? }, 2000);
? ? } )
}
現(xiàn)在再寫一個(gè)async?函數(shù)，從而可以使用await?關(guān)鍵字， await?后面放置的就是返回promise對(duì)象的一個(gè)表達(dá)式，所以它后面可以寫上?doubleAfter2seconds?函數(shù)的調(diào)用
asyncfunction testResult() {
? ? let result = await doubleAfter2seconds(30);
? ? console.log(result);
}
現(xiàn)在調(diào)用testResult?函數(shù)
testResult();
打開控制臺(tái)，2s?之后，輸出了60.?
現(xiàn)在看看代碼的執(zhí)行過程，調(diào)用testResult?函數(shù)，它里面遇到了await, await?表示等待，代碼就暫停到這里，不再向下執(zhí)行了，它等待后面的promise對(duì)象執(zhí)行完畢，然后拿到promise resolve?的值并進(jìn)行返回，返回值拿到之后，它繼續(xù)向下執(zhí)行。具體到?我們的代碼,?遇到await?之后，代碼就暫停執(zhí)行了，?等待doubleAfter2seconds(30) 執(zhí)行完畢，doubleAfter2seconds(30)?返回的promise?開始執(zhí)行，2秒?之后，promise resolve?了，?并返回了值為60，?這時(shí)await?才拿到返回值60，?然后賦值給result，?暫停結(jié)束，代碼繼續(xù)執(zhí)行，執(zhí)行 console.log語句。
就這一個(gè)函數(shù)，我們可能看不出async/await?的作用，如果我們要計(jì)算3個(gè)數(shù)的值，然后把得到的值進(jìn)行輸出呢？
按 Ctrl+C 復(fù)制代碼
按 Ctrl+C 復(fù)制代碼
6秒后，控制臺(tái)輸出220,?我們可以看到，寫異步代碼就像寫同步代碼一樣了，再也沒有回調(diào)地域了。
這里強(qiáng)調(diào)一下等待，當(dāng)js引擎在等待promise resolve?的時(shí)候，它并沒有真正的暫停工作，它可以處理其它的一些事情，如果我們?cè)趖estResult函數(shù)的調(diào)用后面，console.log?一下，你發(fā)現(xiàn) 后面console.log的代碼先執(zhí)行。
async function testResult() {
? ? let first =awaitdoubleAfter2seconds(30);
? ? let second =awaitdoubleAfter2seconds(50);
? ? let third =awaitdoubleAfter2seconds(30);
? ? console.log(first + second + third);
}
testResult();
console.log('先執(zhí)行');
再寫一個(gè)真實(shí)的例子，我原來做過一個(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?文件如下，建立最簡單的web?服務(wù)器
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請(qǐng)求，?為了簡單，用cdn?引入它們。 html部分很簡單，一個(gè)輸入框，讓用戶輸入手機(jī)號(hào)，一個(gè)充值金額的展示區(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="請(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>
為了得到用戶輸入的手機(jī)號(hào)，給input?輸入框添加v-model指令，綁定phoneNum變量。展示區(qū)域則是?綁定到faceList?數(shù)組，v-for?指令進(jìn)行展示，?這時(shí)命令行nodemon server?啟動(dòng)服務(wù)器，如果你沒有安裝nodemon，?可以npm install -g nodemon?安裝它。啟動(dòng)成功后，在瀏覽器中輸入 http://localhost:3000,?可以看到頁面如下，?展示正確
現(xiàn)在我們來動(dòng)態(tài)獲取充值面值。當(dāng)點(diǎn)擊確定按鈕時(shí)， 我們首先要根據(jù)手機(jī)號(hào)得到省和市，所以寫一個(gè)方法來發(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
? ? ? ? methods: {
? ? ? ? ? ? //獲取到城市信息? ? ? ? ? ? getLocation(phoneNum) {
? ? ? ? ? ? ? returnaxios.post('phoneLocation', {
? ? ? ? ? ? ? ? ? ? phoneNum
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? // 獲取面值? ? ? ? ? ? getFaceList(province, city) {
? ? ? ? ? ? ? ? returnaxios.post('/faceList', {
? ? ? ? ? ? ? ? ? ? province,
? ? ? ? ? ? ? ? ? ? city
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? ? ? // 點(diǎn)擊確定按鈕時(shí)，獲取面值列表? ? ? ? ? ? getFaceResult () {
? ? ? ? ? ? }
? ? ? ? }
現(xiàn)在再把兩個(gè)后臺(tái)接口寫好，為了演示，寫的非常簡單，沒有進(jìn)行任何的驗(yàn)證，只是返回前端所需要的數(shù)據(jù)。Express 寫這種簡單的接口還是非常方便的，在app.use 和app.listen 之間添加如下代碼
// 電話號(hào)碼返回省和市，為了模擬延遲，使用了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 對(duì)象，我們使用then 的鏈?zhǔn)綄懛?，先調(diào)用getLocation方法，在其then方法中獲取省和市，然后再在里面調(diào)用getFaceList，再在getFaceList?的then方法獲取面值列表，
// 點(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)
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? }
現(xiàn)在點(diǎn)擊確定按鈕，可以看到頁面中輸出了?從后臺(tái)返回的面值列表。這時(shí)你看到了then?的鏈?zhǔn)綄懛?，有一點(diǎn)回調(diào)地域的感覺?，F(xiàn)在我們?cè)谟衋sync/ await?來改造一下。
首先把?getFaceResult?轉(zhuǎn)化成一個(gè)async?函數(shù)，就是在其前面加async，?因?yàn)樗恼{(diào)用方法和普通函數(shù)的調(diào)用方法是一致，所以沒有什么問題。然后就把?getLocation?和
getFaceList?放到await?后面，等待執(zhí)行， getFaceResult? 函數(shù)修改如下
// 點(diǎn)擊確定按鈕時(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)在就還差一點(diǎn)需要說明，那就是怎么處理異常，如果請(qǐng)求發(fā)生異常，怎么處理？?它用的是try/catch?來捕獲異常，把a(bǔ)wait?放到 try?中進(jìn)行執(zhí)行，如有異常，就使用catch?進(jìn)行處理。
? ? ? ? ? ? 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)在把服務(wù)器停掉，可以看到控制臺(tái)中輸出net Erorr，整個(gè)程序正常運(yùn)行。
轉(zhuǎn)載自異步處理
