Javascript Fetch использует код состояния более одного раза
Мне нужно найти способ, когда запрос получает 403, я могу использовать if перед вызовом JSON со статусом и данными. Только 403 возвращает HTML
const response = await fetch(
// Fetch info
).then((response) => {
if (!response.ok && response.status === 403) {
// Stuffs
throw new Error('Exception message'); // Raise error to stop the code
}
return response.json();
})
.then((data) => ({
// I need use status code again, and keep the if statement 403 on top.
status: response.status,
data,
}));
Не смешивайте синтаксис await и then, они не будут корректно работать при совместном использовании.
@Jeremy "Эй, не ошибайся изящно при совместном использовании." что это вообще значит? Отказ от цепочки обещаний все равно вызовет исключение из await. Как обычно.
@VLAZ Помимо прочего, Promises использует .then/.catch/.finally для обработки ошибок, а await использует try catch для обработки ошибок. Джереми совершенно прав в этом утверждении. Как можно вывести ошибку, генерируемую в предложении .then/.catch, во внешнюю область действия try catch?
@ Джоэл То, как вы используете try/catch с await, требует отклонения обещания. try { await f() } catch (e) {} попадет в блок catch, если обещание от f() отклоняется. Механизма множественных ошибок нет — он всего один. В зависимости от состояния обещания. await либо продолжает выполнение обещания, либо вызывает исключение, которое переходит к блоку catch блока try/catch. Блок catch отражается обработчиком .catch(). Семантика API промисов соответствует try/catch для максимальной совместимости jsbin.com/jalahijuqa/1/edit
@VLAZ почитайте здесь dev.to/maximization/… TLDR promises have a different error handling mechanism than async/await.
@ Джереми, статья от кого-то, кто явно не понимает обещаний? Спасибо, мне это совсем не нужно. Мне нужно было только прокрутить до этого примера: i.imgur.com/Bgkq1YV.png правильный ответ — ни то, ни другое. Не совсем. Правильным кодом будет использование await Promise.update(), что затем сделает А. Б происходит потому, что вы не использовали await и не обработали отказ с помощью Promise.update().catch(). Это действительно так. Это не загадка. И это не какой-то жуткий дополнительный механизм. По сути, представьте, что вместо этого был Promise.reject("boom") - он явно не обрабатывается.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы хотите сохранить свой стиль .then(), а не переключаться на использование только await, вы можете просто переместить 2-й .then() туда, где у вас есть response в области видимости:
const result = await fetch(...).then((response) => {
if (!response.ok && response.status === 403) {
throw new Error('Exception message');
}
return response.json().then(data => {
status: response.status,
data
});
});
Или вы можете просто использовать await и избегать смешивания await и .then(), что обычно менее понятно и обычно его следует избегать:
const response = await fetch(...);
if (!response.ok && response.status === 403) {
throw new Error('Exception message');
}
const data = await response.json();
const result = {status: response.status, data};
Обратите внимание: я избегал использования response в двух разных местах для обозначения двух разных вещей и использовал result для окончательного результата, а response оставил в качестве ответа fetch().
Не смешивайте async/await с .then/.catch, если у вас нет ОЧЕНЬ веской причины. В этом случае вы этого не сделаете.
@ Джоэл, этот совет, чтобы избежать путаницы. Нет другой реальной причины избегать этого, кроме этого. И этот код не кажется запутанным.
@ Джоэл - я уже предложил другой вариант, который их не смешивает. Микширование произошло из вопроса ОП, поэтому я просто показывал им, как адаптировать то, что у них было.
@VLAZ Между ними большая разница. Обещание — это объект, представляющий промежуточное состояние операции, выполнение которого гарантированно завершится в какой-то момент в будущем. Async/Await — это синтаксический сахар для промисов, оболочка, делающая код более синхронным. то есть ждать ответа. Обещание имеет 3 состояния: разрешено, отклонено и ожидает выполнения. Асинхронное ожидание не имеет состояний. Он возвращает обещание, либо разрешенное, либо отклоненное. promise.then(fn) продолжает выполнение, пока await ожидает. Обработка ошибок .then() and .catch() и асинхронная try catch. я мог бы продолжить
@ Джоэл, ты не описываешь никаких существенных различий. x = await f(); то же, что f().then(x => {}). Смешение двух концепций не только возможно, это буквально единственный способ работы кода, если вы когда-либо используете await. Бывают случаи, когда вы, вероятно, не хотите смешивать их — при чтении код будет более запутанным, чем нужно. Но просто сказать «они разные, потому что они используют разный синтаксис» — значит упустить лес за деревьями.
@VLAZ "x = await f(); то же самое, что и f().then(x => {})" Нет, это не то же самое. Проверьте здесь простую демонстрацию: stackblitz.com/edit/js-ljkrwn?file=index.js
@ Джоэл, ты пытаешься намеренно исказить мои слова? stackblitz.com/edit/js-mfbfvw?file=index.js Вы должны знать, что await построен на основе промисов. Вы уже сказали это с помощью «Async/Await — это синтаксический сахар для промисов», а затем внезапно дали мне то, что должно пройти как доказательство того, что два не работают одинаково, но вы используете код, который просто не пытается даже пытаться сделать тоже самое. Что вы тут пытаетесь возразить в конечном счете? Между async/await и promise API нет несовместимости.
Люблю дружескую дискуссию, ребята. Вот почему не стоит их смешивать dev.to/maximization/…
response является аргументом вашего первого обратного вызова, он не входит в область действия второго.
Будет намного проще, если вы прекратите использовать then (в общем, вряд ли когда-либо есть веская причина смешивать async/await и then):
const response = await fetch(/* fetch info */)
if (!response.ok && response.status === 403) {
// Stuffs
throw new Error('Exception message') // Raise error to stop the code
}
const data = await response.json()
const result = {
status: response.status,
data
}
Я не. Вы отредактировали свой и дословно скопировали мой.
Я не копировал твой.
Видите, у нас было одно и то же (очевидное) решение, и мы одновременно печатали его :)
...и если вы мне не верите, вы можете проверить временные метки. Я ответил в 07:57:18 и вы добавили решение в редактирование своего ответа в 07:58:19, через одну минуту и одну секунду.
Это... очень тривиальное и прямолинейное преобразование от промисов к просто await синтаксису. В итоге вы получите в основном тот же код. И имена переменных полностью общие и очень распространены для этих случаев использования. Так что я не думаю, что это было скопировано.
попробуйте { const response = await fetch(".."); console.info(ответ.статус); если(response.ok) вернуть response.json(); } catch(err) { /* проделайте здесь свою логику ошибки */}