微信小程序的wx.request方法是異步的距淫,并且沒有像ajax一樣有個async的設置參數(shù)去設置同步執(zhí)行粗仓。
但是我這兒有個類似這樣的需求:
var postDataArr = ['aaa','bbb','ccc'];
var getEndData = [];
for(var i = 0;i<postDataArr .length;i++){
return new Promise(function (resolve, reject) {
wx.request(
......
success:function(res){
getEndData.push(res);
}
)
})
}
return getEndData;//得到處理數(shù)據(jù)
wx.request作為異步請求方法雏吭,顯然我們拿到的getEndData依然是個空狡耻。
我的解決方式是用promise.all
promise的概念
promise的作用簡而言之就是Promise的它的多重鏈式調(diào)用草娜,可以避免層層嵌套回調(diào)挑胸。假設我們在第一次ajax請求后,還要用它返回的結(jié)果再次請求呢宰闰?promise就非常有用了茬贵。
function sendRequest(url, param) {
return new Promise(function (resolve, reject) {
request(url, param, resolve, reject);
});
}
sendRequest('test1.html', '').then(function(data1) {
console.log('第一次請求成功, 這是返回的數(shù)據(jù):', data1);
return sendRequest('test2.html', data1);
}).then(function(data2) {
console.log('第二次請求成功, 這是返回的數(shù)據(jù):', data2);
return sendRequest('test3.html', data2);
}).then(function(data3) {
console.log('第三次請求成功, 這是返回的數(shù)據(jù):', data3);
}).catch(function(error) {
//用catch捕捉前面的錯誤
console.log('sorry, 請求失敗了, 這是失敗信息:', error);
});
那我所請求的循環(huán)和這個有所不同,我不知道要then多少次移袍。
promise.all是怎么實現(xiàn)的呢解藻?
Promise.all(iterable)方法返回一個 Promise
實例,此實例在 iterable
參數(shù)內(nèi)所有的 promise
都“完成(resolved)”或參數(shù)中不包含 promise
時回調(diào)完成(resolve)葡盗;如果參數(shù)中 promise
有一個失斆蟆(rejected),此實例回調(diào)失斆俟弧(reject)胶背,失敗原因的是第一個失敗 promise
的結(jié)果。
var promise1 = Promise.resolve(3);
var promise2 = 42;
var promise3 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then(function(values) {
console.log(values);
});
以下是我在實際項目引用中的代碼:
var PromiseAllArr = [];//*********************用來存多個Promise
for (var k = 0; k < detail_postData.initData.length; k++) {
var v = detail_postData.initData[k];
var data_ = {
tran_no: v.tran_no,
info_id: v.infoid
};
PromiseAllArr.push(
new Promise(function (resolve, reject) {
wx.request({
url: common.BASE_URL + 'XXXXX',
data: data_,
method: 'post',
dataType: 'json',
header: {
'access_token': AUTH_TOKEN,
'user_key': USER_KEY
},
success: function (getinfo) {
//如果返回數(shù)據(jù)是正確的
if (getinfo.data.code == '1') {
return resolve(getinfo);
} else {
//如果返回數(shù)據(jù)是錯誤的
return reject(getinfo.data.msg);
}
},
fail: function (error) {
return error;
},
complete: function (complete) {
return complete;
}
})
})
)
//*********************Promise存好了喘先,現(xiàn)在來用
Promise.all(PromiseAllArr).then(function (values) {
console.log(values);
}).catch(reason => {
console.log(reason)
});
當PromiseAllArr中的Promise請求錯誤钳吟,就會返回第一個報錯的Promise請求中的reject,返回到catch函數(shù)里.
當PromiseAllArr中的Promise全部請求成功窘拯,則會返回到then函數(shù)中红且,返回的是由各Promise請求成功返回的數(shù)組。
網(wǎng)上建議使用async-wait解決涤姊,
它的解決方法
它的解決原理
但是我用這個比較容易報錯暇番,還需要裝換es6到es5