Promise.all() 使用及封装

---

前言

Promise.all() 用于多个异步函数全部执行完成，再进行下一步操作的场景；
场景举例：页面默认查询且要默认传两个参数（这两个参数是从接口里取到的）

---

一、Promise.all() 使用

示例：

<script>
mounted() {
  this.getAll();
},
methods: {
  getAll() {
    Promise.all([this.getData1(), this.getData2()]).then(res => {
      // 拿到两个参数后再进行查询操作
      this.onQuery()
	})
  },
  getData1() {
    return new Promise((resolve, reject)=>{
      pageApi
        .xxx()
        .then((res) => {
          const { status, data } = res.data;
          // ...
          resolve()
        })
        .catch(() => {});
    })
  },
  getData2() {
    return new Promise((resolve, reject)=>{
      pageApi
        .xxxxx()
        .then((res) => {
          const { status, data } = res.data;
          // ...
          resolve()
        })
        .catch(() => {});
    })
  },
  
}
</script>

二、Promise.all() 封装

1.在公用方法js文件里：

<script>
function PromiseObj(item){
  return new Promise((resolve, reject)=>{
    let obj = {};
    if(item.method == "get"){
      obj = {
        url: item.url + '?' + qs.stringify(item.params),
        method: 'get'
      }
    }
    if(item.method == "post"){
      if(item.paramsType == "json"){
        obj = {
          url: item.url,
          method: 'post',
          data: item.params
        }
      }
      if(item.paramsType == "formdata"){
        obj = {
          url: item.url,
          method: 'post',
          data: qs.stringify(item.params)
        }
      }
    }
    request(obj).then(res=>{
      resolve({ key:item.key, data:res.data })
    })
  })
}

/**
 * Promise.all 封装
 * @param {Array} array 
 */
export function myPromiseAll(array){
  let AllList = []
  array.forEach(item=>{
    AllList.push(PromiseObj(item))
  })
  return Promise.all(AllList)
}

export default {
  myPromiseAll
}
</script>

2.使用

页面引入

<script>
import { myPromiseAll } from ”@/filter/xxx.js“
//...
mounted() {
  this.getAll();
},
methods: {
  getAll() {
	const requestArr = [
      {
        url: "/api/edimExt/v1.0/edimsGet",
        params: { dimTypecode: "fundann_reportType" },
        method: "get",
        key: "aaa"
      },
      {
        url: "/api/edimExt/v1.0/edimsGet",
        params: { dimTypecode: "fundann_submitComp" },
        method: "get",
        key: "bbb"
      }
    ];
    myPromiseAll(requestArr).then(res=>{
      console.log(res)
      // 拿到数据后进行数据处理
    })
  }
}
</script>

---