如何使用async/await來處理異步
這篇文章將為大家詳細講解有關(guān)如何使用async/await來處理異步，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
西華網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)成立于2013年到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
先說一下async的用法，它作為一個關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個異步函數(shù)，因為async就是異步的意思， 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會阻塞后面代碼的執(zhí)行。 寫一個async 函數(shù)
async function timeout() {
return 'hello world';
}語法很簡單，就是在函數(shù)前面加上async關(guān)鍵字，來表示它是異步的，那怎么調(diào)用呢？async函數(shù)也是函數(shù)，平時我們怎么使用函數(shù)就怎么使用它，直接加括號調(diào)用就可以了，為了表示它沒有阻塞它后面代碼的執(zhí)行，我們在async函數(shù)調(diào)用之后加一句console.log;
async function timeout() {
return 'hello world'
}
timeout();
console.log('雖然在后面，但是我先執(zhí)行');打開瀏覽器控制臺，我們看到了
async函數(shù) timeout 調(diào)用了，但是沒有任何輸出，它不是應該返回 'hello world', 先不要著急，看一看timeout()執(zhí)行返回了什么？把上面的 timeout()語句改為console.log(timeout())
async function timeout() {
return 'hello world'
}
console.log(timeout());
console.log('雖然在后面，但是我先執(zhí)行');繼續(xù)看控制臺
原來async函數(shù)返回的是一個promise對象，如果要獲取到promise返回值，我們應該用then方法，繼續(xù)修改代碼
async function 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ù)
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 對象。控制臺如下：
如果函數(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) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
} )
}現(xiàn)在再寫一個async函數(shù)，從而可以使用await關(guān)鍵字， await后面放置的就是返回promise對象的一個表達式，所以它后面可以寫上doubleAfter2seconds函數(shù)的調(diào)用
async function 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ù)的值，然后把得到的值進行輸出呢？
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,我們可以看到，寫異步代碼就像寫同步代碼一樣了，再也沒有回調(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 >
<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) {
return axios.post('phoneLocation', {
phoneNum
})
},
// 獲取面值
getFaceList(province, city) {
return axios.post('/faceList', {
province,
city
})
},
// 點擊確定按鈕時，獲取面值列表
getFaceResult () {
}
}現(xiàn)在再把兩個后臺接口寫好，為了演示，寫的非常簡單，沒有進行任何的驗證，只是返回前端所需要的數(shù)據(jù)。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 的鏈式寫法，先調(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)地域的感覺?，F(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 = 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)在就還差一點需要說明，那就是怎么處理異常，如果請求發(fā)生異常，怎么處理？它用的是try/catch來捕獲異常，把await放到 try中進行執(zhí)行，如有異常，就使用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);
}
}現(xiàn)在把服務器停掉，可以看到控制臺中輸出net Erorr，整個程序正常運行。
關(guān)于“如何使用async/await來處理異步”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
網(wǎng)站名稱：如何使用async/await來處理異步
網(wǎng)站鏈接：http://m.newbst.com/article24/gsscce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務器托管、商城網(wǎng)站、網(wǎng)站設(shè)計、域名注冊、做網(wǎng)站、面包屑導航
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 不懂代碼也可以進行微信小程序開發(fā)嗎？ 2022-07-16
- 這款收藏小程序，除了不收錢，別的都收 2014-04-27
- App和小程序開發(fā)價格哪個更加實惠？ 2023-01-25
- 微信小程序開發(fā)申請流程 2020-11-13
- 微信電商小程序未來發(fā)展趨勢 2017-03-21
- 上海小程序開發(fā)制作有哪些流程和步驟？ 2020-12-25
- 微信小程序開發(fā)的價格區(qū)分 2023-03-02
- 為什么要做微信小程序定制開發(fā)？ 2014-01-05
- 小程序開發(fā)市場的命脈之關(guān)鍵詞是重中之重 2022-05-07
- 為什么微信小程序開發(fā)越來越火呢 2021-10-09
- 影響微信小程序運營效果的因素是什么？ 2014-05-07
- 企業(yè)網(wǎng)站建設(shè)與小程序建設(shè)的哪個更有優(yōu)勢 2015-12-16