vue Promise 对象 等待所有异步处理完成 再继续处理

文章介绍了如何使用Promise对象异步获取数据,通过Promise.all()方法等待所有Promise完成后再进行数据处理,确保了数据的同步处理和错误处理。
摘要由CSDN通过智能技术生成

1 定义数据集合 用来搜集所有数据

  let promises = [];  // 用来存储所有的 Promise 对象

2 promise对象 异步 返回数据 同时添加数据到promises 列表

// 依次读取列表元素的表
for (let symbol of symbolList) {

 let promise = new Promise((resolve, reject) => {  // 将请求数据和处理数据的代码封装成 Promise 对象

    // 异步事务 
      getRequest.onerror = function (event) {
        console.log('读取数据出错');
        reject(event.target.error);
      };

      getRequest.onsuccess = function (event) {
        let data = event.target.result;

        if (data != undefined) {
          that.logList.push(`数据获取成功 : ${key}`)
          let kdataAndmaObj = funcKdataAndMaObj(params.cycle, data)

          let analysisedData = funcMa(kdataAndmaObj, params.cycle, tableName)
          
         //
         // 异步结果返回给promise 对象

          resolve(analysisedData);  // 将处理后的数据传递给 resolve() 函数
        } else {
          console.log(`${key} 数据不存在`);
          that.logList.push(`数据不存在 : ${key}`)
          resolve(null);  // 表示数据不存在
        }
      };
    });
    promises.push(promise);  // 将 Promise 对象加入 promises 列表中
  }

3 Promise.all() 方法等待所有的 Promise 对象都执行完成后,才会执行 .then() 中的回调函数

Promise.all(promises).then(results => {
    // 在所有 Promise 对象都完成后执行下一步操作
    let DataAll = results.filter(result => result !== null);  // 过滤掉不存在的数据
    console.log('DataAll :', DataAll );

    // 处理剩余的代码...
  }).catch(error => {
    console.log('发生错误:', error);
  });

4 总结

promise对象 异步处理

Promise.all() 等待所有异步完成 在里面处理所有数据

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,你可以使用`async/await`或者`Promise`来实现异步执行完再执行的效果。 1. 使用`async/await`: ```javascript methods: { async fetchData() { const data = await this.asyncFunction(); // 异步函数 // 在这里处理获取到的数据 }, asyncFunction() { return new Promise((resolve, reject) => { // 异步操作,比如发送网络请求 // 在异步操作完成后调用resolve(),将结果传递给下一步 // 或者调用reject()处理错误情况 }); } } ``` 在上述代码中,`fetchData`是一个异步函数,使用`await`关键字等待异步函数`asyncFunction`执行完毕并返回结果后,再继续执行后续代码。 2. 使用`Promise`: ```javascript methods: { fetchData() { this.asyncFunction() .then(data => { // 在这里处理获取到的数据 }) .catch(error => { // 处理错误情况 }); }, asyncFunction() { return new Promise((resolve, reject) => { // 异步操作,比如发送网络请求 // 在异步操作完成后调用resolve(),将结果传递给下一步 // 或者调用reject()处理错误情况 }); } } ``` 在上述代码中,`fetchData`函数使用了Promise对象处理异步操作。通过`.then()`和`.catch()`方法来处理异步操作的结果和错误。在`.then()`方法中处理获取到的数据,在`.catch()`方法中处理错误情况。 无论是使用`async/await`还是`Promise`,都能够实现在异步执行完后再执行后续代码的效果。你可以根据自己的实际情况选择其中一种方式来处理
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值