AXIOS를 통한 서버연결

Axios란?

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다. - 정식문서 

 

이번 항해에서 백엔드와 협업으로 미니프로젝트를 진행 했습니다. 서로 언어가 다르다 보니깐 서로 오해도 있었고 힘든 점도 많았지만 그래도 서로 부족한 점을 보완하면서 진행했습니다. axios에 대해서 많은 걸 배울수 있었고 instance를 제작하고 interceptors로 결과값 과 에러를 처리하는 방법을 사용해 봤습니다. 

 

베이직 axios 코드 

import axios from 'axios'

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });

// 선택적으로 위의 요청은 다음과 같이 수행될 수 있습니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // 항상 실행되는 영역
  });  

// async/await 사용을 원한다면, 함수 외부에 `async` 키워드를 추가하세요.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

 

 - instance로 axios를 가지고 관리되는 코드 

api / instance.js

import axios from "axios";
import { getCookie } from "./Cookie";
const USER_TOKEN = getCookie("Authorization");

const instance = axios.create({
  timeou: 1000,
  headers: {
  // 브라우저 쿠키에 저장된 토큰을 가져와서 명칭과 함께 header에 저장해서 전송합니다.
    Authorization: USER_TOKEN,
  // 추가적인 정보를 가지고 저장합니다.
    "content-type": "application/json;charset=UTF-8",
    accept: "application/json",
  },
});
// 도메인 설정 
instance.defaults.baseURL = "연결 할 백엔드 퍼블릭 도메인";

//interceptors를 POST요청 가지고 결과 값을 캐치해서 return 합니다.
instance.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);

//interceptors를 GET요청 가지고 결과 값을 캐치해서 return 합니다.
instance.interceptors.response.use(
  response => {
    const res = response.data;
    return res;
  },
  error => {
    console.log(error);
    return Promise.reject(error);
  }
);

export default instance;

 

 - instance로 관리되는 코드

/ api / todoCRUD.js 

import instance from "./instance";

export function PostAddList(Id, Data) {
  return instance({
    method: "POST",
    url: `/api/${Id}/detail/todolist`,
    data: Data,
  });
}
export function PutFixList(cardId, Data) {
  return instance({
    method: "PUT",
    url: `/api/${cardId}/detail/update`,
    data: Data,
  });
}
export function DelectList(cardId, textId) {
  return instance({
    method: "DELETE",
    url: `/api/${cardId}/detail/delete/${textId}`,
  });
}
export function LoadList() {
  return instance({
    method: "GET",
    url: `/api/cards/`,
  });
}