Axios

Axios

브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리

특징

• 브라우저를 위해 XMLHttpRequests 생성

• node.js를 위해 http 요청 생성

• Promise API 지원

• 요청 및 응답 인터셉트

• 요청 및 응답 데이터 변환

• 요청 취소

• JSON 데이터 자동 변환

• XSRF를 막기위한 클라이언트 사이드 지원

설치

$ yarn add axios
$ npm install axios

Axios API

axios(config)

// POST 요청 전송
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios(url[,config])

// GET 요청 전송 (기본값)
axios('/user/12345');

• axios.request(config)

• axios.get(url[, config])

• axios.delete(url[, config])

• axios.head(url[, config])

• axios.options(url[, config])

• axios.post(url[, data[, config]])

• axios.put(url[, data[, config]])

• axios.patch(url[, data[, config]])

// POST 요청 전송
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

// POST 요청 전송
axios.post('/user/12345', {
	firstName: 'Fred',
  lastName: 'Flintstone'
})

Axios 인스턴스

axios.create([config])

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

요청 config

url

axios({ url: '/user' })

method

• get

• post

• delete

• patch

• put …

axios({ method: 'get' })

baseURL

axios({ baseURL: 'https://some-domain.com/api' })

transformRequest

transformRequest: [function (data, headers) {
  // 데이터를 변환하려는 작업 수행

  return data;
}],

transformResponse

transformResponse: [function (data) {
  // 데이터를 변환하려는 작업 수행

  return data;
}],

headers

headers: {'X-Requested-With': 'XMLHttpRequest'},

params

params: {
  ID: 12345
},

응답 스키마

{
  // `data`는 서버가 제공하는 응답입니다.
  data: {},

  // `status`는 HTTP 상태 코드입니다.
  status: 200,

  // `statusText`는 HTTP 상태 메시지입니다.
  statusText: 'OK',

  // `headers`는 HTTP 헤더입니다.
  // 모든 헤더 이름은 소문자이며, 괄호 표기법을 사용하여 접근할 수 있습니다.
  // 예시: `response.headers['content-type']`
  headers: {},

  // `config`는 요청을 위해 `Axios`가 제공하는 구성입니다.
  config: {},

  // `request`는 이번 응답으로 생성된 요청입니다.
  // 이것은 node.js에서 마지막 ClientRequest 인스턴스 입니다.
  // 브라우저에서는 XMLHttpRequest입니다.
  request: {}
}

Config 기본값

전역 Axios 기본값

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

커스텀 인스턴스 기본값

// 인스턴스를 생성할때 config 기본값 설정하기
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 인스턴스를 만든 후 기본값 변경하기
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

Config 우선 순위

1. instance config 인자

2. 인스턴스 defaults

3. axios 자체 기본 값

// 라이브러리에서 제공하는 config 기본값을 사용하여 인스턴스 만들기
// 이 때 timeout 값은 라이브러리의 기본값인 '0'입니다.
const instance = axios.create();

// 라이브러리에 대한 timeout 값 재정의
// 이제 모든 요청은 시간 초과 전 2.5초 대기하는 인스턴스를 사용합니다.
instance.defaults.timeout = 2500;

// 시간이 오래 걸리는 요청에 대한 timeout 값 재정의
instance.get('/longRequest', {
  timeout: 5000
});

인터셉터(interceptor)

// 요청 인터셉터 추가하기 -> 요청 전 수행
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);
  });

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

요청 취소

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 에러 핸들링
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 요청 취소하기 (메시지 파라미터는 옵션입니다)
source.cancel('Operation canceled by the user.');

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // 실행자 함수는 취소 함수를 파라미터로 받습니다.
    cancel = c;
  })
});

// 요청 취소하기
cancel();

Axios vs Fetch

문법

fetch(url);
axios(url)

fetch(url, {
  method: "GET", // 다른 옵션도 가능합니다 (POST, PUT, DELETE, etc.)
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({}),
});

axios(url, {
  method: "get", // 다른 옵션도 가능합니다 (post, put, delete, etc.)
  headers: {},
  data: {},
});

axios({
  method: "get",
  url: url,
  headers: {},
  data: {},
});

axios.get(url, {
  // 설정 옵션
});

JSON 변환

const url = "https://jsonplaceholder.typicode.com/todos";

fetch(url)
  .then((response) => response.json())
  .then((data)=> console.log(data));

const url = "https://jsonplaceholder.typicode.com/todos";

axios.get(url).then((response) => console.log(response.data));

axios.get(url, {
  responseType: "json", // options: 'arraybuffer', 'document', 'blob', 'text', 'stream'
});

문자열 변환

const url = "https://jsonplaceholder.typicode.com/todos";

const todo = {
  title: "A new todo",
  completed: false,
};

axios
  .post(url, {
    headers: {
      "Content-Type": "application/json",
    },
    data: todo,
  })
  .then(console.log);

const url = "https://jsonplaceholder.typicode.com/todos";

const todo = {
  title: "A new todo",
  completed: false,
};

fetch(url, {
  method: "post",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(todo),
})
  .then((response) => response.json())
  .then((data) => console.log(data));

성능

정리

마무리

References

시작하기 | Axios Docs

브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리

https://axios-http.com/kr/docs/intro

[번역] 입문자를 위한 Axios vs Fetch

Axios와 Fetch API에 대해 소개하고 비교하는 글입니다. 제목에서도 알 수 있듯이 설치방법 부터 간단한 성능 비교까지 기본적인 내용들을 다루고 있습니다.

https://velog.io/@eunbinn/Axios-vs-Fetch