防止axios多次调用答案

【问题标题】：Preventing axios multiple calls防止axios多次调用
【发布时间】：2022-10-14 20:17:35
【问题描述】：

我在我的 VueJS 应用程序中使用 axios。目前，在每个组件中，我在每个组件中使用一个变量来检查用户在启动 axios 调用之前是否已经单击了按钮。这会导致很多重复的代码，所以我考虑将我的 axios 调用包装到一个函数“uniqueAxios”中，如下所示：

const urlsAPI = [];
const uniqueAxios = async (method, url, data) => {
  if (urlsAPI.includes(url)) {
    console.log('Already called!!');
    Promise.reject(new Error('Already called'));
  } else {
    urlsAPI.push(url);
    await axios[method](url, data)
      .then((res) => {
        console.log('OK');
        console.log(res);
        return Promise.resolve(res);
      })
      .catch((e) => {
        console.log('KO');
        console.log(e);
        return Promise.reject(e);
      });
  }
};

但是当我在我的组件中使用这个函数时，像这样：

await uniqueAxios(
          'post',
          `${process.env.VUE_APP_API_URL}/XXX`,
        )
          .then((res) => {
            console.log(res);
          })
          .catch((e) => {
            console.log(e);

控制台抛出错误：TypeError: res is undefined。不过，我们联系了 API。只是我之前直接用axios的时候处理不了then和catch。

我确定包装 uniqueAxios 函数不正确。有人知道我应该如何处理吗？提前致谢。

【问题讨论】：

标签： vue.js axios vuejs3

【解决方案1】：

您有多个问题，第一个是您在函数中没有返回任何内容。

const uniqueAxios = async (method, url, data) => {
  if (urlsAPI.includes(url)) {
    console.log('Already called!!');
    Promise.reject(new Error('Already called'));
  } else {
    urlsAPI.push(url);
    return await axios[method](url, data) // You need to return the axios
      .then((res) => {
        console.log('OK');
        console.log(res);
        return Promise.resolve(res); // This line return inside the promise axios not the function
      })
      .catch((e) => {
        console.log('KO');
        console.log(e);
        return Promise.reject(e);
      });
  }
};

第二件事是您等待并无所事事地去做。现在有了这个改变，你可以等待你像这样运行并做出响应。

const response = await uniqueAxios(
  'post',
  `${process.env.VUE_APP_API_URL}/XXX`,
  )
console.log(response)

【讨论】：