Axios POST разрешается до неопределенного

Question

Я начал переключать свой проект со стандартного API Fetch на библиотеку Axios. Axios выглядел великолепно, со всеми перехватчиками, пользовательскими экземплярами и т. Д. Проблема началась с запросов POST.

У меня есть пользовательский экземпляр axios, определенный как:

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

Я использую его для большинстваиз моих вызовов API, и большинство из них в порядке, за исключением одного, который я застрял на невероятно разочаровывающее количество времени. Используя POST-запрос, кажется, что Обещание преобразуется в 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), подготовьте для них все обещания (у меня есть общий POST, но не PUT на моемAPI) и вызовите axios.all, чтобы запустить их одновременно. Теперь начинается самое интересное. Когда я публикую правильные данные, которые проверены API и возвращает 201 созданный, все в порядке, Обещание разрешается в текущий объект ответа Axios, но когда данные неверны и статус 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, некоторые его части все еще используют API выборки, потому что оно находится в стадии разработки. Бэкенд в Python Django с DRF.

РЕДАКТИРОВАТЬ: Кроме того, я использую перехватчики вот код:

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() на axios.all(), который выполняет обещания асинхронно. Глядя на определение обещаний MDN. Все отклонение вы можете увидеть следующее:

Использование Promise.all

Promise.all ожидает всех выполнений (илипервый отказ).

Отклонение

Если какое-либо из переданных обещаний отклоняется, Promise.all асинхронно отклоняет значение отклоненного обещания, независимо от того, были ли разрешены другие обещания.

Когда ваш API возвращает 401, он возвращает отклонение невыполненного обещания, игнорируя остальные.

Поймайте отклонение

Используя .catch, вы будетеполучите в качестве аргумента уникальное отклонение обещания и сможете прочитать его значение.

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

Глядя на свой код, вы должны убедиться, что ваша функция saveIncomes правильно обрабатывает это поведение.