当前位置：首页 > article >正文

处理多个axios请求

article 2024/9/27 17:34:04

代码中使用了两个独立的 Axios 请求来获取角色数据和动作数据。由于这些请求是异步执行的，JavaScript 不会等待它们完成，而是继续往下执行。
这可能导致在你尝试使用 agentdata 或 actiondata 变量时，它们可能仍然是空数组，因为在 console.log 或其他操作执行时，这些请求可能尚未完成，数据还未被赋值给这些变量。

1.使用回调函数

将每个请求的处理逻辑放入一个单独的函数，并在每个请求的 .then() 方法中调用这些函数。这种方法可以使代码更模块化，但可能会导致回调地狱。

function handleAgentData(response) {
  if (response.data.success) {
    agentdata = response.data.data;
    // 处理 agentdata
  }
}

function handleActionData(response) {
  if (response.data.success) {
    actiondata = response.data.data;
    // 处理 actiondata
  }
}

axios.post("/proxy_url/getAllAgentData", { "pageNo": 0, "pageSize": 10000 })
  .then(handleAgentData)
  .then(() => axios.post("/proxy_url/getAllActionData", { "pageNo": 0, "pageSize": 10000 }))
  .then(handleActionData)
  .catch(error => {
    console.error("Error fetching data:", error);
  });

2.使用第三方库或工具

有一些第三方库或工具（比如 async、lodash 等）提供了更高级的异步操作处理方式，例如 async.series、async.parallel 或 Promise.map 等，可以更方便地处理多个异步请求。这些库可以简化并发请求的管理，但需要额外引入库和学习其使用方法。

3.使用 Promise链式调用

可以通过将一个请求的 .then() 方法链接到另一个请求的 .then() 方法来执行多个异步操作。这种方法可以在一定程度上解决嵌套回调的问题，但可读性可能会降低。

axios.post("/proxy_url/getAllAgentData", { "pageNo": 0, "pageSize": 10000 })
  .then(response => {
    if (response.data.success) {
      agentdata = response.data.data;
      // 处理 agentdata

      // 返回另一个 Promise 对象以进行链式调用
      return axios.post("/proxy_url/getAllActionData", { "pageNo": 0, "pageSize": 10000 });
    }
  })
  .then(response => {
    if (response.data.success) {
      actiondata = response.data.data;
      // 处理 actiondata
    }
    // 在这里同时处理 agentdata 和 actiondata
    // 由于异步性质，这里可能无法保证两者都已经获取完毕
    // 所以最好的方式还是在各自的处理逻辑中进行操作
  })
  .catch(error => {
    console.error("Error fetching data:", error);
  });

4.使用 Async/Await

使用 async/await 结合 try/catch 语句可以更清晰地处理多个异步请求。这种方法让代码看起来更像是同步的，易于理解和维护。

async function fetchData() {
  try {
    const response1 = await axios.post("/proxy_url/getAllAgentData", { "pageNo": 0, "pageSize": 10000 });
    const response2 = await axios.post("/proxy_url/getAllActionData", { "pageNo": 0, "pageSize": 10000 });

    if (response1.data.success) {
      agentdata = response1.data.data;
      // 处理 agentdata
    }

    if (response2.data.success) {
      actiondata = response2.data.data;
      // 处理 actiondata
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

fetchData();

5.使用 Promise.all

等待两个请求都成功完成后再处理数据。这是一种更好的处理方式，可以确保在两个请求都成功获取数据后再进行处理。

let agentdata = [], actiondata = [];

// 发起两个请求
const request1 = axios({
  method: "post",
  url: "/proxy_url/getAllAgentData",
  data: {
    "pageNo": 0,
    "pageSize": 10000
  }
});

const request2 = axios({
  method: "post",
  url: "/proxy_url/getAllActionData",
  data: {
    "pageNo": 0,
    "pageSize": 10000
  }
});

// 使用 Promise.all 来等待两个请求都完成
Promise.all([request1, request2])
  .then(responses => {
    // 处理第一个请求的响应
    if (responses[0].data.success) {
      agentdata = responses[0].data.data;
      // 在这里处理 agentdata
    }

    // 处理第二个请求的响应
    if (responses[1].data.success) {
      actiondata = responses[1].data.data;
      // 在这里处理 actiondata
    }
  })
  .catch(error => {
    // 处理错误
    console.error("Error fetching data:", error);
  });