[JavaScript] Rest API

1. 기본 설정 파일만들기 (axios.js)

import axios from 'axios'

export default axios.create({
  baseURL: '기본 url주소를 넣어준다', // 이외에 headers 등 미리 기본설정으로 넣을 수 있다.
});

2. 컴포넌트에서 사용하기

1) GET: 데이터 가져오기

• axios.get(url, config);

const getApi = () => {
  try {
    const { data } = await axios.get('/todos', 
    {
      headers: { 'Authorization': `Bearer ${token}` }, // header는 인증 or 권한부여
    });

    return data;
  } catch(error) {
    alert(`${error.message}\n요청중에 오류가 발생했습니다. 새로고침 후 다시 시도해주세요.`);
  };
};

2) POST: 추가하기 or 수정하기

• axios.post(url, data, config);
• 같은 요청을 2번 전달하면, 2개의 새로운 데이터가 생성. (POST vs PUT)

const postApi = () => {
  try {
    const { data } = await axios.post('/todos', {
      todo: todoInput.current.value
    },
    {
      headers: { 
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json' 
      }
    });

    return data;
  } catch(error) {
    alert(`${error.message}\n요청중에 오류가 발생했습니다. 새로고침 후 다시 시도해주세요.`);
  };
};

3) PUT: 추가하기 or 수정하기 (with 식별자)

• axios.put(url, data, config);
• 같은 요청을 2번 전달하면, 1번은 새로운 데이터가 생성되고 1번은 기존 데이터를 교체한다. 총 1개의 데이터 생성. (POST vs PUT)
• 데이터 객체의 '모든 요소'를 전달해야 제대로 업데이트 된다. 만약, PUT으로 일부의 값만 전달하면, 전달하지 않은 값은 null로 업데이트 된다. (PUT vs PATCH)

const putApi = () => {
  try {
    const { data } = await axios.put(`/todos/${id}`, {
      todo: todo,
      isCompleted: checked
    },
    {
      headers: { 
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json' 
      }
    });

    return data;
  } catch(error) {
    alert(`${error.message}\n요청중에 오류가 발생했습니다. 해당페이지를 종료하고 새로운 페이지로 다시 시도해주세요.`);
  };
};

4) DELETE: 삭제하기

• axios.delete(url, config);

const deleteApi = () => {
  try {
    await axios.delete(`/todos/${id}`, 
    {
      headers: { 'Authorization': `Bearer ${token}` },
    });
  } catch(error) {
    alert(`${error.message}\n요청중에 오류가 발생했습니다. 새로고침 후 다시 시도해주세요.`);
  };
};

5) PATCH: 일부만 수정하기

• axios.patch(url, data, config);
• 데이터 객체의 '일부 요소'만 전달해도 제대로 업데이트 된다. 전달하지 않은 값은 기존값으로 유지된다. (PUT vs PATCH)

const patchApi = () => {
  try {
    await axios.patch(`/todos/${id}`, {
      isCompleted: checked
    },
    {
      headers: { 
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json' 
      }
    });
  } catch(error) {
    alert(`${error.message}\n요청중에 오류가 발생했습니다. 해당페이지를 종료하고 새로운 페이지로 다시 시도해주세요.`);
  };
};

3. URL 주소에 option 사용하기

1) Parameters (config)

• config에 들어가는 요소들. ex) headers.

2) Path parameters

• url에서 경로를 변수처럼 지정하여 요청하는 요소

3) Query parameters (QueryString)

• url에서 ? 뒤에 붙는 query

4) 기본 예시

import axios from 'axios'

export default axios.create({
  baseURL: `https://api.github.com/repos/${OWNER}/${REPO}/issues`, // 2번) Path parameters 예시
});

const getIssuesApi = async (page: number) => {
  try {
    // axios.get(url, config);
    const response = await axios.get(`?state=${STATE}&sort=${SORT}&page=${page}`, // 3번) Query parameters (QueryString) 예시
    {
      headers: { // 1번) Parameters (config) 예시
        'Authorization': `Bearer ${token}`,
        'Accept': 'application/vnd.github+json' 
      }
    });
  } catch(error) {
    alert(`${error.message}\n요청중에 오류가 발생했습니다. 새로고침 후 다시 시도해주세요.`);
  }
};