오류 처리 방법 fetch()의 비동기/대기
리액트 앱에 스트라이프 비동기 코드가 있어 코드에 오류 처리를 추가하려고 하는데 어떻게 처리해야 할지 모르겠다. .then()으로 하는 방법은 알지만 비동기/ait는 처음입니다.
편집필
응답 탭의 네트워크 탭에서 오류가 발생했는데 콘솔에 기록할 수 있습니까?
submit = async () => {
const { email, price, name, phone, city, street, country } = this.state;
let { token } = await this.props.stripe
.createToken({
name,
address_city: city,
address_line1: street,
address_country: country
})
.catch(err => {
console.log(err.response.data);
});
const data = {
token: token.id,
email,
price,
name,
phone,
city,
street,
country
};
let response = await fetch("/charge/pay", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}).catch(err => {
console.log(err.response.data);
});
console.log(response);
if (response.ok)
this.setState({
complete: true
});
};
감사해요.
Fetch는 네트워크 오류만 검출합니다.기타 오류(401, 400, 500)는 수동으로 검출하여 거부해야 합니다.
await fetch("/charge/pay", headers).then((response) => {
if (response.status >= 400 && response.status < 600) {
throw new Error("Bad response from server");
}
return response;
}).then((returnedResponse) => {
// Your response to manipulate
this.setState({
complete: true
});
}).catch((error) => {
// Your error is here!
console.log(error)
});
이러한 취득 제한에 익숙하지 않은 경우는, Axios 를 사용해 주세요.
var handleError = function (err) {
console.warn(err);
return new Response(JSON.stringify({
code: 400,
message: 'Stupid network Error'
}));
};
var getPost = async function () {
// Get the post data
var post = await (fetch('https://jsonplaceholder.typicode.com/posts/5').catch(handleError));
// Get the author
var response = await (fetch('https://jsonplaceholder.typicode.com/users/' + post.userId).catch(handleError));
if (response.ok) {
return response.json();
} else {
return Promise.reject(response);
}
};
다음 중 하나를 사용할 수 있습니다.try
/catch
일반적인 필수 프로그래밍과 마찬가지로
try {
let response = await fetch("/charge/pay", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
} catch(error) {
// Error handling here!
}
또는 믹스 앤 매치를 할 수도 있습니다..catch()
약속할 때처럼 말이야
let response = await fetch("/charge/pay", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
}).catch(function(error) {
// Error handling here!
});
트라이캐치로 대기시간을 마무리하세요.
try {
let response = await fetch("/charge/pay", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
console.log(response);
} catch (error) {
console.log(error);
}
이것은 서버가 반환된 경우 작동합니다.{ message: "some error" }
하지만 난 그걸 지지하려고 노력중이야res.statusText
또, 다음과 같습니다.
const path = '/api/1/users/me';
const opts = {};
const headers = {};
const body = JSON.stringify({});
const token = localStorage.getItem('token');
if (token) {
headers.Authorization = `Bearer ${token}`;
}
try {
const res = await fetch(path, {
method: opts.method || 'GET',
body,
headers
});
if (res.ok) {
return await (opts.raw ? res.text() : res.json());
}
const err = await res.json();
throw new Error(err.message || err.statusText);
} catch (err) {
throw new Error(err);
}
async function loginWithRedirect(payload: {
username: string;
password: string;
}) {
const resp = await (await fetch(`${env.API_URL}/api/auth/login`, {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify(payload),
credentials: "include",
})).json();
if (resp.error) {
dispatch({type: "ERROR", payload: resp.error.message});
} else {
dispatch({type: "LOGIN", payload: resp});
}
}
response.ok가 false일 경우 다음과 같이 함수를 호출한 후 오류를 발생시키고 chain catch 메서드를 호출할 수 있습니다.
async function fetchData(){
const response = await fetch("/charge/pay", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
if(!response.ok){
const message = `An error occured: ${response.status}`;
throw new Error(message);
}
const data = await response.json();
return data;
}
fetchData()
.catch(err => console.log(err.message));
fetch in async wait 를 사용하는 약속 함수를 씁니다.
const promisyFetch = (url, options) =>
new Promise((resolve, reject) => {
fetch(url, options)
.then((response) => response.text())
.then((result) => resolve(result))
.catch((error) => reject(error));
});
그런데 try catch로 비동기적으로 쉽게 사용할 수 있습니다.
const foo = async()=>{
try {
const result = await promisyFetch('url' requestOptions)
console.log(result)
} catch (error) {
console.log(error)
}
}
간단한 예시로 Promisy를 커스터마이즈할 수 있습니다.원하는 대로 함수를 가져오고 옵션을 요청합니다.
const data = {
token: token.id,
email,
price,
name,
phone,
city,
street,
country
};
axios
.post("/charge/pay", data)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err.response.data);
});
언급URL : https://stackoverflow.com/questions/54163952/async-await-in-fetch-how-to-handle-errors
'programing' 카테고리의 다른 글
Python에서 다소 잘못된 JSON을 해석하는 방법은 무엇입니까? (0) | 2023.04.02 |
---|---|
WordPress에 등록한 후 코어 php로 자동 로그인하는 방법 (0) | 2023.04.02 |
Visual Composer에서 AJAX 콘텐츠 로드 사용 안 함 (0) | 2023.04.02 |
material-ui 날짜 선택기를 사용할 수 없습니다. (0) | 2023.04.02 |
자바스크립트 내부대체가 아닌 HTML 추가 (0) | 2023.04.02 |