[JavaScript] Axios

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

 

Promise 

• 비동기 처리에서 사용되는 객체로, promise가 상태를 관리하여 다른 코드가 비동기적으로 실행될 수 있도록 만드는 객체

Axios

• Promise API를 활용하는 HTTP 비동기 통신 라이브러리

기능

• 브라우저 환경: XMLHttpRequests 요청 생성 
• Node.js 환경: http 요청 생성 
• Promise API 지원 -> then(), catch()등 후속처리 메서드 활용가능
• 요청/응답 차단(Intercept)
• 취소 요청
• JSON 데이터 자동 변환(자동 형변환)
• 사이트간 요청 위조(XSRF) 보호를 위한 클라이언트 사이드 지원(보안성) 

브라우저 호환성이 fetch보다 좋습니다. 

 

설치 방법에는 크게 2가지 npm or yarn(패키지매니저)를 활용하거나 CDN을 사용하여 설치할 수 있습니다. 

 

사용법

GET요청

// ID로 사용자 요청
axios.get('/user?ID=12345')
  // 응답(성공)
  .then(function (response) {
    console.log(response);
  })
  // 응답(실패)
  .catch(function (error) {
    console.log(error);
  })
  // 응답(항상 실행)
  .then(function () {
    // ...
  });
  
  //위와 같은 요청이지만 params 를 따로 빼서 아래와 같이 작성할 수 있습니다.
  axios.get('/user', {
    params: {
      ID: 12345
    }
  })

⭐Async 함수와 같이쓰기

async await - ES8 도입된 promise의 단점을 개선한 비동기 처리 문법, 비동기 코드를 동기 코드처럼 작성할 수 있음 

에러처리 메소드가 따로 없기 때문에 try...catch 구문을 활용하여 에러 핸들링을 함

 

키워드 설명👾

async

• 함수에서 비동기 처리를 위한 promise 동작을 한다는 것을 명시
• 함수 앞에 쓰여지는 키워드로 해당 함수는 항상 Promise 객체를 반환한다. 

await

• 호출되는 함수가 적절한 결과를 반환할 때까지 기다리도록 동작
• 비동기 처리의 결과 값을 기다리고 있는 것임 async 함수 내부에서만 작동한다.

async/ await를 사용할 경우 함수 또는 메서드 앞에 async 키워드를 사용하고 내부에 async 키워드를 사용해 비동기 통신 요청을 처리합니다. async/await 는 오류 디버깅을 위해 try...catch 구문을 사용합니다.

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

멀티 요청

여러 개의 요청을 동시에 수행할 경우 axios.all() 메서드를 사용하면 됩니다. 

(Promise.all() 과 비슷한 듯)

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

API 

axios(config) // 구성(configuration)설정을 axios()에 전달하여 요청할 수 있다.

axios(url[, config]) // axios()에 url전달해 요청할 수 있다.
//선택적으로 config 객체를 2번째 인자로 추가 전달할 수 있다.

// axios() 사용 시

