promise了解过很多次了,但是都是单次调用,没遇到过并发异步的情况,这次刚好遇到了多重异步时间,正好用promise来处理一下,感受一下promise的魅力!
小程序上传图片到服务器之前只能用wx.upLoadFil方法进行上传,这个方法用的比较少所以一般不会去进行封装,就导致用起来会比较繁琐,而且在开发者工具上,这个方法请求时竟然看不到传输的参数!这个坑也是踩了好久!
好消息是微信小程序终于提供可以操作文件的api了,这样我们就获得了把用户上传的临时路径转化为base64格式的图片进而直接通过wx.request传输到服务器,就可以成功避开传输文件的坑了. 话不多说,上代码
let fileSystemManager = wx.getFileSystemManager();//使用微信提供的文件管理器.这里直接let一个保存起来,之后就不用多次调用了
// let一个存储多个promise对象的容器
let promiseArr = [];
//this.imgList是用户选择上传的图片的临时路径组成的数组
this.imgList.forEach(el => {
//将每一项添加至promiseArr
promiseArr.push(
new Promise(function(resolve, reject) {
fileSystemManager.readFile({
filePath: el, //选择图片返回的相对路径
encoding: "base64", //编码格式
success: res => {`
let src = "data:image/png;base64," + res.data;
resolve(src);
}
});
})
);
});
//敲黑板划重点,使用promise.all来优雅的处理多个异步事件
Promise.all(promiseArr).then(imgarr => {
console.log(imgarr)
//...执行发送请求操作
});
其实wx给提供了一个fileSystemManager.readFile的同步版本,但是我在使用时报了个错误,没有找到原因,所以还是采用了异步的方式,这也顺便实战了一下promise.all毕竟之前没感受到它的好处. 最后,小白第一次在掘进发帖,希望大佬们多多指正!
刚才微信群里经过大佬提醒,发现这个例子有可能会失败的情况,而且如果传输多个文件,只有一个失败了,也会走catch, 我们还应该对失败的情况做一个处理,失败的情况根据需求不同来做不同的处理.感谢这位大佬斧正!
Promise.all(promiseArr).then(imgarr => {
console.log(imgarr)
//...执行发送请求操作
}).catch(err=>{
wx.showToast(JSON.stringify(err))
})
