Отклоненное обещание HTTP не попадает в блок catch

Я использую VueJs (и Vuex) с Axios для связи с Express Api. Я могу удалить свою учетную запись пользователя, использующую службу

import api from '@/services/api.js';

export default {
  deleteAccount: () => api().delete('/users')
};

где api — экземпляр axios. Мне не нужно передавать идентификатор пользователя, потому что API идентифицирует пользователя по жетон.

В моем представлении настроек я могу использовать эту услугу

<script>
import { mapActions } from 'vuex';

import UserService from '@/services/users'; 

export default {
  name: 'Settings',
  methods: {
    ...mapActions('alert', [
      'showSuccessAlert',
      'showErrorAlert'
    ])
    deleteAccount: async function() {
      try {
        await UserService.deleteAccount();

        this.showSuccessAlert({ message: 'Account was deleted successfully' });
        // other stuff
      } catch (error) {
        this.showErrorAlert({ message: error.message });
      }
    }
  }
};
</script>

Звонок UserService.deleteAccount() возвращает мне невыполненное обещание. Использование await возвращает мне ответ API.

В настоящее время API всегда возвращает 500 для целей тестирования. Я думал, что если Promise будет отклонен, код всегда будет переходить прямо в блок catch. Здесь код возвращает отклоненное обещание (и записывает «Внутреннюю ошибку сервера» в консоль, но проходит и показывает предупреждение об успешном выполнении / никогда не выполняет код из блока catch.

Что не так с кодом? Я неправильно понял обещания?


Обновлять

Мой экземпляр axios

import axios from 'axios';

import TokensService from '@/services/tokens.js';
import store from '@/store/store.js';

function getTokenString() {
  return `Bearer ${TokensService.getToken()}`;
}

export default () => {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/',
    headers: {
      'Content-Type': 'application/json',
      Authorization: getTokenString(),
    },
  });

  instance.interceptors.request.use((config) => {
    config.headers.Authorization = getTokenString();
    return config;
  }, (err) => Promise.reject(err));

  instance.interceptors.response.use((res) => res, (err) => {
    if (err.response.status === 401) {
      store.dispatch('authentication/destroySession');
      store.dispatch('alert/showErrorAlert', { message: err.message });
    }

    return err;
  });

  return instance;
};

Позвонить api().delete() — это то же самое, что axios.delete('http://localhost:3000/users')

returns a 500 - статус http не обязательно означает отклоненное обещание - браузеры fetch, например, не отклоняют 500 или 404 или любой успешный (вплоть до получения ответа http) запрос
Jaromanda X 10.04.2019 15:28

Возвращает ли код состояния 500 автоматическое отклонение обещания?

Shilly 10.04.2019 15:28

да нормально так и есть

hrp8sfH4xQ4 10.04.2019 15:28

как выглядит код для api().delete? это твой код?

Jaromanda X 10.04.2019 15:29

насколько я знаю, все "неудачные запросы" попадут в блок catch

hrp8sfH4xQ4 10.04.2019 15:29

насколько вы знаете ... явно нет :p опять же, это код api().deleteтвой? Если нет, то что это

Jaromanda X 10.04.2019 15:30

статус 500 - это не неудачный запрос, это ошибка сервера. Это успешный запрос с кодом состояния, указывающим, что логика на сервере, стоящая за запросом, не удалась. Что касается браузера, сам запрос по-прежнему выполнен успешно, поэтому он не вызовет автоматического отклонения. Например, API fetch(), о котором упоминает Яро.

Shilly 10.04.2019 15:30

@JaromandaX да, это мой код, я обновлю свой ответ

hrp8sfH4xQ4 10.04.2019 15:32
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
8
905
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуйте вернуть отклоненное обещание здесь

  instance.interceptors.response.use((res) => res, (err) => {
    if (err.response.status === 401) {
      store.dispatch('authentication/destroySession');
      store.dispatch('alert/showErrorAlert', { message: err.message });
    }

    return Promise.reject(err);
  });

по примерам https://github.com/axios/axios#interceptors

о да, мне пришлось изменить return err; на return Promise.reject(err);

hrp8sfH4xQ4 10.04.2019 15:43

Другие вопросы по теме