axios({
  url: '/user/12345',
  method: 'put',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

// axios.put() 별칭 메서드 사용 시

axios.put('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})

HTTP 메서드 별칭

HTTP 메서드 별칭이 제공되기 때문에 config에서 url, method 및 data 속성을 지정할 필요가 없습니다. 

axios.get(url[, config])            // GET
axios.post(url[, data[, config]])   // POST
axios.put(url[, data[, config]])    // PUT
axios.patch(url[, data[, config]])  // PATCH
axios.delete(url[, config])         // DELETE

axios.request(config)
axios.head(url[, config])
axios.options(url[, config])

구성 옵션

사용 가능한 구성(config) 설정 옵션

- 더 자세한 구성 설정에 대한 옵션은 공식 문서에 잘 나와있습니다. 참고링크

• 모든 요청에 적용될 구성 기본(Config Defaults) 값을 지정할 수 있습니다. -> 참고링크

// 글로벌 axios 기본(defaults) 설정
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';

url 속성만 필수이고, 나머지 속성은 옵션입니다. method가 지정되지 않으면 디폴트값으로 GET이 세팅됩니다.

{
  // `url`은 요청에 사용될 서버 URL입니다.
  url: '/user',

  // `method`는 요청을 할 때 사용될 메소드 이름입니다.
  method: 'get', // 기본

  // `url` 속성 값이 절대 URL이 아니라면, `url` 앞에 `baseURL`이 붙습니다.
  // axios 인스턴스가 상대 URL을 해당 인스턴스의 메소드에 전달하도록
  // `baseURL`을 설정하는 것이 편리 할 수 있습니다.
  baseURL: 'https://some-domain.com/api/',
  
  }

인스턴스 생성

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

axios.create([config])

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

응답 스키마(Schema)

요청에 따른 응답 결과는 다음 정보가 들어있습니다.

(말이 응답 스키마지 그냥 백엔드로부터 요청에 대한 응답 결과물이라고 생각하면 됩니다.)

{
  // `data`는 서버가 제공한 응답(데이터)입니다.
  data: {},

  // `status`는 서버 응답의 HTTP 상태 코드입니다.
  status: 200,

  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지입니다.
  statusText: 'OK',

  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공됩니다.
  headers: {},

  // `config`는 요청에 대해 `axios`에 설정된 구성(config)입니다.
  config: {},

  // `request`는 응답을 생성한 요청입니다.
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
  request: {}
}

then() 을 사용하면 다음과 같이 응답을 받을 수 있다. 

axios.get('/user/12345')
  .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

⚠ 에러 처리는 catch()를 사용하거나 then의 두번째 전달인자로 reject 콜백을 설정하면 됩니다.
Promise 기반이니까..기본적으로 promise 기능은 다 제공하는 거 같습니다. 응답으로는 error객체를 전달합니다.

⭐인터셉터 

then 이나 catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.

// 요청 인터셉터 추가
axios.interceptors.request.use(
  function (config) {
    // 요청을 보내기 전에 수행할 일
    // ...
    return config;
  },
  function (error) {
    // 오류 요청을 보내기전 수행할 일
    // ...
    return Promise.reject(error);
  });

// 응답 인터셉터 추가
axios.interceptors.response.use(
  function (response) {
    // 응답 데이터를 가공
    // ...
    return response;
  },
  function (error) {
    // 오류 응답을 처리
    // ...
    return Promise.reject(error);
  });

⭐오류 처리

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
    else if (error.request) {
      // 요청이 이루어 졌으나 응답을 받지 못했습니다.
      // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는
      // Node.js의 http.ClientRequest 인스턴스입니다.
      console.log(error.request);
    }
    else {
      // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.
      console.log('Error', error.message);
    }
    console.log(error.config);
  });
  
  
  //config 옵션 validateStatus을 사용하여 사용자 정의 HTTP 상태 코드 오류 범위를 정의할 수 있습니다.
  axios.get('/user/12345', {
  validateStatus: function (status) {
    // 상태 코드가 500 이상일 경우 거부. 나머지(500보다 작은)는 허용.
    return status < 500;
  }
})

Form 전송 주의 사항

기본적으로 axios는 JS 객체를 "JSON"으로 직렬화(serialize)합니다.

application/x-www-form-urlencoded 포맷 대신 데이터를 보내려면 다음 옵션 중 하나를 사용할 수 있습니다. 

옵션 내용은 공식 홈페이지를 통해 확인하시길 바랍니다.

⚠프로미스 호환 문제
axios는 네이티브 ES6 Promise 브라우저 호환성에 따라 달라집니다. 배포 환경이 ES6 Promises를 지원하지 않으면 폴리필 할 수 있습니다.

 

참고 자료:

Axios 공식

Axios | Axios 러닝 가이드