WIL axios 개념

정재연·2022년 2월 13일

axios

WIL

목록 보기

3/4

1.axios란

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

기능

브라우저 환경: *XMLHttpRequests 요청 생성
Node.js 환경: http 요청 생성
Promise API 지원
요청/응답 차단(Intercept)
요청/응답 데이터 변환
취소 요청
JSON 데이터 자동 변환
사이트 간 요청 위조(XSRF) 보호를 위한 클라이언트 사이드 지원

*XMLHttpRequest(XHR) 객체는 **서버와 상호작용**하기 위하여 사용됩니다.
전체 페이지의 **새로고침없이**도 **URL** 로부터 **데이터**를 받아올 수 있습니다.
이는 웹 페이지가 사용자가 하고 있는 것을 방해하지 않으면서 **페이지의 일부를 업데이트**할 수 있도록 해줍니다.

특징

요청 객체에 url이 있다.
써드파티 라이브러리로 설치가 필요
data 속성 사용
data는 object를 포함
status가 200, statusText가 ‘OK’이면 성공
요청에 타임아웃을 걸 수 있다.
HTTP 요청을 가로챌수 있음
download 진행에 대해 기본적인 지원을 함
좀더 많은 브라우저에 지원

axios
axios개념

2.사용법

const axios = require('axios');

// ID로 사용자 요청
axios.get('/user?ID=12345')
  // 응답(성공)
  .then(function (response) {
    console.log(response);
  })
  // 응답(실패)
  .catch(function (error) {
    console.log(error);
  })
  // 응답(항상 실행)
  .then(function () {
    // ...
  });

post

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
  //post요청이 성공했을 때,
    console.log(response);
  })
  .catch(function (error) {
  //post 요청이 실패했을 때,
    console.log(error);
  });

3. 인스턴스

인스턴스란 이해하기 쉽게, 붕어빵틀로 만들어진 붕어빵이라고 생각하면 이해하기 쉽습니다.
만들어진 붕어빵 안에는 팥이 들어있을 수도, 슈크림이 들어있을 수도 있습니다.
내용물(프로퍼티)은 다르지만, 구워지는 같은 동작(매서드)이 빈행되면서 붕어빵을 만드는 과정을 인스턴스화 된다라고 합니다.

인스턴스란?
인스턴스란2

.create() 메서드를 사용해 사용자 정의 구성을 사용하는 axios 인스턴스를 생성할 수 있습니다.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  // `headers`는 서버에 전송 될 사용자 정의 헤더 입니다.
  headers: { 'X-Custom-Header': 'foobar' },
  //`timeout`은 요청이 타임 아웃되는 밀리 초(ms)를 설정합니다.
  // 요청이`timeout` 설정 시간보다 지연될 경우, 요청은 중단됩니다.
  timeout: 1000,
});

4. axios 인스턴스 사용

// api.js
import axios from "axios";

//axios 인스턴스 생성
const api = axios.create({
  baseURL: "http://localhost:3000",
});

//test url
const TEST_URL = (site) => `http://localhost:3003/${site}`;

// apis 객체
export const apis = {
  signup: ({ id, email, pwd, nickname }) =>
    api.post(TEST_URL("signup"), {
      login_id: id,
      email: email,
      password: pwd,
      nickname: nickname,
    }),
  login: ({ id, pwd }) =>
    api.post(TEST_URL("login"), {
      login_id: id,
      password: pwd,
    }),
};

// redux/user.js 
import { apis } from "../api";

// 미들웨어
const loginActionApi = (id, pwd) => {
  return function (dispatch) {
    apis
      .login(id, pwd)
      .then((res) => {
        alert(`${id}님 반갑습니다!`);
        dispatch.setUser({
          login_id: id,
          password: pwd,
        });
      })
      .catch(() => {
        alert("로그인에 실패하였습니다.");
      });
  };
};