리퀘스트: API 함수 만들기

보통 웹 개발을 할 때는 aPI를 호출하는 함수들을 따로 모아두고 필요할 때 import해서 사용한다.

//api.js
//GET/api/color-surveys를 하는 함수부터 만들어보자.
export async function getColorSurveys() {
  const url = new URL('https://learn.codeit.kr/api/color-surveys');
  url.searchParams.append('offset', 10);
  url.searchParams.append('limit', 10);
  
  const res = await fetch(url);
  const data = await res.json();

  return data;
}

함수 안에서 await을 사용하니 async 키워드도 추가해주고, 데이터를 리턴하는것으로 바꿔주었다. 그리고 위 코드에선 쿼리 파라미터가 고정되어 있는데 쿼리파라미터를 함수 파라미터로 대신 받도록 바꿔준다.

//api.js
export async function getColorSurveys(params = {}) {
  const url = new URL('https://learn.codeit.kr/api/color-surveys');
  object.keys(params).forEach((key) =>
    url.searchParams.append(key, params[key])
  );
  
  const res = await fetch(url);
  const data = await res.json();

  return data;
}

params 객체의 프로퍼티를 돌면서 url.searchParams에 추가해 주는 코드이다. 예를 들어 params에 이런 객체( params = { offset: 5, limit: 10}; )가 전달된다면 url.searchParams에 offset은 5, limit은 10이 추가된다.

이제 이 함수를 import해서 사용하면 되는데 main.js에서 나머지 코드 부분을 코멘트 처리하고 코드를 작성해준다.

//main.js
import { getColorSurveys } from './api.js';

const data = await getColorSurveys(); //async 함수는 promise를 리턴하기 때문에 앞에 await을 적어준다.
console.log(data);

이 상태로 실행해봐도 이전과 같이 리스폰스가 잘 출력된다.  여기에서 쿼리 파라미터도 바로 사용할 수 있는데

//main.js
import { getColorSurveys } from './api.js';

const data = await getColorSurveys({ offset:20, limit:20 });
console.log(data);

결과값

이번엔 offset과 limit에 따라 next와 previous의 값이 돌아오고, 결과도 총 20개가 돌아온다.

// api.js
// GET/api/color-surveys를 하는 함수
export async function getColorSurveys(params = {}) {
  const url = new URL('https://learn.codeit.kr/api/color-surveys');
  object.keys(params).forEach((key) =>
    url.searchParams.append(key, params[key])
  );
  
  const res = await fetch(url);
  const data = await res.json();

  return data;
}

// GET/api/color-surveys/:id
export async function getColorSurvey(id) {
  const res = await fetch(`https://learn.codeit.kr/api/color-surveys/${id}`);
  const data = await res.json();
  return data;
}

// POST/api/color-surveys
export async function createColorSurvey(sueveyData) {
  const res = await fetch('https://learn.codeit.kr/api/color-surveys', {
    method: 'POST',
    body: JSON.stringify(surveyData),
    headers: {
      'Content-Type': 'application/json'
    }
  });

  const data = await res.json();
  return data;
}

main.js에 적혀있던 코멘트한 리퀘스트 함수들을 api.js 파일로 긁어와서 구분, 작성해준 뒤 실행을 시켜보도록 하자.

//main.js
import { getColorSurveys, getColorSurvey, createColorSurvey } from './api.js'; //함수들을 import하고

const data = await getColorSurvey(10); //getColorSurvey에 id 10을 전달
console.log(data);

테스트용으로 getColorSurvey에 id 10을 전달해보았다. 

id: 10

id 10에 해당하는 설문 객체가 잘 돌아온다. 

//main.js
import { getColorSurveys, getColorSurvey, createColorSurvey } from './api.js';

// 새로운 설문 객체를 만들어보자.
const surveyData = {
  mbti: 'ENFJ',
  colorCode: '#ABCD00',
  password: '0000'
};

const data = await createColorSurvey(surveyData); 
console.log(data);

설문 객체 생성 완료!

설문 객체도 잘 생성됐다.