防止axios多次调用

Question

我在我的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函数是不正确的。有人知道我该怎么处理这件事吗？提前谢谢。

Answer 1

你的原始代码

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);
      });
  }
};

所有async函数都会返回一个承诺，甚至类似于：

async function three() {
  return 3;
}

或者这个

async function belch() {
  throw new Error("Belch!");
}

它将根据是否抛出错误来解决或拒绝。

由于没有显式返回值，所以返回值是作为undefined解析的承诺(除非抛出错误，在这种情况下，它会拒绝)。

您的代码将更干净(并工作！)如果你只说这样的话：

const inFlightUrls = new Set();

const uniqueAxios = async (method, url, data) => {

  const inflight = inFlightUrls.has(url);
  if (inFlight) {
    throw new Error('Already called');
  }

  inFlightUrls.add(url);

  const res = axios[method](url, data)
              .finally( () => inflightUrls.delete(url) ) ;

  return res ;
};

上面的函数返回一个承诺，要么用Axios响应对象解析，要么用错误(从Axios或者由您抛出)拒绝。

Answer 2

编辑:有效，但我选择的答案要好得多。

事实上，我找到了一个解决办法：

let urlsAPI = [];
const uniqueAxios = async (method, url, data) => {
  if (urlsAPI.includes(url)) {
    throw new Error('Axios already called');
  }
  urlsAPI.push(url);
  const t = {
    type: 0,
    content: null,
  };
  await axios[method](url, data)
    .then((res) => {
      t.content = res;
      t.type = 1;
    })
    .catch((e) => {
      t.content = e;
    })
    .finally(() => {
      urlsAPI = urlsAPI.filter((u) => u !== url);
    });
  if (t.type) {
    return t.content;
  }
  throw t.content;
};

Answer 3

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

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)