javascript - axios POST 解析为 undefined

Question

我开始将我的项目从标准 Fetch API 切换到 Axios 库。 Axios 看起来很棒，有所有的拦截器、自定义实例等。问题是从 POST 请求开始的。

我有一个自定义 axios 实例定义为:

export const axiosInstance = axios.create({
  baseURL: API_URL,
  timeout: 10000
});

我的大部分 API 调用都使用它，而且大部分都很好，除了一个我被困了令人难以置信的令人沮丧的时间。 使用 POST 请求，Promise 似乎被解析为 undefined。 我们来看一段代码:

export async function saveIncomes(incomes) {
  const { added, changed } = incomes;
  const add_res = axiosInstance.post(`${INCOMES_URL}`, added).then(console.log);
  const change_responses = [];
  for (let changed_row of changed) {
    change_responses.push(
      axiosInstance.put(`${INCOMES_URL}${changed_row.id}/`, changed_row)
    );
  }
  let finalRes = [];
  try {
    finalRes = await axios.all([add_res, ...change_responses]);
  } catch (e) {
    console.log(e);
  }
  return finalRes;
}

该函数需要两个收入数组 - 添加和更改(因为有两个 http 方法)， 为它们准备所有 promise (我的 API 上有批量 POST，但没有 PUT)并调用 axios.all 来同时运行它们。现在，乐趣开始了。 当我发布由 API 验证的正确数据并返回 201 创建时，一切都很好，Promise 解析为当前的 axios Response 对象，但是当数据不正确并且状态为 400 时，它解析为 undefined。 示例:

axios.all([p1, p2, p3]) // correct data
 -> [<response1>, <response2>, <response3>

axios.all([p1, p2, p3]) // incorrect data
 -> [undefined, undefined, undefined]

它不会抛出错误，它会解决，但无济于事。 然而，浏览器正确获取数据(我的意思是，它的状态 400，但有一个响应正文)。

我不知道该怎么办了，我是 axios 的新手，但它看起来比现在问题少。

我的前端应用程序在 React.js 上，它的某些部分仍然使用 fetch API，因为它正在进行中。 后端是带有 DRF 的 python Django。

编辑: 另外，我正在使用拦截器，代码如下:

export function setResponseInterceptor({ onSuccess, onError }) {
  if (!onSuccess) {
    onSuccess = response => response;
  }
  axiosInstance.interceptors.response.use(response => {
    if (isHandlerEnabled(response.config)) {
      response = onSuccess(response);
    }
    console.log(response);
    return response;
  }, onError);
}

export function setRequestInterceptor({ beforeSend, onError }) {
  if (!beforeSend) {
    beforeSend = cfg => cfg;
  }
  axiosInstance.interceptors.request.use(cfg => {
    if (isHandlerEnabled(cfg)) {
      cfg = beforeSend(cfg);
    }
    return cfg;
  }, onError);
}

Answer 1

Axios call axios.all() 上的 Promise.all()，异步运行 Promise。正在查看MDN definition of promises .all拒绝你可以看到以下内容:

Using Promise.all

Promise.all waits for all fulfillments (or the first rejection).

Rejection

If any of the passed-in promises reject, Promise.all asynchronously rejects with the value of the promise that rejected, whether or not the other promises have resolved.

当您的 API 返回 401 时，它会返回失败 promise 的拒绝，而忽略其他 promise 。

遭到拒绝

使用.catch，您将收到一个唯一的 promise 拒绝作为参数，并且应该能够读取它的值。

// Using .catch:
Promise.all([p1, p2, p3, p4, p5])
.then(values => { 
  console.log(values);
})
.catch(error => { 
  console.error(error.message)
});

查看您的代码，您需要确保您的函数 saveIncomes 正确处理此行为。