보통 웹 개발을 할 때는 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에 해당하는 설문 객체가 잘 돌아온다.
//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);
설문 객체도 잘 생성됐다.
'코린이 개념잡기 > 비동기 자바스크립트' 카테고리의 다른 글
| 리퀘스트: 브라우저에서 리퀘스트 확인 (1) | 2024.12.27 |
|---|---|
| 리퀘스트: 오류 해결 (3) | 2024.12.27 |
| 리퀘스트: POST 리퀘스트 보내는 방법 (0) | 2024.12.26 |
| Query String, Path / Query Parameter (0) | 2024.12.26 |
| 리퀘스트: GET 리퀘스트 보내는 방법 (0) | 2024.12.26 |
