#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
, чтобы приложение само справлялось с этим, просто позвольте ошибке просочиться до вызывающего.