axios 공식문서 따라서 (일부) 작성하면서 이해하기!

axios-docs

 

 지금까지는 fetch를 사용했지만, 다른 팀원들 전부 axios를 사용했기 때문에 axios를 공부하려고 한다.

흥미로운 점은, (1) 인스턴스를 만들고 (2) 인터셉터를 활용 (3) response에 대한 모듈화(인 것 같았다)

 fetch를 썼던 이유는 추가적인 패키지를 설치할 필요가 없었기 때문이었고 기본적인 GET, POST, DELETE, UPDATE하는데 문제는 없었다.(...)

 나는 fetch(즉, API 통신 부분)를 특별하게 모듈화 하지 않았지만(못했지만..) 일반적으로는 모듈화를 통해 중복코드를 줄이면서, 코드를 분리해 뷰는 뷰만, API는 API 만 집중하도록 만드는 패턴이 자연스러운 것 같다. (MVC로 가는 길)

(프로그래머스 과제관 해설에서도 fetch 사용, 추가적 패키지 설치 안됐..나?)

가장~! 궁금한 부분은 CORS 부분을 config 옵션으로 설정해줄 수 있을까?

*목표는 모듈화 하기.

1. request

(1) 명령어 메소드를 사용하는 방법

(2) 명령어 메소드를 사용하지 않는 방법: config에서 url. method, data 속성을 지정

2. Axios 인스턴스

(1) 사용자 지정 config로 Axios 인스턴스 생성

const instance = axios.create([config])

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

3. 요청 config

// 자주 보이는 config 옵션
{
    url: '/main',
    method: GET,
    baseURL: 'https:// ~ ', //ENDPOINT. url의 공통된 부분. url의 상대적인 부분만 전달하기 위한 값
    headers: {'X-Requested-With': 'XMLHttpRequest'}, //사용자 지정 헤더
    data: {
        firstName: 'Fred'
      },

    // POST 메소드
      // 키가 아닌 값만 전송됩니다.
      data: 'Country=Brasil&City=Belo Horizonte',

    timeout: 1000, //시간을 초과시 요청 중단
    adapter: function (config) {},
    responseType: 'json', // 기본값
    responseEncoding: 'utf8', // 기본값
}

4. 응답 스키마

//response

{
    data: {},
    status: 200,
    statusText: 'OK',
    headers: {}, //예시 response.headers['content-type'],
    config: {},
    request: {}
}

axios.get(url).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);
  });

5. Config 기본값

: 기본적으로 [객체].defaults.[config속성]

(1) 전역 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';

(2) 커스텀 인스턴스 기본값 지정하는 방법

//인스턴스 생성 시 config 기본값 설정하는 방법
const instance = axios.create({
    baseURL: 'https://~',
})

//인스턴스 생성 후 기본값 변경하는 방법
instance.defaults.headers.common['Authorization']=AUTH_TOKEN

6. 인터셉터

: then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다.

=> 사용하는 목적이 뭘까?

[axios 기본객체 또는 인스턴스]의 요청과 응답의 기본 구조. 제거도 가능

[axios/instance].interceptors.[request/response].use(function (response) {
    return [request/response];
  }, function (error) {
    return Promise.reject(error);
  });

(1) 요청 인터셉터: axios.interceptors.request.use()

axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

(2) 응답 인터셉터: axios.interceptors.response.use()

axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

7. 에러 핸들링

=> catch에서 잡힌뒤, error.request 부분이 이해가 안된다. 응답이 수신되지 않는다면 else if문에 잡히지 않을 것 같은데.. XMLHtpRequest 인스턴스를 살펴봐야 할 것 같다.

'OK' 응답을 못받은 경우? 혹은 데이터가 없는 경우?

(1) 기본 에러 핸들링

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'는 브라우저에서 XMLHtpRequest 인스턴스이고,
      // node.js에서는 http.ClientRequest 인스턴스입니다.
      console.log(error.request);
    } else {
      // 오류가 발생한 요청을 설정하는 동안 문제가 발생했습니다.
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

(2) validatesStatus config옵션 사용 시, 오류를 발생시키는 HTTP 코드 정의 가능

=> 모듈화도 가능할까?

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 상태 코드가 500 미만인 경우에만 해결
  }
})

(3) toJSON을 사용하면 HTTP 에러에 대한 더 많은 정보를 객체 형식으로 가져와 확인할 수 있다.

axios.get('/user/12345')
  .catch(function (error) {
    console.log(error.toJSON());
  });

8. 요청 취소

9. URL-인코딩 바디