电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

vue中用 async/await 來處理異步操作

瀏覽:45日期:2023-01-04 17:29:02

昨天看了一篇vue的教程,作者用async/ await來發送異步請求,從服務端獲取數據,代碼很簡潔,同時async/await 已經被標準化,也是需要學習一下了。

先說一下async的用法,它作為一個關鍵字放到函數前面,

async function timeout() {return ’hello world’;}

只有一個作用, 它的調用會返回一個promise 對象。調用一下看看就知道了,怎么調用?async 函數也是函數,所以它的調用和普通函數的調用沒有什么區別,直接加括號調用就可以了,為了看結果,console.log 一下

async function timeout() { return ’hello world’}console.log(timeout());

看一下控制臺

vue中用 async/await 來處理異步操作

async函數(timeout)的調用,確實返回promise 對象,并且Promise 還有status和value,如果async 函數中有返回值 ,當調用該函數時,內部會調用Promise.solve() 方法把它轉化成一個promise 對象作為返回, 但如果timeout 函數內部拋出錯誤呢?

async function timeout() { throw new Error(’rejected’);}console.log(timeout());

就會調用Promise.reject() 返回一個promise 對象,

vue中用 async/await 來處理異步操作

那么要想獲取到async 函數的執行結果,就要調用promise的then 或catch 來給它注冊回調函數,

async function timeout() { return ’hello world’}timeout().then(result => { console.log(result);})

如果async 函數執行完,返回的promise 沒有注冊回調函數,比如函數內部做了一次for 循環,你會發現函數的調用,就是執行了函數體,和普通函數沒有區別,唯一的區別就是函數執行完會返回一個promise 對象。

async function timeout() { for (let index = 0; index < 3; index++) { console.log(’async ’+ index); }}console.log(timeout());console.log(’outer’)

async 關鍵字差不多了,最重要的就是async函數的執行會返回一個promise 對象,并且把內部的值進行promise的封裝。如果promise對象通過then或catch方法又注冊了回調函數,async函數執行完以后,注冊的回調函數就會放到異步隊列中,等待執行。如果只是async, 和promise 差不多,但有了await就不一樣了, await 關鍵字只能放到async 函數里面,await是等待的意思,那么它等待什么呢,它后面跟著什么呢?其實它后面可以放任何表達式,不過我們更多的是放一個返回promise 對象的表達式,它等待的是promise 對象的執行完畢,并返回結果

現在寫一個函數,讓它返回promise 對象,該函數的作用是2s 之后讓數值乘以2

// 2s 之后返回雙倍的值function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(2 * num) }, 2000); } )}

現在再寫一個async 函數,從而可以使用await 關鍵字, await 后面放置的就是返回promise對象的一個表達式,所以它后面可以寫上 doubleAfter2seconds 函數的調用

async function testResult() { let result = await doubleAfter2seconds(30); console.log(result);}

現在調用testResult 函數

testResult();

打開控制臺,2s 之后,輸出了60.

現在看看代碼的執行過程,調用testResult 函數,它里面遇到了await, await 表示等待,代碼就暫停到這里,不再向下執行了,它等待后面的promise對象執行完畢,然后拿到promise resolve 的值并進行返回,返回值拿到之后,它繼續向下執行。具體到 我們的代碼, 遇到await 之后,代碼就暫停執行了, 等待doubleAfter2seconds(30) 執行完畢,doubleAfter2seconds(30) 返回的promise 開始執行,2秒 之后,promise resolve 了, 并返回了值為60, 這時await 才拿到返回值60, 然后賦值給result, 暫停結束,代碼繼續執行,執行 console.log語句。

就這一個函數,我們可能看不出async/await 的作用,如果我們要計算3個數的值,然后把得到的值進行輸出呢?

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, 我們可以看到,寫異步代碼就像寫同步代碼一樣了,再也沒有回調地域了。

這里強調一下等待,當js引擎在等待promise resolve 的時候,它并沒有真正的暫停工作,它可以處理其它的一些事情,如果我們在testResult函數的調用后面,console.log 一下,你發現 后面console.log的代碼先執行。

