fetch의 기본 사용법

Fetch

browser 개발자도구 console에서 
fetch를 사용해도 에러가 나지 않는다 → browser native한 javascript 커맨드

fetch('https://jsonplaceholder.typicode.com/todos')

위 주소로 fetch를 보낼 수 있다.

fetch는 asynchronos function이므로

const data = fetch('...');

이런 식으로 바로 사용할 수 없다.

reponse의 형태는 json format으로 key에 따옴표가 있음 → javascript object과 표기가 다름.

[
    {
        "userId": 1,
        "id": 1,
        "title": "delectus aut autem",
        "completed": false
    },
    {
    ...

promise라서 .then()으로 붙일 수 있다.
보통 Json format으로 온다.

fetch('https://jsonplaceholder.typicode.com/todos')
    .then(res => {
        res.json();
    })

(json으로 parse하는데도 시간이 걸리므로) res.json도 promise이다.
→ res.json waits for download and converts to javascript object format.
return을 붙이고 .then()을 하나 더 붙인다.

fetch('https://jsonplaceholder.typicode.com/todos')
    .then(res => {
        if (!res.ok) {
            console.log('something went wrong')
            return;
        }
        return res.json();
    })
    .then(data => {   // now we get the full data
        console.log(data)
    })
    .catch(error => console.log(error))

network error는 catch에서 받지만
위에 api 주소가 틀려도 res.json를 parse하므로 조건문을 하나 더 넣어준다.
(todos에 s를 지우면 404에러가 나면서 something went wrong이 나옴)

POST request

fetch로 POST request를 하려면

const newUser = {
    name: 'Maria',
    job: 'Teacher'
}

fetch('https://reqres.in/api/users', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(newUser)
}).then(res => {
        if (!res.ok) {
            console.log('something went wrong')
            return;
        }
        return res.json();
    })
    .then(data => {
        console.log(data)
    })
    .catch(error => console.log(error))

Fetch API with Async/Await

async / awaitis a modern syntax and is preferred by many people
Promise라는 객체는 2가지 방식으로 소모를 할 수 있다.

하나는 위에서 본

promise.then()

 

다른 한 가지 방법은 async / await 방식이다.

await promise

To use await you have make an async function.
fetch는 여전히 Promise를 return한다. 단지 syntax가 다를 뿐이다.
Eventually this Promise will be resolved, and we can store it in a constant

export default async function Home() {
// or const Home = async () => {}
  const res = await fetch('https://api-display.x2bee.com/api/display/v1/displayCategory?brandNo=100001');
  const data = await res.json();
  console.log('data', data)

Network error 가 날 경우
→ try catch : try block의 promise가 reject되면 catch block으로 간다.

try {
    const res = await fetch('https://api-display.x2bee.com/api/display/v1/displayCategory?brandNo=100001');
    const data = await res.json();
    if (!res.ok) {
      console.log('somethiing went wrong')
    }
  console.log('data', data)
  } catch (error) {
    console.log(error)
  }

Post request도 마찬가지

const newUser = {
    name: 'John',
    job: 'Carpenter'
  }

  try {
    const res = await fetch('https://api-display.x2bee.com/api/display/v1/displayCategory?brandNo=100001', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(newUser)
    });
    ...

 

예시

fetch code를 분리한다.

src/api/getlist.ts 를 생성

const GetData = async () => {
  try {
    const res = await fetch(
      'https://beta-venus-gw.x2bee.com/api/display/v1/goods?sort=10&pageNo=1&pageSize=20&dispCtgNo=1082'
    );
    const data = await res.json();
    if (!res.ok) {
      console.log('something went wrong');
    }
    const { listData } = data;
    console.log('data', listData);
    return listData;
  } catch (error) {
    console.log(error);
  }
};

export default GetData;

 

page.tsx에서

import Image from 'next/image';
import GetData from '../api/getlist/route';

const ButtonPage = async () => {
  const res = await GetData();
  console.log('res', res);

  return (
    <>
      <div className="m-4 flex flex-wrap">
        {res.map((item: any, idx: number) => (
          <Image
            key={idx}
            alt="images"
            src={`${process.env.API_URL}` + `${item.goodsRepImgPathNm}`}
            width={130}
            height={150}
          />
        ))}
      </div>
      <h1>hello</h1>
    </>
  );
};

export default ButtonPage;

 

.env.development.local 파일에 API_URL을 입력

 

이미지를 가져오는 서버를 next.config.mjs에 명시해주어야한다.

const nextConfig = {
	images: {
		domains: ['img-stg.x2bee.com'],
	},
};