异步问题处理

最新推荐文章于 2024-09-13 08:33:26 发布

weixin_45353536

最新推荐文章于 2024-09-13 08:33:26 发布

阅读量58

点赞数

分类专栏： vue3+ts 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45353536/article/details/129651717

版权

vue3+ts 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、内层列表数据包含在最外层列表的某个属性中，添加没刷新问题（异步问题）
1.对的方法
在这里插入图片描述

2.错的方法
在这里插入图片描述

二、new promise 异步调用（JSON数据组装）

function getTypeList(type) {
  return new Promise(function (resolve, reject) {
    getElecIdentPageApi({ current: 1, size: 200, deviceType: type }).then(
      res => {
        let arr = [];
        if (res.code === 0) {
          res.data.records.forEach(el => {
            let obj = {
              a: el.a,
              b: el.b,
              c: el.c
            };
            arr.push(obj);
          });
          resolve(arr);
        } else {
          reject(res.msg);
        }
      }
    );
  });
}
function handleData() {
  let elecList = [];
  for (let i = 0; i < formData.elecType.length; i++) {
    getTypeList(formData.elecType[i]).then(item => {
      var obj = {
        deviceType: formData.elecType[i],
        data: item
      };
      elecList.push(obj);
      formData.elecListJsonStr =
        `{ "identifier": "elecIdent", "elecList":` +
        JSON.stringify(elecList) +
        `}`;
    });
  }
}

数据上万条了要异步加载

// function getDeviceList(current) {
//   return new Promise(function (resolve, reject) {
//     getLotDevicePage2Api({ current: current, size: 1000, nodeType: 3 }).then(
//       res => {
//         if (res.code === 0) {
//           resolve(res.data.records);
//         } else {
//           reject(res.msg);
//         }
//       }
//     );
//   });
// }
// function getInitData() {
//   let clientData = [];
//   getLotDevicePage2Api({ current: 1, size: 1, nodeType: 3 }).then(res => {
//     let current = Math.ceil(res.data.total / 1000);
//     for (let i = 1; i <= current; i++) {
//       getDeviceList(i).then(item => {
//         clientData.push(item);
//         if (i === current) {
//           let flat = clientData.reduce((prev, next) => {
//             return prev.concat(next);
//           });
//           let mapAllData = flat.filter(el => {
//             return !validatenull(el.lon) && !validatenull(el.lat);
//           });
//           data.mapData = [...mapAllData];
//         }
//       });
//     }
//   });
//   getfeedBack(); //用户反馈
//   getCustHandle(); //客服处理

// }