axios

axios

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

이번에 진행했던 auth-session에서 fetch대신 axios를 사용해보았는데 생각보다 간편하고 좋았다👩🏻‍💻
새로운 것을 익힌다는 것은 역시 재밌는 일이다 :)

axios 기능

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

설치

axios를 사용하려면 설치를 진행해야한다.

• node.js 개발 환경에서 npm으로 설치하는 방법

$ npm install axios
# 또는 yarn add axios

사용법

axios 사용법은 fetch와 비슷하다.

GET 요청

const axios = require('axios');

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

// 혹은 아래와 같이 수행 가능

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // ...
  });

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

async function getUser() {
  try {
    const res = await axios.get('/user?Id=12345');
    console.log(res);
  } catch (err) {
    console.log(err);
  }
}

POST 요청

axios.post('/user', {
  firstName: 'Mimi',
  lastName: 'Cho'
})
.then(function (res){
  console.log(res);
})
.catch(function (err){
  console.log(err);
})

API (구성설정)

• HTTP 메서드 별칭

별칭 메서드를 사용하면 설정에서 url,method,data속성을 지정할 필요가 없다.

axios.get(url[, config])            // GET
axios.post(url[, data[, config]])   // POST

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

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

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

// GET 요청 전송 (기본 메서드)
axios('/user/12345');

스프린트에서 사용한 axios

이번 스프린트에서 이러한 방법으로 post 요청을 했었다👩🏻‍💻

// Mypage
axios.post(
  'https://localhost:4000/users/logout', // url
  null, // data
  { 'Content-Type': 'application/json', 
   withCredentials: true 
   // 이친구는 꼭 넣어줘야한다.
   // 다른 도메인이더라도 쿠키가 전송되도록 도와줌
  })
  .then(function (response) {
  props.logoutHandler();
})
  .catch(function (error) {
  console.log(error);
});

// Login
axios.post('https://localhost:4000/users/login',
  {
    userId: this.state.username, 
    password: this.state.password
  },
  {
  'Content-Type':'application/json', 
   withCredentials: true
})
.then((res)=>{
    this.props.loginHandler(true);
    return axios.get('https://localhost:4000/users/userinfo', {
      withCredentials: true
   });
})
.then((res) => {
    let {userId, email} = res.data.data;
    this.props.setUserInfo({
      userId,
      email
   });   
})
 .catch((err) => alert(err))