前端同时调用多个接口的示例分析

1有时候我们在做一个事的，比如获取班，要请多多个接口，然后汇总数据。

2还有些候, 我们 提交一个接口的时候还要上传前端数据，保存这些数据都传到后端，最后报告成果，

1，同时多次提示例，最后报结果

viewFn(row) {
  const timeRange = `${row.begin_time},${row.end_time}`;
  this.request({
    url: "/classReportDetails/platForm",
    params: {
      createTime: timeRange,
    }
  }).then(resp1 => {
    // 第一个请求成功后，调用第二个请求，并等待其完成
    return this.getCurrentOil(row).then(resp2 => {
      // 合并两个请求的响应（根据实际需求调整）
      return { resp1, resp2 };
    });
  }).then(({ resp1, resp2 }) => {
    // 更新状态时使用正确的响应数据
    this.statList = resp1;
    this.contWorkProduct = resp2;
    this.takeOverDialobView = true; // 确保这个变量控制弹出层的显示
  }).catch(error => {
    console.error("Error:", error);
  });
},

getCurrentOil(row) {
  console.log("zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz", row);
  return this.request({
    url: '/omark/history_work_seq',
    params: {
      work_seq: row.work_seq,
    }
  }).then(resp => {
    this.contWorkProduct = resp;
    return resp; // 返回响应以便在 viewFn 中使用
  });
},

　第二，周时上传数据到后端报结果

// 交班事件三个请求一起发送
    async wordend(event) {
      if (typeof(Storage) === "undefined") {
        alert("你的浏览器不支持本地储存，请连系电脑管理者");
        return;
      }
      let localUserId = localStorage.getItem('userId');
      localUserId = localUserId ? localUserId.toString() : '';
      const adminId = this.start_init.begin_admin_id.toString();
      let isSameId = localUserId === adminId;

      if (!isSameId && event.key !== 'a') {
        alert("当前接班人的账号不是同一个人，需要授权");
        return;
      }

      this.message.confirm(`交班人：${this.start_init.begin_user_name}，确定要交班吗？`, async () => {
        try {
          await Promise.all([
            this.resultsOilview(), // 并行请求保存全平台汇总信息
            this.saveOilSales()   // 并行请求保存油品汇总信息
          ]);

          await this.request({ url:'/cashierModule/endWork', params: { id: this.start_init.id } });
          this.$store.dispatch('ws/destroyedSYT');
          location.reload();
        } catch (error) {
          console.error("请求失败：", error);
          this.message.error("请求失败，请重试");
        }
      });
    },
    async resultsOilview() {
      try {
        await this.request({ url:'/omark/saveResults' });
        console.log("全平台汇总信息保存成功");
      } catch (error) {
        console.error("全平台汇总信息保存失败", error);
        this.message.error("全平台汇总信息保存失败");
      }
    },
    async saveOilSales() {
      try {
        await this.request({
          url:'/omark/saveOilSales',
          method: 'POST',
          data: {
            "oil": JSON.stringify(this.oilSaleSummary)
          }
        });
        this.message.success("油品汇总信息保存成功");
      } catch (error) {
        console.error("油品和销售平台和第三方的汇总信息保存失败", error);
        this.message.error("油品汇总信息保存失败");
      }
    },