关于promise的使用记录

113 阅读1分钟

promise.all的使用范例

async deleteRows(index, rows) {
      var that = this;
      // 拿到选中的数据;
      var val = this.multipleSelection;
      // 如果选中数据存在
      if(val){
           //声明一个promise数组
           let promiseList = []; 
           for (let item of val) {
           创建一个promise对象
          let promise = new Promise((resolve, reject) => {
             request.get('xxxx?xx='+item.id).then(res=>{
            if(res.data.code== 200){
                resolve("删除成功");
            }else{
                reject("删除失败")
            }
        })
          });
          //将异步操作 加入promise数组
          promiseList.push(promise); // 每个异步请求push到列表中
        }
          //promise.all 等待全部 走完 才 走all的then
          await Promise.all(promiseList)
          .then((res) => {
            // 等所有异步请求完成后执行
            that.$message.success("删除成功");
            that.BindData();
          })
          .catch((er) => {
            //catch只要有一步错就直接抛出错误
            that.$message.warning("删除失败");
            that.BindData();
          });
      }
    
      this.$refs.multipleTable.clearSelection();
      this.selected = false;
    },

2023/03/30 记录promise.all


function first() {
  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('定时器异步~我是first');
      resolve('完成1'); // 要有resolve或者reject告知完成哦,否则后续的await不会执行
    }, 5000);
  });
  return p;
}

function second() {
  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('定时器异步~我是second');
      resolve('完成2'); // 要有resolve或者reject告知完成哦,否则后续的await不会执行
    }, 1200);
  });
  return p;
}

function third() {
  let p = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('定时器异步~我是third');
      resolve('完成3'); // 要有resolve或者reject告知完成哦,否则后续的await不会执行
    }, 1000);
  });
  return p;
}


async function test(){
 let promiseList = [first(),second(),third()]
 await Promise.all(promiseList).then((res) => {
            // 等所有异步请求完成后执行
            console.log("所有已经执行完成",res);
          })
          .catch((er) => {
            console.log("执行失败");
            //catch只要有一步错就直接抛出错误
          });
}

结果

image.png

测试结果如上promise.all的输出结果是按promiseall的顺序来的不受其中函数执行快慢的影响 promise返回结果是以最后一个完成的异步函数返回结果时作为结束 且内部的所有函数是同步执行的

map中存在异步 使用promiase.all拿到所要的结果

function test2(){
  let arr = [1,2,3,4,5,6]
  let res = arr.map((v) => {
    let p = new Promise((resolve, reject) => {
      let time = Math.random()*1000
    console.log(time);
    setTimeout(() => {
      console.log(`定时器异步~我是third${v}`);
      resolve(v); // 要有resolve或者reject告知完成哦,否则后续的await不会执行
    }, time);
    });
    return p;
  })
  Promise.all(res).then((res) =>{
    console.log(res);
  }).catch((er) => {
            console.log("执行失败");
            //catch只要有一步错就直接抛出错误
          });
  console.log(res);
  
}

结果

image.png