● 이론0_리퀘스트 오류 종류 //fetch 오류 종류 :
○ 종류1 _ 요청하는 url이 이상한 경우 || 헤더 정보가 이상한 경우
=> 결과: 반환되는 Promise 객체의 상태 : Rejected
○ 종류2 _ 리퀘스트는 성공적이지만, 상태 코드가 이상한 경우 : //ex_ Get하려는 데이터 중 mbti값이 "FUCK", 데이터에 없는 mbti 검색 처리 => Promise 객체의 ok프로퍼티 로 처리한다.
● 이론1_ 오류 종류1 처리하는 방법 => 함수 구현부가 아닌, 호출부분에 try catch finally문 작성
- api.js
//API 전부 fetch 하는 메소드
export async function getColorSurveys()
{
const url = new URL('https://learn.codeit.kr/api/color-surveys');
const res = await fetch(url);
const data = await res.json();
return data;
}
//API에서 limit , offset 설정해서, 데이터 fetch 메소드
export async function getColorSurveyLO(params = {})
{
const url = new URL('https://learn.codeit.kr/api/color-surveys');
Object.keys(params).forEach((key)=>{
url.searchParams.append(key, params[key]);
});
//Object.keys(params) : ["offset", "limit"]
//forEach : ["offset", "limit"].forEach로 배열의 각 원소 하나씩 추출
//url.searchParams.append(key , params[key]) : "offset" , 10 값을 url에 반영
const res = await fetch(url);
const data = await res.json():
return data;
}
export async function getColorSurveyById(id)
{
const url = new URL(`https://learn.codeit.kr/api/color-surveys/${id}`);
const res = await fetch(url);
const data = await res.json();
return data;
}
export async function createColorSurvey(surveyData)
{
const res = fetch('https://learn.codeit.kr/api/color-surveys',{
method : "POST",
body : JSON.stringfy(surveyData),
headers : {
"Content-type" : "application/json",
},
});
}
- main.js
//main.js
import { getColorSurveyLO } from './api.js';
//★오류 종류1인 url, 헤더정보가 잘못된 오류일 경우 => 호출하는 부분에서, try,catch문 처리
//Ex_ limit , offset 10,10 설정에서 오류가 날 경우,
try {
const data = await getColorSurveyLO({ limit: 3, offset: 3 });
console.log(data);
}
catch (error) {
console.log("오류가 났어 병신아");
console.log(error.meesage);
}
finally {
console.log("fetch 종료");
}
● 이론2_ 오류 종류2 처리하는 방법 // 데이터는 fetch 했지만, 데이터 정보가 병신일 경우 =>호출부가 아닌, 구현부에서 작성 => promise 객체 상태로 구별 X , throw 문법으로 ㄱ
- api.js
async function getColorSurveyByMbti(mbti) {
// URL에 mbti 쿼리 파라미터 추가
const url = new URL('https://learn.codeit.kr/api/color-surveys');
url.searchParams.append('mbti', mbti);
// Fetch 요청
const res = await fetch(url, {
method: 'GET', // HTTP 메서드 설정 (기본값이 GET이므로 생략 가능)
});
// HTTP 응답 확인
if (!res.ok) {
throw new Error('데이터를 불러오는데 실패했습니다.');
}
// JSON 데이터 반환
const data = await res.json();
return data;
}
try {
// 올바른 함수 호출
const data = await getColorSurveyByMbti('계엄령령'); // 예: MBTI로 'INTJ' 전달
console.log(data);
} catch (error) {
console.log("오류가 발생했습니다.");
console.log(error.message); // 오타 수정
} finally {
console.log("fetch 종료");
}- 출력 결과 :
오류가 발생했습니다.
데이터를 불러오는데 실패했습니다.
fetch 종료◎ 연습문제 :
실습 설명
리퀘스트는 성공했지만 리스폰스의 상태 코드가 실패를 나타낼 경우 오류를 throw하도록 createAvatar() 함수를 수정했습니다.
[api.js]
export async function createAvatar(avatarData) {
const res = await fetch('https://learn.codeit.kr/api/avatars', {
method: 'POST',
body: JSON.stringify(avatarData),
headers: {
'Content-Type': 'application/json',
},
});
if (!res.ok) {
const message = // 여기에 코드를 작성하세요.
throw new Error(message);
}
const data = await res.json();
return data;
}아바타 API는 오류가 발생했을 경우 오류 메시지를 바디에 전달합니다. 이 오류 메시지는 JSON이 아닌 일반 문자열이기 때문에 res.json() 대신 res.text()를 사용해야 하는데요. 이때res.text()도 결과를 Promise에 담아 줍니다. 이걸 활용해서 오류 메시지를 message 변수에 할당해 주세요. 그러면 상황에 맞는 자세한 오류 메시지를 보여 줄 수 있습니다.
[mbti.js]
try {
const newAvatar = await createAvatar({
hairColor: 'brown',
skin: 'tone200',
clothes: 'hoodie',
accessories: 'earbuds',
});
console.log(newAvatar);
} catch (e) {
console.log(e.message);
}
try {
const newAvatar = await createAvatar({
hairType: 'short2',
hairColor: 'green',
skin: 'tone200',
clothes: 'hoodie',
accessories: 'earbuds',
});
console.log(newAvatar);
} catch (e) {
console.log(e.message);
}첫 번째 리퀘스트는 필수 필드인 hairType이 없고 두 번째 리퀘스트는 hairColor를 유효하지 않은 값인 green으로 설정하고 있습니다. 오류 메시지를 에러 객체에 잘 전달했다면 아래와 같은 결과가 출력돼야 합니다.
실습 결과
Field 'hairType' is required
Value for 'hairColor' must be one of black,brown,blondeAPI가 전달해 주는 오류 메시지를 활용하니까 정확히 어떤 문제가 있는지 쉽게 파악할 수 있죠?
● 해결 전략 :
- 답 :
