Promise 的使用 以及 async ， await ，Promise.all 使用方法

 代码  是直接拷贝 项目中写的  没有做简化 许多内容 是调用 项目中的数据  可以忽略掉 

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')
    },