今天得到一个需求 让我吧几个视频下载下来,oh my god。这也太简单了吧。 产品忽然又甩了一句:一次最多下载五个,下载完一个之后,等待下载的加入到下载队列。
ohhhhhhhhhh, 这个事情忽然有意思了~
五个下载同时在执行,谁先下载完,把谁剔除。很自然想到了Promise.race()。把谁剔除,把谁加进来,相当于就是给他们一个状态咯,isUploaded。
既然思路已经有了,那我们开始吧~
handleCycleUpload = () => {
// const { imageList } = this.data
const limit = 5 // 限制5个
let list = []
this.data.imageList.forEach(item => {
if (!item.isUploaded && list.length < limit) list.push(item)
}) // 如果当前队列还能加入,而且还有没下载的,就加入到队列中(第一次肯定加入5个了)
console.log('cycle')
const arr = list.map((image, index) => {
return this.fetchUploadImage(image)
}) // 做出一个异步Promise的数组
console.log(arr)
Promise.race(arr).then(value => {
// console.log('race', value)
if (list && (list.length > 0)) {
this.handleCycleUpload() // 下载一个后 ,要去加入另外一个 继续下载了
}
})
const isSuccess = this.checkIsSuccess() // 判断是否下载完成
if (list.length === 0 && isSuccess) {
this.fetchUploadComplete() // 全部现在完成后的操作
}
}
这样一梳理,矮油~,太简单了趴 ~
fetchUploadImage = (image) => {
const formatState = function (res) {
const { code } = res
}
// CH4002
if (!image.p) {
console.log('image param', {
id: this.data.currentFeedback,
// id: this.data.currentFeedback,
lmisTokenId: app.globalData.lmisTokenId,
lmisUserId: app.globalData.lmisTokenId,
path: this.data.imageList[0]['path']
})
image.p = new Promise((resolve, reject) => {
const loadingConf = {}
app.loadingModel.start(loadingConf)
const index = this.data.imageList.indexOf(image) // 获取当前下载中的对象的下标
if (image.isCopy) {
const copy = this.fetchUploadImageByCopy(image)
copy.then(result => {
if (result && result.code === 'S1001') {
// 下载成功的操作
image.isUploaded = true
image.success = true
// const index = this.data.imageList.indexOf(image)
this.data.imageList[index].path = result.data
this.setData({
uploadError: false,
[`imageList[${index}]`]: image
// [`imageList[${index}].path`]: result.data
})
} else {
// 下载失败的操作
image.isUploaded = true
image.success = false
this.setData({
uploadError: true,
[`imageList[${index}]`]: image
})
}
image.p = null
console.log(result)
//do something
resolve(result)
})
} else {
wx.uploadFile({
url: HOST + 'lmis_postsale_wechat/ecs/uploadImageCheck', //仅为示例,非真实的接口地址
filePath: image['path'],
name: 'uploadFile',
formData: {
id: this.data.currentFeedback,
lmisTokenId: app.globalData.lmisTokenId,
lmisUserId: app.globalData.lmisTokenId,
user: app.globalData.lmisTokenId
},
success: (res) => {
let result
if (res.statusCode !== 404) {
result = JSON.parse(res.data)
}
// const result = JSON.parse(res.data)
if (result && result.code === 'S1001') {
image.isUploaded = true
image.success = true
// const index = this.data.imageList.indexOf(image)
this.data.imageList[index].path = result.data
this.setData({
uploadError: false,
[`imageList[${index}]`]: image
// [`imageList[${index}].path`]: result.data
})
} else {
image.isUploaded = true
image.success = false
this.setData({
uploadError: true,
[`imageList[${index}]`]: image
})
console.log('======上传图片异常======')
}
image.p = null
console.log(result)
//do something
resolve(result)
},
fail: (res) => {
console.log(res)
image.isUploaded = true
image.success = false
// image.uploadError = true
image.p = null
this.setData({
uploadError: true,
[`imageList[${index}]`]: image
})
resolve(image)
},
complete (res) {
app.loadingModel.end(loadingConf)
// console.log('comp', res)
}
})
}
})
}
return image.p
}
继续加油,感谢支持我的龙哥