(8)자바스크립트_리퀘스트_axios문법 + try,catch,finally

● 이론0_리퀘스트 오류 종류 복습 :

○ 종류1 _ 요청하는 url이 이상한 경우 || 헤더 정보가 이상한 경우 //status code : 400, 500

○ 종류2 _ API는 접근했는데, 특정 데이터가 없음

○ fetch()메소드에서 Promise 객체 상태 : 

• 오류 종류1 => Rejected Promises
• 오류 종류2 => Fulfilled Promises

● 이론1_ axios문법에서 반환 Promise 객체 상태는 오류1, 오류2 의 반환이 모두 Rejected된다. //status가 200일때만 fulfilled 된다.

 

＠ fetch+try,catch 예시 코드 :

//API 전부 fetch 하는 메소드
async function fetch_getColorSurveys(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;
}

try{
  const data = await fetch_getColorSurveys(23134);
  
  console.log(data);
  
}catch(error)
{
  console.log('오류가 발생했습니다.');
  console.log(error.message);
}

＠ 출력 상태 :

오류가 발생했습니다.
invalid json response body at https://learn.codeit.kr/api/color-surveys/23134 reason: Unexpected end of JSON input

 

＠ axios + try,catch 예시 코드 :

import axios from 'axios';

//API 전부 fetch 하는 메소드
async function fetch_getColorSurveys(id)
{
  const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`);
  
  return res.data;
  
}

try{
  const data = await fetch_getColorSurveys(23134);
  
  console.log(data);
  
}catch(error)
{
  console.log('오류가 발생했습니다.');
  console.log(error.message);
}

＠ 출력 상태 :

오류가 발생했습니다.
Request failed with status code 404

● 이론2_ axios의 Promise는 response 객체 프로퍼티로 status(객체의 반환 상태 == 오류 정보),data(반환된 API정보의 body 내용)

○ error.status : 오류 정보 code를 반환한다.

○ error.data : 반환된 데이터의 존재성을 출력해준다.

import axios from 'axios';

//API 전부 fetch 하는 메소드
async function fetch_getColorSurveys(id)
{
  const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`);
  
  return res.data;
  
}

try{
  const data = await fetch_getColorSurveys(23134);
  
  console.log(data);
  
}catch(error)
{
	console.logerror.response.status);//어떤 종류의 오류가 났는지 출력 //종류2의 대한것만 출력됨
    console.log(error.response.data);//잘못된 정보의 body 내용 , 존재성 출력
}

 

● 이론3_ axios의 종류1, 종류2까지 구별 가능한 try,catch문

import axios from 'axios';

//API 전부 fetch 하는 메소드
async function fetch_getColorSurveys(id)
{
  const res = await axios.get(`https://learn.codeit.kr/api/color-surveys/${id}`);
  
  return res.data;
  
}

try{
  const data = await fetch_getColorSurveys(23134);
  
  console.log(data);
  
}catch(error)
{
	if(error.response)//response가 있다면, => API 접근은 성공했지만, 찾는 특정 API 데이터가 없다는 뜻
    {
		console.log(error.response.status);//어떤 종류의 오류가 났는지 출력 //종류2의 대한것만 출력됨
    	console.log(error.response.data);//잘못된 정보의 body 내용 , 존재성 출력
	}
    else{//response가 없다면, => 걍 리퀘스트가 실패 (API 접근 실패)
		console.log('리퀘스트가 실패했습니다.');
    }
}