Fetch()

fetch() 를 이용하면 url을 통해 원하는 API의 결과값을 받아올 수 있다.

fetch('https://cataas.com/cat?json=true')
// Promise {<pending>}

콘솔창에 fetch를 입력하면 Promise 라는 결과가 반환된다 (정확히는 Promise 객체가 반환된다).

fetch('https://cataas.com/cat?json=true')
// Promise {<pending>}

이 결과값을 제대로 사용하거나 보기 위해서는 .json()을 사용하여 response를 JSON 으로 바꿔주고, 다시 .then()을 사용해 주어야 한다.

 fetch('http://example.com/movies.json')
  .then((response) => return response.json())
  .then((data) => console.log(data));

json() 메서드까지 사용해야 받아 온 데이터들이 정상적으로 보인다..! 😮

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

Then()

then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다. 하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다.

const promise1 = new Promise((resolve, reject) => {
  resolve('Success!');
});

promise1.then((value) => {
  console.log(value);
  // expected output: "Success!"
});

async & await 기본 문법

async function 함수명(){
	await 비동기_처리_메서드_명();
}

함수의 앞에 async 라는 예약어를 붙인 뒤, HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙인다. 여기서 주의해야 할 점은 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 한다는 것이다. (일반적으로 Axios 등 프로미스를 반환하는 API 호출 함수)

화살표 함수로 사용할 경우, const foo = async () => {} 형식으로 사용한다.

const fetchCat = async (text) => {
  const OPEN_API_DOMAIN = "https://cataas.com";
  const response = await fetch(`${OPEN_API_DOMAIN}/cat/says/${text}?json=true`);
  console.log(response);
  const responseJson = await response.json(); // 응답을 json파일로 변환
  console.log(responseJson.url);
  return `${OPEN_API_DOMAIN}/${responseJson.url}`; // img url을 반환
};

...

async function updateMainCat(value) {        
 const newCatImg = await fetchCat(value);
 console.log(newCatImg);
 setCounter(counter + 1);
 jsonLocalStorage.setItem("counter", counter + 1);
 setCatImg(newCatImg);
}

async 를 통해 데이터를 받아와 사용할 때도 역시 async 를 사용해 준다.

const fetchCat =  (value) => {
  const OPEN_API_DOMAIN = "https://cataas.com";
  return new Promise((resolve,reject)=>{
        fetch(`${OPEN_API_DOMAIN}/cat/says/${value}?json=true`)
  .then((res) => res.json())
  .then((resJson) => 
   resolve(`${OPEN_API_DOMAIN}/${resJson.url}`)).catch(e => console.log('에러!'));
  })
}

같은 코드를 fetch() 를 이용해 적었을 경우. async/await 문법을 사용하면 콜백 지옥을 피할 수 있다.