Блок захвата не увольняется

#javascript #reactjs

Вопрос:

У меня асинхронный вызов API, при котором второй блок .catch не выполняется.

Сначала я определил основную функцию вызова API в файле utils следующим образом:

    const getCustomer= (body) => {
    return new Promise(resolve => {
      fetch('/getCustomer', {
        method: 'post',
        body: JSON.stringify(body),
        headers: {
            Accept: "application/json"
            Content-type: "application/json"
-       },
      })
      .then(response => response.json())
      .then(json => resolve(json))
      .catch(err => console.log('error happened', err))
    })
  };
 

Позже в моем файле JSX я вызываю API, импортируя функцию выше.

 getCustomer(myPayload).then(res => {
 setCustomer(res)
}).catch(err => {
 setShowError(true)
})
 

Что я пытаюсь сделать, так это показать сообщение об ошибке с помощью setShowError, но по какой-то причине я вижу только console.log('error happened', err) выбрасывание из папки utils, где я определяю свою функцию выборки.
Любая идея о том, как я могу исправить это поведение и выполнить функцию catch

Комментарии:

1. Это недопустимый JS; не будет компилироваться как есть. Пожалуйста, укажите свой фактический код.

2. кто-то уже дал мне ответ

3. Да, я знаю. Это не значит, что код не должен быть реальным кодом.

4. Друг мой, а что, если я не хочу делиться своим настоящим кодом?? Я просто сменил названия, вот и все.

5. … Размещенный код должен быть синтаксически правильным. Это позволяет избежать того, чтобы люди спускались в неуместную кроличью нору. Для этого есть причина-чем ближе код к запуску, тем меньше людям приходится об этом думать. Это помогает людям помогать вам и является хорошей привычкой.

Ответ №1:

Если вы хотите, чтобы оба .catch эс выполнялись, вам нужно будет ввести первый, иначе в результате getCustomer всегда будет возвращено обещание, которое будет выполнено. Вам также нужно будет использовать reject параметр конструктора Promise.

 new Promise((resolve, reject) => {
    // ...
    .catch(err => {
        console.log('error happened', err);
        reject(err);
    })
 

и обязательно верните вызов обещания в своем коде реакции:

 return setCustomer(res);
 

Хотя это возможно, обычно лучший подход, если это возможно, состоит в том, чтобы не обнаруживать ошибку ниже, а вместо этого позволить вызывающему абоненту обработать ее. Также не используйте антипаттерн для построения явных обещаний.

    const getCustomer= (body) => {
    return fetch('/getCustomer', {
        method: 'post',
        body: JSON.stringify(body),
        headers: {
            Accept: "application/json"
            Content-type: "application/json"
-       },
      })
      .then(response => response.json());
  };
 

это то, что я бы предпочел. Если вам действительно не нужно setCustomer , чтобы приложение само справлялось с этим, просто позвольте ошибке просочиться до вызывающего.