async function testResult() { let first = await doubleAfter2seconds(30); let second = await doubleAfter2seconds(50); let third = await doubleAfter2seconds(30); console.log(first + second + third);}testResult();console.log(’先執行’);

再寫一個真實的例子,我原來做過一個小功能,話費充值,當用戶輸入電話號碼后,先查找這個電話號碼所在的省和市,然后再根據省和市,找到可能充值的面值,進行展示。

為了模擬一下后端接口,我們新建一個node 項目。 新建一個文件夾 async, 然后npm init -y 新建package.json文件,npm install express --save 安裝后端依賴,再新建server.js 文件作為服務端代碼, public文件夾作為靜態文件的放置位置, 在public 文件夾里面放index.html 文件, 整個目錄如下

vue中用 async/await 來處理異步操作

server.js 文件如下,建立最簡單的web 服務器

const express = require(’express’);const app = express();// express.static 提供靜態文件,就是html, css, js 文件app.use(express.static(’public’));app.listen(3000, () => { console.log(’server start’);})

再寫index.html 文件,我在這里用了vue構建頁面,用axios 發送ajax請求, 為了簡單,用cdn 引入它們。 html部分很簡單,一個輸入框,讓用戶輸入手機號,一個充值金額的展示區域, 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'> <!-- 輸入框區域 --> <div style='height:50px'> <input type='text' placeholder='請輸入電話號碼' v-model='phoneNum'> <button @click='getFaceResult'>確定</button> </div> <!-- 充值面值 顯示區域 --> <div> 充值面值: <span v-for='item in faceList' :key=’item’>{{item}} </span> </div> </div> <!-- js 代碼區域 --> <script> new Vue({ el: ’#app’, data: {phoneNum: ’12345’,faceList: ['20元', '30元', '50元'] }, methods: {getFaceResult() {} } }) </script></body></html>

為了得到用戶輸入的手機號,給input 輸入框添加v-model指令,綁定phoneNum變量。展示區域則是 綁定到faceList 數組,v-for 指令進行展示, 這時命令行nodemon server 啟動服務器,如果你沒有安裝nodemon, 可以npm install -g nodemon 安裝它。啟動成功后,在瀏覽器中輸入 http://localhost:3000, 可以看到頁面如下, 展示正確

vue中用 async/await 來處理異步操作

現在我們來動態獲取充值面值。當點擊確定按鈕時, 我們首先要根據手機號得到省和市,所以寫一個方法來發送請求獲取省和市,方法命名為getLocation, 接受一個參數phoneNum , 后臺接口名為phoneLocation,當獲取到城市位置以后,我們再發送請求獲取充值面值,所以還要再寫一個方法getFaceList, 它接受兩個參數, province 和city, 后臺接口為faceList,在methods 下面添加這兩個方法getLocation, getFaceList

methods: { //獲取到城市信息 getLocation(phoneNum) {return axios.post(’phoneLocation’, { phoneNum}) }, // 獲取面值 getFaceList(province, city) {return axios.post(’/faceList’, { province, city}) }, // 點擊確定按鈕時,獲取面值列表 getFaceResult () { } }

現在再把兩個后臺接口寫好,為了演示,寫的非常簡單,沒有進行任何的驗證,只是返回前端所需要的數據。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 的鏈式寫法,先調用getLocation方法,在其then方法中獲取省和市,然后再在里面調用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) }) }

現在點擊確定按鈕,可以看到頁面中輸出了 從后臺返回的面值列表。這時你看到了then 的鏈式寫法,有一點回調地域的感覺。現在我們在有async/ await 來改造一下。

首先把 getFaceResult 轉化成一個async 函數,就是在其前面加async, 因為它的調用方法和普通函數的調用方法是一致,所以沒有什么問題。然后就把 getLocation 和

getFaceList 放到await 后面,等待執行, getFaceResult 函數修改如下

// 點擊確定按鈕時,獲取面值列表 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; }} }

現在代碼的書寫方式,就像寫同步代碼一樣,沒有回調的感覺,非常舒服。

