Axios

🌱 이번엔 역시나 당연한 듯 사용해왔던 axios의 정확한 의미와 사용법을 정리해둡시다! 🌱

(참고 자료: https://chaeyoung2.tistory.com/51, https://github.com/axios/axios)

1. axios.js

• Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
  -----💥 잠깐!-----
  Promise API가 뭐야?
  비동기, 동기가 뭐야?
  (--> 다음 글에 정리해두었습니다!)
• Ajax, fetch와 같은 웹 통신 기능을 제공하는 라이브러리
• HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동으로 변경해 줌
• 브라우저 호환성이 뛰어남

2. axios 사용 및 예시

• 설치 npm install axios
• 기본 형태: get, post + other HTTP method

axios.get('/url')
.then(function(response){
 // 성공한 경우 실행
 })
.catch(function (error){
  // 에러인 경우 실행
})
.then(function (){
  // 항상 실행
});

axios.get('/url', {
  params: {
    name: 'value'
  }
})
.then(function(response){
 // 성공한 경우 실행
 })
.catch(function (error){
  // 에러인 경우 실행
})
.then(function (){
  // 항상 실행
});

axios({
  method: 'get',
  url: '/url',
  params: {
    name: 'value'
  }
})
.then(function(response){
 // 성공한 경우 실행
 })
.catch(function (error){
  // 에러인 경우 실행
});

• other HTTP method: head, delete, options, put, patch

3. Request 설정

• https://github.com/axios/axios 참고하기!

{
  // `url` is the server URL that will be used for the request
  url: '/user',

  // `method` is the request method to be used when making the request
  method: 'get', // default

  // `baseURL` will be prepended to `url` unless `url` is absolute.
  // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
  // to methods of that instance.
  baseURL: 'https://some-domain.com/api/',

  // `headers` are custom headers to be sent
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` are the URL parameters to be sent with the request
  // Must be a plain object or a URLSearchParams object
  params: {
    ID: 12345
  },

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
  // When no `transformRequest` is set, must be of one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // syntax alternative to send data into the body
  // method post
  // only the value is sent, not the key
  data: 'Country=Brasil&City=Belo Horizonte',

  // HTTP Basic 인증
  // `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
  // This will set an `Authorization` header, overwriting any existing
  // `Authorization` custom headers you have set using `headers`.
  // Please note that only HTTP Basic auth is configurable through this parameter.
  // For Bearer tokens and such, use `Authorization` custom headers instead.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` indicates the type of data that the server will respond with
  // options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
  //   browser only: 'blob'
  responseType: 'json', // default

  // `responseEncoding` indicates encoding to use for decoding responses (Node.js only)
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

}

• url, method, baseURL, headers, params, data, auth, responseType, responseEncoding

4. 응답 스키마

{
  // `data` is the response that was provided by the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the HTTP headers that the server responded with
  // All header names are lower cased and can be accessed using the bracket notation.
  // Example: `response.headers['content-type']`
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {},

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance in the browser
  request: {}
}

• data, status, statusText, headers, config, request

+) 이번 플젝에서 헤맸던 form-data POST 정리해두기

• multipart는 단순 json 형태로 넣지 말고, FormData사용하기!!!

const form = new FormData();
form.append('k1','v1');
form.append('k2','v2');

axios({
  url: '/url',
  method: 'post,
  data: form
})
.then( ...

-> 이번 플젝에서 서버로 오디오파일 전송할 때 FormData 형식을 몰라 몇시간을 날렸었다.. 정확히 알아둡시다🐬!