js 循环请求接口获取数据

js yekong

请求多个接口

  1. 对于每个type,你的代码中需要三次独立的异步请求(list_teacherlist_externallist_serve)。这些请求可以同时进行以节省时间。

  2. 使用map函数直接生成list,而不是用forEach循环和push。

这是优化后的代码:

async getData() {
  try {
    const res = await list_zgqk();
    if (res.data) {
      const promises = res.data.map(async (typeName) => {
        var data = {
          name: typeName,
          value: 0,
          value1: 0,
          value2: 0,
        }

        // Start three requests concurrently
        const [value, value1, value2] = await Promise.all([
          list_teacher({ "current": 1, "size": 1, "zgqk": data.name }),
          list_external({ "current": 1, "size": 1, "zgqk": data.name }),
          list_serve({ "current": 1, "size": 1, "zgqk": data.name })
        ]);

        // 校内教职工
        data.value = value.total;
        // 外聘教师
        data.value1 = value1.total;
        // 服务人员
        data.value2 = value2.total;

        return data;
      });

      this.list = await Promise.all(promises);
      console.log(JSON.stringify(this.list));
    }
  } catch (err) {
    console.error(err);
  }
},

在这段代码中,Promise.all使得我们可以并发执行多个操作。只有当所有的promise都解决(或者一个拒绝)时,Promise.all才会解决。这可以显著提高性能,特别是当每个请求都需要花费一些时间时。

循环请求接口方式

列表循环请求接口获取数据

list: [
{
  name: '本科',
  value: 0
}, {
  name: '硕士',
  value: 0,
}, {
  name: '博士',
  value: 0,
}, {
  name: '博士后',
  value: 0
}]
const promises = this.list.map(async (type) => {
  try {
    const data = await list_teacher({ "current": 1, "size": 1, "xlcc": type.name });
    type.value = data.total;
    return type;
  } catch (err) {
    console.error(`Error updating type ${type.name}:`, err);
    type.value = 0; // or some default value
    return type;
  }
});

Promise.all(promises)
  .then(results => {
    console.log(results); // 所有请求完成后的处理
  })
  .catch(err => console.error("An error occurred:", err));
喜欢