現在就還差一點需要說明,那就是怎么處理異常,如果請求發生異常,怎么處理? 它用的是try/catch 來捕獲異常,把await 放到 try 中進行執行,如有異常,就使用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);} }

現在把服務器停掉,可以看到控制臺中輸出net Erorr,整個程序正常運行。

以上這篇vue中用 async/await 來處理異步操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 泉州陶瓷pc砖_园林景观砖厂家_石英砖地铺石价格 _福建暴风石英砖 | 跨境物流_美国卡派_中大件运输_尾程派送_海外仓一件代发 - 广州环至美供应链平台 | 注浆压力变送器-高温熔体传感器-矿用压力传感器|ZHYQ朝辉 | 【黄页88网】-B2B电子商务平台,b2b平台免费发布信息网 | 双效节能浓缩器-热回流提取浓缩机组-温州市利宏机械 | ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 | 成都热收缩包装机_袖口式膜包机_高速塑封机价格_全自动封切机器_大型套膜机厂家 | 颚式破碎机,圆锥破碎机,制砂机-新乡市德诚机电制造有限公司 | 翰墨AI智能写作助手官网_人工智能问答在线AI写作免费一键生成 | 座椅式升降机_无障碍升降平台_残疾人升降平台-南京明顺机械设备有限公司 | 茶楼装修设计_茶馆室内设计效果图_云臻轩茶楼装饰公司 | 包装机_厂家_价格-山东包装机有限公司 | 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | WTB5光栅尺-JIE WILL磁栅尺-B60数显表-常州中崴机电科技有限公司 | 工业CT-无锡璟能智能仪器有限公司| PC构件-PC预制构件-构件设计-建筑预制构件-PC构件厂-锦萧新材料科技(浙江)股份有限公司 | 衬塑设备,衬四氟设备,衬氟设备-淄博鲲鹏防腐设备有限公司 | 刹车盘机床-刹车盘生产线-龙口亨嘉智能装备| 深圳公司注册-工商注册公司-千百顺代理记账公司 | 滚筒烘干机_转筒烘干机_滚筒干燥机_转筒干燥机_回转烘干机_回转干燥机-设备生产厂家 | 双齿辊破碎机-大型狼牙破碎机视频-对辊破碎机价格/型号图片-金联机械设备生产厂家 | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 扬尘在线监测系统_工地噪声扬尘检测仪_扬尘监测系统_贝塔射线扬尘监测设备「风途物联网科技」 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 刺绳_刀片刺网_刺丝滚笼_不锈钢刺绳生产厂家_安平县浩荣金属丝网制品有限公司-安平县浩荣金属丝网制品有限公司 | 北京开源多邦科技发展有限公司官网 | 空气净化器租赁,空气净化器出租,全国直租_奥司汀净化器租赁 | ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 上海地磅秤|电子地上衡|防爆地磅_上海地磅秤厂家–越衡称重 | 定制异形重型钢格栅板/钢格板_定做踏步板/排水沟盖板_钢格栅板批发厂家-河北圣墨金属制品有限公司 | 行星搅拌机,双行星搅拌机,动力混合机,无锡米克斯行星搅拌机生产厂家 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 交通信号灯生产厂家_红绿灯厂家_电子警察监控杆_标志杆厂家-沃霖电子科技 | 防堵吹扫装置-防堵风压测量装置-电动操作显示器-兴洲仪器 | 亚克隆,RNAi干扰检测,miRNA定量检测-上海基屹生物科技有限公司 | 胜为光纤光缆_光纤跳线_单模尾纤_光纤收发器_ODF光纤配线架厂家直销_北京睿创胜为科技有限公司 - 北京睿创胜为科技有限公司 | 电车线(用于供电给电车的输电线路)-百科 | 球盟会·(中国)官方网站 | 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 5nd音乐网|最新流行歌曲|MP3歌曲免费下载|好听的歌|音乐下载 免费听mp3音乐 | 电梯乘运质量测试仪_电梯安全评估测试仪-武汉懿之刻 |