小程序异步请求
写小程序的时候有一个功能场景：依次上传列表中的文件，然后将网络地址返回，再将这些文件的网络链接上传到服务器。大概是下面这个过程
1
2
3
4
| filelist[file1, file2, file3, file4];
upload file in filelist，
urlList ["http://file1url", "http://file2url", "http://file3url", "file4url"]
upload urlList
|
但是一直调试不对，因为在调试的时候，上传链接的时候，上传的urlList是一个空数组，但是在控制台输出urllist确是正常的。
debug两小时以后终于发现端倪
小程序的wx.request() 方法是异步请求。所以在uoload filelist的时候，导致还没有上传完成就取执行后面的upload urllist。这个时候urllist当然为空。
问题代码如下
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
| list:["file1","file2"];
urlList:[];
for (var i = 0; i < list.length;i++){
wx.request({
url: http_config.getUserDetail,
data: list[file1];
success: (res) => {
console.log("file success");
urlList.push(res.url);
},
fail:()=>{
console.log("file fail")
}
})
}
上一个请求异步请求，还没有完成就已经执行到这里了
所以 urllist为[] 空
wx.request({
url: http_config.getUserDetail,
data: urlList;
success: (res) => {
console.log("url success");
urlList.push(res.url);
},
fail:()=>{
console.log("url fail")
}
})
|
一番查询之后，网上说用 promise
代码如下
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
|
getImgUrl:function(url){
return new Promise(function (resolve, reject){
weRequest.uploadFile({
这里请求
success(e) {
console.log("我在请求成功内!");
resolve(e.url)
},
fail(e){
reject("上传图片失败");
}
})
})
},
function(e){}
for (var i = 0; i < list.length; i++) {
this.getImgUrl(list[i])
.then((res) => {
console.log("我是请求成功 then")
}).catch((res) => {
console.log("我请求失败 catch")
})
}
wx.request({
在这里请求
})
}
|
运行结果，，依然错误，
感觉promise 是一个较无用的封装，因为，在整个request里面，他仍然是异步的，只是在请求体内，then 和catch 一定是在请求完成后执行。
其实这和request请求完成后success（）和fail（），compelete（） 回填方法是一样的。只是封装成为then，catch，看上去稍微好一点罢了。所以。在请求的时候，还是乖乖用回调方法好了。
Comments