항해99 5주차 Weekly I Learn (Axios)

5week Keyword

 

Axios

Axios란?

- node.js와 브라우저를 위한 Promise 기반의 HTTP 비동기 통신 라이브러리로 5가지 종류의 HTTP 메서드를 지원한다.

특징

• 브라우저를 위해 XMLHttpRequests 생성
• node.js를 위해 http 요청 생성
• Promise API를 지원
• 요청 및 응답 인터셉트
• 요청 및 응답 데이터 변환
• 요청 취소
• JSON 데이터 자동 변환
• XSRF를 막기위한 클라이언트 사이드 지원
  (XSRF : 쿠키만으로 인증하는 서비스의 취약점을 이용해, 사용자가 모르게 해당 서비스에 특정 명령을 요청하는 공격)

사용법

- 요청보내기

import axios from "axios";

// axios는 axios.요청타입으로 요청을 보낼 수 있다.
// 예시)
// axios.get(url, config)
// axios.post(url, data, config)

// 어떤 요청을 보낼 지, 별칭 메서드 사용
axios.post('/cat', // 미리 약속한 주소
	{name: 'perl', status: 'cute'}, // 서버가 필요로 하는 데이터를 넘겨주고,
	{headers: { 'Authorization': '내 토큰 보내주기' },} // 누가 요청했는 지 알려줌. (config에서!)
).then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

- api 객체 만들어 관리하기

export const authApi = {
    // e.g) 회원 가입
    signup: someData =>
        instance.post("api/user", {
					someData: someData,
					someOtherData: someOtherData
        }),

    // e.g) 유저 프로필 변경
    editUserProfile: (someData) =>
        instance.put(`api/user/${userId}`, { 
					someData: someData,
					someOtherData: someOtherData
 }),

- 인터셉터

=> 요청을 보내기 전에 같은 요청이 가진 않았는지 확인, 요청에 실패하면 가로채서 재요청을 보낼 수 있다. 

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });