小程序關(guān)于請求同步的總結(jié)
在JavaScript中,提供了一些異步特性,因為同步操作會對程序的執(zhí)行進(jìn)行阻塞處理。比如在瀏覽器頁面程序中,如果一段同步的代碼需要執(zhí)行很長時間(比如一個很大的循環(huán)操作),則頁面會產(chǎn)生卡死的現(xiàn)象。
異步為程序提供了性能和體驗上的益處,比如可以將代碼放到setTimeout()中執(zhí)行;或者在網(wǎng)頁中,我們使用Ajax的方式向服務(wù)器端做異步數(shù)據(jù)請求。這些異步的代碼不會阻塞當(dāng)前的界面主進(jìn)程,界面還是可以靈活的進(jìn)行操作,等到異步代碼執(zhí)行完成,再做相應(yīng)的處理。
舉一個例子:在小程序中,我們獲取到后臺的數(shù)據(jù)使用時間往往是不定的,這個時候:即使你在前面寫的代碼,也可能會在后面執(zhí)行。
function getAccountInfo(callback, errorCallback) {
wx.request({
url: '/accounts/12345',
success: function (res) {
console("1") },
fail: function (res) {
//...
errorCallback(data);
}
});
console.log("2")
}
也就是存在2輸出在1前面的可能。這種策略提升頁面加載速度。能很好的提高用戶體驗感。
但是請看下面的情景:
小程序是提倡不獲取用戶信息就能使用的,但是在特定的情況下我們必須要拿到用戶的一些數(shù)據(jù),比如名稱,圖像鏈接等等。在這種情況下,我們首先獲取用戶的code,根據(jù)code去后臺獲取用戶的openid或者unionid。拿到這些數(shù)據(jù)之后我們才能確定用戶的身份,然后再去發(fā)新的請求(這些請求往往是需要用戶身份憑證的,比如Token)。
上面的敘述中,我們發(fā)了三次請求,第一次獲取code,第二次獲取openID或unionid,第三次根據(jù)身份信息執(zhí)行新的請求。我們都知道JS中的請求都是異步執(zhí)行的,有可能微信服務(wù)端的code還沒返回,用戶已經(jīng)去執(zhí)行一些需要權(quán)限的操作,這就會導(dǎo)致請求失敗。那么小程序該如何解決這種問題呢?這里提供三種方案以供參考:
1.服務(wù)端一次請求全部處理。(使用范圍太小)
2.客戶端在請求成功的回調(diào)中,再次發(fā)送請求。(可用,但是代碼會很冗長且不容易維護(hù))
3.使用Promise
方案一中:比如用戶留言功能,我們拿到code和留言內(nèi)容后全部發(fā)給服務(wù)端,服務(wù)端開啟一個新的線程去處理這些業(yè)務(wù)邏輯,主線程直接返回用戶留言成功的提示(這里不考慮新線程執(zhí)行失敗的情況)。
方案二和方案三功能上是相同的,但是代碼的展示上可能方案三更加好一些??聪旅娴拇a(其中postReq和getReq是自己封裝的請求方法):
var http = require('request.js')
function userLogin(name, image, gender, content, artilceId){
//獲取code
var promise = new Promise(function(resolve,reject){
wx.login({
success: res => {
resolve(res.code);
}
})
})
//獲取用戶身份憑證
var pm2 = promise.then(function(res){
return new Promise(function (resolve, reject){
http.postReq("user/getUserInfo", { "code": res, "type": 1, "name": name, "image": image, "gender": gender }, function (res) {
// console.log(res)
if (res.data == "") {
wx.showModal({
title: '提示',
content: '授權(quán)失敗,請重試',
})
return;
}
resolve(res);
})
})
},function(res){
})
//發(fā)表評論
pm2.then(function(res){
// console.log(res.data+":"+content)
http.postReq("user/comment", { "content": content, "openId": res.data, "artilceId": artilceId},function(res){
// console.log(res)
if(res.data ){
wx.getStorage({
key: 'showInfo',
success: function(res) {
console.log(res.data )
if(res.data != false){
wx.showModal({
title: '提示',
content: '為了維護(hù)每天學(xué)Java的學(xué)習(xí)氛圍,我們已發(fā)郵件提醒管理員對評論進(jìn)行審核,通過后即可展示您的評論。',
})
}
},fail:function(res){
wx.setStorage({
key: 'showInfo',
data: false,
})
wx.showModal({
title: '提示',
content: '為了維護(hù)每天學(xué)Java的學(xué)習(xí)氛圍,我們已發(fā)郵件提醒管理員對評論進(jìn)行審核,通過后即可展示您的評論。',
})
}
})
}
})
},
function(res){
})
}
module.exports = {
userLogin: userLogin
}
這里使用的就是Promise?對于Promise如何使用我們稍后再說,初學(xué)階段我們可能會這樣保證同步:
app.postReq("/homework/getHomeWorkLike",{"name":name},function(res){
app.postReq("/homework/getHomeWorkLike",{"name":name},function(res){
app.postReq("/homework/getHomeWorkLike",{"name":name},function(res){
}
})
}
})
}
})
在每次返回成功的回調(diào)中執(zhí)行新的請求,但是當(dāng)我們處理的業(yè)務(wù)邏輯過多時候,就會顯得很難看。因為不直觀,所以不方便我們排查一些錯誤。所以推薦大家使用Promise。
Promise :
Promise 是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實現(xiàn),ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn),統(tǒng)一了用法,原生提供了Promise對象。
所謂Promise,簡單說就是一個容器,里面保存著某個未來才會結(jié)束的事件(通常是一個異步操作)的結(jié)果。從語法上說,Promise 是一個對象,從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API,各種異步操作都可以用同樣的方法進(jìn)行處理。
Promise對象有以下兩個特點。
(1)對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作,有三種狀態(tài):pending(進(jìn)行中)、fulfilled(已成功)和rejected(已失敗)。只有異步操作的結(jié)果,可以決定當(dāng)前是哪一種狀態(tài),任何其他操作都無法改變這個狀態(tài)。這也是Promise這個名字的由來,它的英語意思就是“承諾”,表示其他手段無法改變。
(2)一旦狀態(tài)改變,就不會再變,任何時候都可以得到這個結(jié)果。Promise對象的狀態(tài)改變,只有兩種可能:從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected。只要這兩種情況發(fā)生,狀態(tài)就凝固了,不會再變了,會一直保持這個結(jié)果,這時就稱為 resolved(已定型)。如果改變已經(jīng)發(fā)生了,你再對Promise對象添加回調(diào)函數(shù),也會立即得到這個結(jié)果。這與事件(Event)完全不同,事件的特點是,如果你錯過了它,再去監(jiān)聽,是得不到結(jié)果的。
注意,為了行文方便,本章后面的resolved統(tǒng)一只指fulfilled狀態(tài),不包含rejected狀態(tài)。
有了Promise對象,就可以將異步操作以同步操作的流程表達(dá)出來,避免了層層嵌套的回調(diào)函數(shù)。此外,Promise對象提供統(tǒng)一的接口,使得控制異步操作更加容易。
Promise也有一些缺點。首先,無法取消Promise,一旦新建它就會立即執(zhí)行,無法中途取消。其次,如果不設(shè)置回調(diào)函數(shù),Promise內(nèi)部拋出的錯誤,不會反應(yīng)到外部。第三,當(dāng)處于pending狀態(tài)時,無法得知目前進(jìn)展到哪一個階段(剛剛開始還是即將完成)。
如果某些事件不斷地反復(fù)發(fā)生,一般來說,使用 Stream 模式是比部署Promise更好的選擇。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序使用scroll-view標(biāo)簽實現(xiàn)自動滑動到底部功能的實例代碼
本文通過實例代碼給大家介紹了微信小程序使用scroll-view標(biāo)簽實現(xiàn)自動滑動到底部功能,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2018-11-11
JavaScript function 的 length 屬性使用介紹
函數(shù)的 length 得到的是形參個數(shù),如果函數(shù)內(nèi)部是通過arguments 調(diào)用參數(shù),而沒有實際定義參數(shù)的話, length 只會的得到02014-09-09
JavaScript中windows.open()、windows.close()方法詳解
這篇文章主要介紹了JavaScript中windows.open()、windows.close()方法詳解 的相關(guān)資料,需要的朋友可以參考下2016-07-07
js獲取RadioButtonList的Value/Text及選中值等信息實現(xiàn)代碼
RadioButtonList的Value,Text及選中值等信息想必有很多的朋友都想獲取到,接下來將為你介紹下如何使用js獲取,代碼很詳細(xì),感興趣的你可以參考下,或許對你有所幫助2013-03-03
JavaScript Drum Kit 指南(純 JS 模擬敲鼓效果)
這篇文章主要介紹了JavaScript Drum Kit 指南,也就是純 JS 模擬敲鼓效果實現(xiàn)代碼,需要的朋友可以參考下2017-07-07

