您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)如何使用async/await來處理異步,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
先說一下async的用法,它作為一個(gè)關(guān)鍵字放到函數(shù)前面,用于表示函數(shù)是一個(gè)異步函數(shù),因?yàn)閍sync就是異步的意思, 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行。 寫一個(gè)async 函數(shù)
async function timeout() { return 'hello world'; }
語法很簡單,就是在函數(shù)前面加上async關(guān)鍵字,來表示它是異步的,那怎么調(diào)用呢?async函數(shù)也是函數(shù),平時(shí)我們怎么使用函數(shù)就怎么使用它,直接加括號(hào)調(diào)用就可以了,為了表示它沒有阻塞它后面代碼的執(zhí)行,我們在async函數(shù)調(diào)用之后加一句console.log;
async function timeout() { return 'hello world' } timeout(); console.log('雖然在后面,但是我先執(zhí)行');
打開瀏覽器控制臺(tái),我們看到了
async函數(shù) timeout 調(diào)用了,但是沒有任何輸出,它不是應(yīng)該返回 'hello world', 先不要著急,看一看timeout()執(zhí)行返回了什么?把上面的 timeout()語句改為console.log(timeout())
async function timeout() { return 'hello world' } console.log(timeout()); console.log('雖然在后面,但是我先執(zhí)行');
繼續(xù)看控制臺(tái)
原來async函數(shù)返回的是一個(gè)promise對象,如果要獲取到promise返回值,我們應(yīng)該用then方法,繼續(xù)修改代碼
async function timeout() { return 'hello world' } timeout().then(result => { console.log(result); }) console.log('雖然在后面,但是我先執(zhí)行');
看控制臺(tái)
我們獲取到了"hello world', 同時(shí)timeout的執(zhí)行也沒有阻塞后面代碼的執(zhí)行,和我們剛才說的一致。
這時(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對象作為返回,但如果timeout函數(shù)內(nèi)部拋出錯(cuò)誤呢? 那么就會(huì)調(diào)用Promise.reject()返回一個(gè)promise對象,這時(shí)修改一下timeout函數(shù)
async function 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 對象。
控制臺(tái)如下:
如果函數(shù)內(nèi)部拋出錯(cuò)誤, promise對象有一個(gè)catch方法進(jìn)行捕獲。
timeout(false).catch(err => { console.log(err) })
async關(guān)鍵字差不多了,我們再來考慮await關(guān)鍵字,await是等待的意思,那么它等待什么呢,它后面跟著什么呢?其實(shí)它后面可以放任何表達(dá)式,不過我們更多的是放一個(gè)返回promise對象的表達(dá)式。注意await關(guān)鍵字只能放到async函數(shù)里面
現(xiàn)在寫一個(gè)函數(shù),讓它返回promise對象,該函數(shù)的作用是2s之后讓數(shù)值乘以2
// 2s 之后返回雙倍的值 function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(2 * num) }, 2000); } ) }
現(xiàn)在再寫一個(gè)async函數(shù),從而可以使用await關(guān)鍵字, await后面放置的就是返回promise對象的一個(gè)表達(dá)式,所以它后面可以寫上doubleAfter2seconds函數(shù)的調(diào)用
async function 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對象執(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)行輸出呢?
async function testResult() { let first = await doubleAfter2seconds(30); let second = await doubleAfter2seconds(50); let third = await doubleAfter2seconds(30); console.log(first + second + third); }
6秒后,控制臺(tái)輸出220,我們可以看到,寫異步代碼就像寫同步代碼一樣了,再也沒有回調(diào)地域了。
再寫一個(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請求,為了簡單,用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 > <input type="text" placeholder="請輸入電話號(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ā)送請求獲取省和市,方法命名為getLocation, 接受一個(gè)參數(shù)phoneNum , 后臺(tái)接口名為phoneLocation,當(dāng)獲取到城市位置以后,我們再發(fā)送請求獲取充值面值,所以還要再寫一個(gè)方法getFaceList, 它接受兩個(gè)參數(shù), province 和city, 后臺(tái)接口為faceList,在methods 下面添加這兩個(gè)方法getLocation, getFaceList
methods: { //獲取到城市信息 getLocation(phoneNum) { return axios.post('phoneLocation', { phoneNum }) }, // 獲取面值 getFaceList(province, city) { return axios.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)碼返回省和市,為了模擬延遲,使用了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 的鏈?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)在我們在有async/ 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 = 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; } } }
現(xiàn)在代碼的書寫方式,就像寫同步代碼一樣,沒有回調(diào)的感覺,非常舒服。
現(xiàn)在就還差一點(diǎn)需要說明,那就是怎么處理異常,如果請求發(fā)生異常,怎么處理?它用的是try/catch來捕獲異常,把a(bǔ)wait放到 try中進(jìn)行執(zhí)行,如有異常,就使用catch進(jìn)行處理。
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); } }
現(xiàn)在把服務(wù)器停掉,可以看到控制臺(tái)中輸出net Erorr,整個(gè)程序正常運(yùn)行。
關(guān)于“如何使用async/await來處理異步”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。