Promise 的使用 以及 async , await ,Promise.all 使用方法
代码 是直接拷贝 项目中写的 没有做简化 许多内容 是调用 项目中的数据 可以忽略掉1.代码中 uploadSectionFile()是封装的 上传图片到阿里云的一个公用方法,其结果 用 Promise 返回代码示例:Vue.prototype.uploadSectionFile = function (key, fileList) {return new Pr...
·
代码 是直接拷贝 项目中写的 没有做简化 许多内容 是调用 项目中的数据 可以忽略掉
1.代码中 uploadSectionFile() 是封装的 上传图片到阿里云的一个公用方法,其结果 用 Promise 返回
代码示例:
Vue.prototype.uploadSectionFile = function (key, fileList) {
return new Promise((resolve, reject) => {
const imgfile = fileList.raw
let OSS = require('ali-oss')
let ossConfig = {
region: key.region,
accessKeyId: key.sts.accessKeyId,
accessKeySecret: key.sts.accessKeySecret,
stsToken: key.sts.securityToken,
bucket: key.bucket
}
let client = new OSS(ossConfig)
// your_route是你要上传文件夹的路径,后端同事可以返给你也可以自己拼接,比如你的bucket下有个文件夹叫pc,你要上传到pc这个文件夹下,your_route就是‘/pc/’,file是你的上传的file
let time = new Date().getTime()
const storeAs = key.path + time + this.random_string(16) + '.' + imgfile.type.split('/').pop()
client.multipartUpload(storeAs, imgfile, {
// 记录断点, 如果关闭了浏览器,然后重新启动继续上传的话,是不行的,请参考上边对file对象的描述
}).then(results => {
let img = {
typeName: fileList.typeName,
typeIndex: fileList.typeIndex,
name: results.name.split('/').pop(),
url: `http://666.com${results.name}`
}
resolve(img)
})
})
}
2.代码中 getOssInfo() 是封装的 向后台 请求阿里云 上传权限的方法
3.代码中 Promise.all() 可以请求一组数据 格式 是以数组的方式发送 其结果用 then() 方法接收 then 有两个参数 第一个是成功,第二个是失败
代码示例:
Promise.all([uploadSectionFile(data1), uploadSectionFile(data2)]).then(function (results) {
let [data1, data2] = results // 结构赋值 ES6 特性
console.log(data1) // 打印data1结果
console.log(data2) // 打印data2结果
}, function () {
console.log('失败') // 只要有一个结果失败 就全失败
})
// 此处 开始 请求数据
用async 使其函数 变成同步方法
async getPhotoUrl () {
await this.getOssInfo() // 等待请求阿里云 权限
// 从本地 localStorage 获取权限
var keyList = JSON.parse(localStorage.getItem('ossInfo'))
let _that = this
let catPromiseArr = [] // 将使用 Promise.all 的请求数据 数组
let listPromiseArr = [] // 将使用 Promise.all 的请求数据 数组
// 合并请求商品图片 数据
this.imgUrlListCat.forEach((element, index) => {
element.typeIndex = index
if (element.raw) {
// 循环 把所有想要的数据 放到数组里
catPromiseArr.push(this.uploadSectionFile(keyList, element))
}
})
// 合并请求多规格图片 数据
this.imgUrlList.forEach((element, index) => {
if (element[0].raw) {
// 循环 把所有想要的数据 放到数组里
listPromiseArr.push(this.uploadSectionFile(keyList, element[0]))
}
})
// 请求商品图片url
// 开始请求 数据
await Promise.all(catPromiseArr).then(function (results) {
results.forEach(ele => {
_that.imgUrlListCat.splice(ele.typeIndex, 1, ele)
})
}, function () {
_that.$Message.error('商品图片上传失败!')
})
// 请求多规格图片url
// 等待 上次 Promise.all 结束后 请求第二条 数据
await Promise.all(listPromiseArr).then(function (results) {
results.forEach(ele => {
_that.imgUrlList.splice(ele.typeIndex, 1, [ele])
})
}, function () {
_that.$Message.error('多规格图片上传失败!')
})
// 等待 第二条数据 请求结束 后 开始调用 向后台提交数据的方法
// 调用验证,提交数据方法
this.handleSubmit('formValidate')
},
更多推荐
已为社区贡献12条内容
所有评论(0)