摘要:異步帶來的問題小程序的網(wǎng)絡(luò)請求是異步的我們無法通過來將網(wǎng)絡(luò)請求結(jié)果返回出來使用。省略其他屬性接業(yè)務(wù)邏輯代碼例如這個(gè)微信的網(wǎng)絡(luò)請求,我們可以通過和的回調(diào)函數(shù)來讀取的值從而完成依賴結(jié)果的業(yè)務(wù)邏輯。
業(yè)務(wù)邏輯
最近開發(fā)一個(gè)便簽小程序的時(shí)候,有這樣一個(gè)需求:用戶可以在寫便簽的時(shí)候添加一個(gè)或多個(gè)圖片。
對于這個(gè)需求,我們用戶按下保存鍵時(shí),內(nèi)部具體的實(shí)現(xiàn)上是這樣的邏輯:
首先檢測用戶是否傳入了圖片,如果存儲(chǔ)本地圖片地址的數(shù)組長度>=1,則將圖片數(shù)組放入上傳圖片的函數(shù)。
由于小程序網(wǎng)絡(luò)請求大小限制,我們只能采取循環(huán)上傳單文件,然后收集每次請求的結(jié)果--圖片在服務(wù)器的地址,最后將結(jié)果放在一個(gè)數(shù)組中供后續(xù)的操作使用。
當(dāng)圖片上傳函數(shù)全部執(zhí)行完畢后,將數(shù)組中的圖片數(shù)組取出來,賦值到日記對象中,再將整個(gè)日記對象提交到服務(wù)器。
服務(wù)器返回保存成功或失敗。
思路其實(shí)非常清晰簡單,但是在代碼實(shí)現(xiàn)上卻翻了大跟頭。
異步帶來的問題小程序的網(wǎng)絡(luò)請求是異步的:我們無法通過return來將網(wǎng)絡(luò)請求結(jié)果返回出來使用。
wx.request({ //...省略其他屬性 success: function (res) { }, fail: function (res) { } })
例如在微信中發(fā)送網(wǎng)絡(luò)請求,我們只能使用微信提供的方法wx.xxx,其中請求的結(jié)果保存在res中,而res無法直接return得到。
解決:res雖然無法直接獲取,但是我們能通過將需要使用到這個(gè)請求結(jié)果的業(yè)務(wù)邏輯代碼放入這個(gè)網(wǎng)絡(luò)請求的回調(diào)函數(shù)中直接讀取網(wǎng)絡(luò)請求結(jié)果,也就是一切都需要通過回調(diào)來解決。
wx.request({ //...省略其他屬性 success: function (res) { console.log(res); //接業(yè)務(wù)邏輯代碼 }, fail: function (res) { console.log(res); } })
例如這個(gè)微信的網(wǎng)絡(luò)請求,我們可以通過success和fail的回調(diào)函數(shù)來讀取res的值從而完成依賴res結(jié)果的業(yè)務(wù)邏輯。
回調(diào)地獄雖然解決了結(jié)果獲取的問題,但是又產(chǎn)生了另一個(gè)問題,當(dāng)多個(gè)請求中有明確的先后順序時(shí),回調(diào)會(huì)嵌套的很厲害,造成回調(diào)地獄,代碼可讀性和可維護(hù)性都會(huì)很差。
例如對于一個(gè)日記頁面,需要先請求到頁面的數(shù)據(jù)(里面包含了圖片數(shù)據(jù)和其他數(shù)據(jù)的地址),再根據(jù)頁面數(shù)據(jù)去請求圖片數(shù)據(jù)后再請求音頻數(shù)據(jù)。例如以下代碼:
//請求頁面整體數(shù)據(jù) wx.request({ //...省略其他屬性 success: function (res) {//成功 //請求圖片數(shù)據(jù) wx.request({ success: function (res) {//成功 //請求音頻數(shù)據(jù) wx.request({ success: function (res) {//成功 }, fail: function (res) {//失敗 console.log("請求失敗:"+res); } }) }, fail: function (res) {//失敗 console.log("請求失敗:"+res); } }) }, fail: function (res) {//失敗 console.log("請求失敗:"+res); } })
如何優(yōu)化?幸運(yùn)的是,在es6里面我們可以用promise去優(yōu)化我們的回調(diào),用then代替回調(diào),首先將網(wǎng)絡(luò)請求封裝成一個(gè)Promise:
// 后臺(tái)post請求 function postRequest(posturl, postdata) { return new Promise((resolve, reject) => { wx.request({ //省略其他屬性 success: function (res) { console.log("at post request: 請求成功") resolve(res.data)//設(shè)置promise成功標(biāo)志 }, fail: function (res) { console.log("at post request: 請求失敗") reject(res.data)//設(shè)置promise失敗標(biāo)志 } }) }); }
這樣封裝以后,我們的網(wǎng)絡(luò)請求會(huì)在success和fail后回調(diào)resolve,這樣可以告訴promise,“hey,我完成我的工作了,你可以進(jìn)行你的then操作了”,這樣就可以用then來簡化嵌套邏輯。使用promise來完成上面那個(gè)問題的請求將會(huì)是這樣的:
postRequest(posturl,postdata) .then(function(res){ //業(yè)務(wù)邏輯 //調(diào)用下一個(gè)請求 return postRequest(next_posturl,next_postdata); }) .then(function(res){ //業(yè)務(wù)邏輯 //調(diào)用下一個(gè)請求 return postRequest(next_next_posturl,next_next_postdata); }) .then(function(res){ //業(yè)務(wù)邏輯 });
是不是簡潔的多~
一個(gè)看似簡單的需求我們的有一個(gè)很簡單的需求是需要對一組數(shù)量不定的圖片做分別上傳(因?yàn)槲⑿畔拗扑詿o法做多上傳),并且在上傳完成以后需要獲取到所有的返回結(jié)果。
那么用我們前面的回調(diào)函數(shù)+then的話,很自然的想到這樣的寫法
postRequest(posturl,postdata) .then(function(res){ //獲取返回res //上傳下一個(gè)圖片 return postRequest(next_posturl,next_postdata); }) .then(function(res){ //獲取返回res //上傳下一個(gè)圖片 return postRequest(next_next_posturl,next_next_postdata); }) .then(function(res){ //獲取返回res });
這樣看起來很簡單明了,但是我的圖片數(shù)量是不定的,怎么動(dòng)態(tài)的構(gòu)建.then.then.then這樣的鏈?zhǔn)秸{(diào)用呢?經(jīng)過我的研究后發(fā)現(xiàn)可以通過一個(gè)輔助的promise鏈去完成主鏈的鏈?zhǔn)綐?gòu)建。
//多文件上傳 function jabingp_upLoad(uploadurl, files) { return new Promise((resolve, reject) => { //初始化promise鏈 var mergedAjax = Promise.resolve(); var response = []; // 循環(huán)上傳 // 這里一定要使用let來為沒一次循環(huán)構(gòu)建一個(gè)塊級作用域 // 使用var則需要配合立即執(zhí)行函數(shù) for (let i = 0; i < files.length; i++) { mergedAjax = mergedAjax.then(() => { return jabingp_upLoadSingle(uploadurl, files[i]).then((res) => { response.push(res); }); }); } //當(dāng)前面循環(huán)中所有的then執(zhí)行完畢時(shí)會(huì)執(zhí)行這個(gè)then mergedAjax.then(() => { resolve(response); //設(shè)置這個(gè)函數(shù)的promise對象為完成狀態(tài)并放入數(shù)據(jù) }); }); }
通過這個(gè)函數(shù),就完成了多個(gè)請求依次執(zhí)行并收集結(jié)果的效果。這個(gè)函數(shù)的重點(diǎn)在于利用另外一個(gè)已經(jīng)處于完成狀態(tài)的promise,不斷的迭代自身,在每次迭代的then內(nèi)部通過return來完成輔助鏈到業(yè)務(wù)鏈的切換。
2019-04-27 更新使用await/async更加優(yōu)雅地處理異步吧!
在es7標(biāo)準(zhǔn)中,引入了await和async這對兄弟,它們可以讓我們的異步代碼看起來和同步代碼一樣。讓我們來看看await和async都能做什么吧。
await可以等待一個(gè)promise運(yùn)行到完成狀態(tài)并且獲取結(jié)果,或者等待一個(gè)async修飾的函數(shù)運(yùn)行完成并獲取結(jié)果,但是使用await的時(shí)候,必須在async函數(shù)體內(nèi)部。比如我有這樣一個(gè)網(wǎng)絡(luò)請求:
function postRequest(posturl, postdata) { return new Promise((resolve, reject) => { wx.request({ //省略其他屬性 success: function (res) { console.log("at post request: 請求成功") resolve(res.data)//設(shè)置promise成功標(biāo)志 }, fail: function (res) { console.log("at post request: 請求失敗") reject(res.data)//設(shè)置promise失敗標(biāo)志 } }) }); }
那么如果不使用await,我就需要這樣取得請求結(jié)果
function test(){ postRequest(xxx,xxx).then(function(res){ // 這里面可以讀取請求結(jié)果res了 console.log(res); }); } test();
可以看到,這樣的代碼不太符合常規(guī)邏輯,我們希望函數(shù)作用是返回?cái)?shù)據(jù),這樣更清晰明了,有了await,我們的愿望就可以實(shí)現(xiàn)了。
async function test(){ let res = await postRequest(xxx,xxx); // 下面就可以正常寫對res的讀取了 console.log(res); } test();
注意我給函數(shù)加上了async,有了async和await,我們就可以像同步代碼一樣使用異步請求了~
那么上面那個(gè)通過復(fù)雜的構(gòu)建鏈完成的需求,通過await實(shí)現(xiàn)將會(huì)變得非常簡單易懂。
async function jabingp_upLoad(uploadurl, files) { let response = []; // 循環(huán)依次等待上傳結(jié)果 for (let i = 0; i < files.length; i++) { let res = await jabingp_upLoadSingle(uploadurl, files[i]); // 結(jié)果放入數(shù)組 response.push(res); } // 返回結(jié)果 return response ; }
代碼一下子變得簡潔易懂了,注意調(diào)用的時(shí)候也同樣需要在一個(gè)async函數(shù)內(nèi)部執(zhí)行await。
async function test(){ let response = await jabingp_upLoad(xxx,xxx); console.log(response ); } test();
是不是非常簡單呢,趕緊在你的異步請求中使用async和await吧~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/104095.html
摘要:打開一個(gè)網(wǎng)頁,看到服務(wù)器返回給客戶端瀏覽器的各種文件類型圖片構(gòu)建瀏覽器會(huì)遵守一套步驟將文件轉(zhuǎn)換為樹。因?yàn)闉g覽器有渲染線程與引擎線程,為了防止渲染出現(xiàn)不可預(yù)期的結(jié)果,這兩個(gè)線程是互斥的關(guān)系。 1. 瀏覽器架構(gòu) 用戶界面 主進(jìn)程 內(nèi)核 渲染引擎 JS 引擎 執(zhí)行棧 事件觸發(fā)線程 消息隊(duì)列 微任務(wù) 宏任務(wù) 網(wǎng)絡(luò)異步線程 定時(shí)器線程 2. 從輸入 url 到頁面展示...
摘要:是什么在介紹的概念之前,我們需要簡單回顧一下前面源碼閱讀系列文章六中講過的和的概念以及它們和語句的關(guān)系。的任務(wù)就是實(shí)現(xiàn)請求,執(zhí)行所有涉及到的請求,并依次返回結(jié)果。構(gòu)造出了所有之后,下一步就是執(zhí)行這些了。 上篇文章 中,我們介紹了數(shù)據(jù)讀寫過程中 tikv-client 需要解決的幾個(gè)具體問題,本文將繼續(xù)介紹 tikv-client 里的兩個(gè)主要的模塊——負(fù)責(zé)處理分布式計(jì)算的 copIte...
閱讀 1295·2021-10-08 10:04
閱讀 1922·2021-09-04 16:40
閱讀 2536·2019-08-30 13:21
閱讀 2280·2019-08-29 15:10
閱讀 2848·2019-08-29 12:35
閱讀 1189·2019-08-26 17:41
閱讀 3062·2019-08-26 17:03
閱讀 1136·2019-08-26 12:01