TIL 89일차_axios 정리하기

axios 사용법이 워낙 쉬워서
그냥 써오다가 나중에 정리하자 정리하자 했는데,
오늘이 그날이다!!

Request method aliases

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

data가 들어갈 수 있는 method (안들어가도 된다)
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

사용예제

config 인자가 들어간 get 요청

axios.get('/user', {
    params: {
      ID: 12345
    }
  })

promise.all 을 사용한 응답처리

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

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

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

Axios Instance

axios 인스턴스를 만들어서 커스텀 config를 기본값으로 설정해 줄 수 있다.

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

자주쓰이는 config 몇가지들

• url
• method
• baseURL: 'https://some-domain.com/api/'
  인스턴스 생성후 설정해주면 매우 편리!
• headers : {'X-Requested-With': 'XMLHttpRequest'}
• params: {
  ID: 12345
  },
  request때 보내지는 URL의 파라미터이다.
• data: {
  firstName: 'Fred'
  }
• timeout: 1000
  milliseconds. 해당 시간이 지나면 request는 중단된다.
• withCredentials: false (default)
  서버의 cors설정에서 credentials: true 이 설정되어있다면, 이값을 true로 줘야한다.

Response Schema

Response{
data: {},

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: {}
}

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);
  });