捕获拒绝

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（我有大量的POST，但API上没有PUT），然后调用axios.all来同时运行它们。现在，乐趣开始了。当我发布通过API验证的正确数据并返回创建的201时，一切都很好，Promise解析为当前的axios Response对象，但是当数据不正确且状态为400时，它解析为未定义。示例：

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 Promise.all()上的call axios.all()，它会异步运行Promise。查看MDN definition of promises .all拒绝，您会看到以下内容：

使用Promise.all

Promise.all等待所有实现（或第一个拒绝）。

拒绝

如果任何传入的承诺被拒绝，则Promise.all会以被拒绝的承诺的值异步拒绝，无论其他承诺是否已解决。

当您的API返回401时，它将返回对失败承诺的拒绝，而忽略其他承诺。

捕获拒绝

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

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

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

Axios POST解析为未定义

1 个答案:

使用Promise.all

拒绝

捕获拒绝