javascript - 关于ajax异步加载请问数据延迟问题

问题描述

问 题

在外面定义一个空数组，然后做一个ajax请求，请求内再嵌套一个请求，最终拼接成一个三个对象插入空数组。
最终出来的结果顺序都是不一样的，因为for循环执行，但是ajax请求是异步的。最终结果受for循环影响，每次获得的数组结果里面的对象字段顺序都不一样要怎么解决。

代码示例：

$.ajax({
  url: 'http://120.76.75.179:5000/service/device_access/realData',
  type: 'GET',
  data: {
    access_token: 'cbc7970472d055c802c2f50646da0d44179bdde05bc100d1e50c679103ab0bba8cb6ee7a63a4a4875a',
    did: '000200014611127'
  },
  success: function(data) {
    console.log(1,data);
    var devId_arr = (data.collectdids.v).split(',');
    var devDetail_arr = [];
    for(var val in devId_arr) {
      var devDetail_obj = {};
      // 获取第二个接口里面的设备名称
      $.ajax({
        url: 'http://120.76.75.179:5000/service/device_register/get_device_info_bypid',
        type: 'GET',
        data: {
          access_token: 'cbc7970472d055c802c2f50646da0d44179bdde05bc100d1e50c679103ab0bba8cb6ee7a63a4a4875a',
          pid: devId_arr[val]
        },
        success:function(res){//                console.log(2,res);
          devDetail_obj.deviceName = res[0].name;
        }
      })
      // 获取第三个接口里面需要的值
      $.ajax({
        url: 'http://120.76.75.179:5000/service/device_access/realData',
        type: 'GET',
        data: {
          access_token: 'cbc7970472d055c802c2f50646da0d44179bdde05bc100d1e50c679103ab0bba8cb6ee7a63a4a4875a',
          did: devId_arr[val]
        },
        success:function(res){ //  console.log(3,res);
          devDetail_obj.deviceID = devId_arr[val];
          devDetail_obj.deviceStatus = res.totalstatus.v;
          devDetail_obj.countTotal = res.count.v;
          devDetail_arr.push(devDetail_obj);
        }
      });
    }  
    console.log(devDetail_arr.length)
    console.log(devDetail_arr)
  }
    
})

})

解决方案

ajax 是异步的，当执行到你的 log 代码时，ajax 还没有返回呢。

给你一个大致的程序吧

function getFirst() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '',
      success: (res) => {
        resolve(res);
      },
      fail: (e) => {
        reject(e);
      }
    });
  });
}

function getSecond() {
  return new Promise((resolve, reject) => {
    $.ajax({
      url: '',
      success: (res) => {
        resolve(res);
      },
      fail: (e) => {
        reject(e);
      }
    });
  });
}

function getThird() {
  const getFiles = devId_arr
    .map(file => getSecond(file));
  
  return Promise
    .all(getFiles)
    .then(datas => {
        // 处理
    })
}

// 主程序

getThird().then((data => {
    console.log(data);
}))

这篇关于javascript - 关于ajax异步加载请问数据延迟问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！