Promise.all获得的成功结果会返回一个数组,而数组里面的数据顺序和Promise.all接收到的数组顺序是一致的。发送多个请求并根据请求顺序获取和使用数据的场景,使用Promise.all毫无疑问可以解决这个问题。比如小程序需要上传九张图片,且上传顺序和显示顺序为一致。代码如下:
在main.js文件中可封装为(记得要抛出封装的方法uploadImg ):
const uploadImg = (tempFilePaths,url) => {
wx.showLoading({
title: "上传中"
});
return new Promise((presolve, preject) => {
let uploads = []
tempFilePaths.map((item, i) => {
uploads[i] = new Promise((resolve, reject) => {
wx.uploadFile({
url: "xxxxxx", // 仅为示例,非真实的接口地址
filePath: item,
name: "file",
formData: {
userid: wx.getStorageSync("userid") //需要传给接口的参数以formData传过去
},
success(res) {//成功返回
// console.log(res)
resolve(JSON.parse(res.data))
},
fail(err) {//失败返回
console.log(err)
wx.hideLoading()
}
})
})
})
Promise.all(uploads).then(res => {
//图片上传完成
presolve(res)
wx.hideLoading()
}).catch(err => {
preject(err)
wx.hideLoading()
wx.showToast({
title: '上传失败请重试',
icon: 'none'
})
})
})
}
在需要上传图片的js文件中引入main.js:
在wxml中标签image展示图片最好是 wx.chooseImage返回的临时地址(也可以先上传到服务器,再把返回的图片地址展示图片,但是这样上传到服务器返回地址需要很长的时间间隔,用户体验不是很好。)