fetch 로 Json 데이터를 promise Reject 해서 catch 오류를 받을 경우 Json으로 받는방법

 

fetch 로 Json 데이터를
promise Reject 해서
catch 오류를 받을 경우
Json으로 받는방법

상황

• fetch로 Json데이터를 가져오는 api를 호출하는데.. http staus가 정상이 아니면 catch 로 가도록 Promise.reject 시킨다.
• 근데 reject하는 json 객체 안에 error코드가 있는데.. 넘긴 json객체는 안넘어오고 Promise 객체가 넘어왔다.
• reject 시 json객체로 넘기는 방법을 찾아봤다.

fetch('/api/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    body: JSON.stringify(this.formData)
})
.then(function (response) {
	// http state code가 200-299가 아니면 reject
    if(!response.ok){
        return Promise.reject(response.json());
    }
    // 정상처리
    return response.json();
})
.then(function (data) {
	//정상 > json으로 받은 결과로 진행.
	console.log(data);
	...
})
.catch(function (err) {
	//오류 > json으로 받은 오류 코드로 오류 처리.
	console.log(err);
	...
});

 

• 디버깅 해보면..

• 콘솔로 찍어봐도

catch 에서 json으로  못받는다.

 

---

 

처리

• bind 함수를 사용하여 처리

bind 함수
함수를 복사해서 새로운 함수를 만드는데 첫번째 인자로 들어온 값을 this로 만든다.

fetch('/api/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    body: JSON.stringify(this.formData)
})
.then(function (response) {
	// http state code가 200-299가 아니면 reject
    if(!response.ok){
        return response.json().then(Promise.reject.bind(Promise));
    }
    // 정상처리
    return response.json();
})
.then(function (data) {
	//정상 > json으로 받은 결과로 진행.
	console.log(data);
	...
})
.catch(function (err) {
	//오류 > json으로 받은 오류 코드로 오류 처리.
	console.log(err);
	...
});

 

• 정상적으로 Json으로 넘어온다

catch 에서 json으로 제대로 받는다

---

 

• 위에 방법이랑 똑같지만 조금 풀어서 스크립트를 작성해보면 json().then 에 위에 생성한 fn 넣으면 이 fn이 실행되는 promise는 json() 결과로 나온 new 프로미스니까 이걸 강제로 Promise로 bind해준다.

fetch('/api/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    body: JSON.stringify(this.formData)
})
.then(function (response) {
	// http state code가 200-299가 아니면 reject
    if(!response.ok){
        var fn = Promise.reject.bind(Promise);
        // json().then 에 위에 생성한 fn 넣으면 이 fn이 실행되는 promise는 json() 결과로 나온 new 프로미스니까 이걸 강제로 Promise로 bind해준다.  
        return response.json().then(fn)
    }
    // 정상처리
    return response.json();
})
.then(function (data) {
	//정상 > json으로 받은 결과로 진행.
	console.log(data);
	...
})
.catch(function (err) {
	//오류 > json으로 받은 오류 코드로 오류 처리.
	console.log(err);
	...
});

 

• 정상적으로 Json으로 넘어온다

catch 에서 json으로 제대로 받는다

 

---

 

• 비슷하지만 이해하기 쉬운 다른방식으로 스크립트를 짜보면 다음과 같다.

fetch('/api/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    body: JSON.stringify(this.formData)
})
.then(function (response) {
    // http state code가 200-299가 아니면 reject
    const isOk = response.ok;
    return response.json().then((data) => {
        if(isOk) return Promise.resolve(data);
        return Promise.reject(data);
    })
})
.then(function (data) {
	//정상 > json으로 받은 결과로 진행.
	console.log(data);
	...
})
.catch(function (err) {
	//오류 > json으로 받은 오류 코드로 오류 처리.
	console.log(err);
	...
});

 

catch 에서 json으로 제대로 받는다

fetch 사용법 참고

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN

// POST 메서드 구현 예제
async function postData(url = '', data = {}) {
  // 옵션 기본 값은 *로 강조
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE 등
    mode: 'cors', // no-cors, *cors, same-origin
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, *same-origin, omit
    headers: {
      'Content-Type': 'application/json',
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    body: JSON.stringify(data), // body의 데이터 유형은 반드시 "Content-Type" 헤더와 일치해야 함
  });
  return response.json(); // JSON 응답을 네이티브 JavaScript 객체로 파싱
}