之前在初步了解promise的时候，大概只是了解他适用于解决回掉地狱很表面的认识。
当然现在也不是很了解，直接简单地记录一下他的一次使用记录：
此次使用了Promise.all[]来实现 调用后台返回的多来源接口 后进行数据装填
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
贴一下代码-.-:
后台返回的参数里 又一个{key:[];}的格式 数字组里面事api调用的id 需要调用多个id的api
关于request方法的封装 也是封装返回promise对象 以便于then()调用 ps：请忽略appid的形参并没有用到-.-
lhRequest是封装好的axios实例方法就不贴了网上一搜一大堆 vue的一些demo里面也有
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51// 获取多接口数据
function fetchData(arr) {
var promiseArr = []
arr.forEach(function (item, index) {
promiseArr.push(request(item, {apiid: item,bh:item.bh || '',feature:item.feature || ''}, 'post'))
})
if (promiseArr.length > 0) {
lyTool.showloading()
Promise.all(promiseArr).then(function (values) {
console.log('before');
//todo fillTable
var filledData = normalizeData(values)
fillTable(filledData)
});
}
}
function request(apiid, data = {}, method = 'get') {
return new Promise((resolve, reject) => {
_request(apiid, resolve, reject, data, method)
})
}
function _request(apiid, resolve, reject, data = {}, method = 'get') {
lhRequest.service({
url: '/serviceform/action',
method: method,
data: data
}).then(function (msg) {
if (msg.data.code == 200) {
resolve(msg.data)
}
}).catch(function (err) {
console.log(err,'1')
lhRequest.service({
url: '/remote/serviceform/action',
method: method,
data: data
}).then(function (msg){
if (msg.data.code == 200) {
resolve(msg.data)
}
}).catch(function (err) {
console.log(err)
reject();
})
})
}
以上就初步实现了多来源api调用的支持以及等待所有的api调用完成后进行数据装填 同样请求封装的方法也适用于其他情况
总而言之如果能熟练掌握promise的封装和正确使用对项目还是有很大好处 吃饭！