[비동기 프로그래밍] - Axios

Donggu(oo)·2023년 2월 6일

목록 보기

49/49

1. Axios

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리다. Axios는 Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함되어 있다.
Axios는 자동으로 JSON 데이터 형식(문자열)으로 변환된다. fetch처럼 respons.json()의 과정이 필요없다.
Axios는 써드파티 라이브러리이기 때문에 사용하기 위해서는 설치 후 불러와야 한다.

// 설치
npm install axios
// import
import axios from 'axios';

기본 문법
axios({
  method: 'post',
  url: `https://github.com/login/oauth/access_token`,
  headers: {
    // axios는 content type default 값이 application/json이라 생략가능
    'Content-Type': 'application/json',
  },
  data: {
    client_id: CLIENT_ID,
    client_secret: CLIENT_SECRET,
    code: req.body.authorizationCode,
  },
});
매개변수

method : get, post, put, delete 등

url : 접근하고자 하는 URL

headers : 요청 헤더

data : 요청 방식이 PUT, POST, PATCH에 해당하는 경우 body에 보내는 데이터

1) GET(read) 요청

get 메서드는 정보를 요청(조회)위해 사용하는 메서드이다.

get 단축 메서드
axios.get(url[, config])   

axios.get('https://koreanjson.com/users/1')
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error)
  });

axios + promise 방식(reponse 변수명 상관없음, data 변수명 고정)

const getQuestion = () => {
    axios.get('http://localhost:4000/discussions')
        .then((response) => setQuestion(response.data))
};

axios + async/await 방식(reponse 변수명 상관없음, data 변수명 고정)

const getQuestion = async () => {
    const response = await axios.get('http://localhost:4000/discussions')
    setQuestion(response.data)
};

2) POST(create) 요청

post 메서드에서는 일반적으로 데이터를 Message Body에 포함시켜 보낸다.
axios에서도 fetch를 사용할 때처럼 Content-Type을 설정할 수도 있다. 그러나 기본적으로 axios는 Content-Type을 application/json으로 설정하기 때문에 Content-Type이 application/json인 경우 headers를 생략 가능하다.

post 단축 메서드
axios.post(url[, data[, config]])

axios.post('https://koreanjson.com/users', {
  nickName: 'ApeachIcetea',
  age: '20'
})
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error)
  })

axios + promise 방식(reponse 변수명 상관없음, data 변수명 고정)

const handleButtonClick = () => {
    const newQuestion = {
        id: question.length + 10,
        createdAt: new Date(),
        author: author,
        title: title,
        url: "#",
        answer: null,
        avatarUrl: 'https://source.boringavatars.com/beam'
    }
    axios.post('http://localhost:4000/discussions', newQuestion)
        .then((response) => getQuestion(response.data));
};

axios + async/await 방식(reponse 변수명 상관없음, data 변수명 고정)

const handleButtonClick = async () => {
    const newQuestion = {
        id: question.length + 10,
        createdAt: new Date(),
        author: author,
        title: title,
        url: "#",
        answer: null,
        avatarUrl: 'https://source.boringavatars.com/beam'
    }
    const response = await axios.post('http://localhost:4000/discussions', newQuestion)
    getQuestion(response.data)
};

3) PUT(replace) 요청

put 메서드는 해당 정보를 완전 대체하기 위해 사용되는 메서드이다.

put 단축 메서드
axios.put(url[, data[, config]])

axios.put("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

4) PATCH(update) 요청

patch 메서드는 정보를 부분적으로 수정하기 위해 사용되는 메서드이다.

patch 단축 메서드
axios.patch(url[, data[, config]])

axios.patch("url", {
        username: "",
        password: ""
    })
    .then(function (response) {
         // response  
    }).catch(function (error) {
        // 오류발생시 실행
    })

axios + async/await 방식(reponse 변수명 상관없음, data 변수명 고정)

const onClickSubmitButton = async (patchId) => {
    const editTodoList = {
        content: newContent
    }
    const res = await axios.patch(`http://localhost:3001/todos/${patchId}`, editTodoList);
    getTodoData(res.data);
    setEdit(false);
};

PUT과 PATCH의 차이점

PUT은 user data 구조가 id, title, body라고 한다면, 회원정보 수정시 PUT은 id를 찾아 title만 업데이트 하더라도 항상 모든 필드값을 가져와서 모든 필드를 항상 새로운 값으로 교체한다.

PUT은 모든 속성을 수정하기 때문에 title 데이터만 보내주면 원래 있던 id, body 데이터는 사라진다.

PATCH는 user data의 구조가 id, title, body라고 한다면, 회원정보 수정시 PATCH는 id를 찾아 title만 업데이트할때 id와 title만 받아와서해당 부분을 업데이트 한다.

5) DELETE 요청

delete 메서드는 일반적으로 body가 비어있다.

delete 단축 메서드
axios.delete(url[, config])  

axios.delete('/user?ID=12345')
  .then((response) => {
    // handle success
    console.log(response);
  })
  .catch((error) => {
    // handle error
    console.log(error);
  })

axios + promise 방식(response 변수명 상관없음)

const handleDeleteClick = (id) => {
    axios.delete(`http://localhost:4000/discussions/${id}`)
        .then((response) => getQuestion(response))
};

axios + async/await 방식(response 변수명 상관없음)

const handleDeleteClick = async (id) => {
    const response = await axios.delete(`http://localhost:4000/discussions/${id}`)
    getQuestion(response)
};

6) 구성 옵션(config)

사용 가능한 구성(conifg) 설정 옵션이다. url 속성만 필수이고, 나머지 속성은 옵션이다. method가 지정되지 않으면 요청은 GET으로 기본 설정 된다.

6-1. data

data는 요청 본문(request body)으로 전송할 데이터이다.
'PUT', 'POST' 및 'PATCH' 요청 메소드에만 적용 가능하다.
'transformRequest`가 설정되지 않은 경우 아래 유형 중 하나여야 한다.
[ string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams ]
브라우저 전용: FormData, File, Blob
Node.js 전용: Stream, Buffer

{ data: { firstName: 'Fred' } }

6-2. headers

headers는 서버에 전송 될 사용자 정의 헤더이다.
세 번째 인자 값으로 헤더값을 추가한다.

{ headers: { 'X-Requested-With': 'XMLHttpRequest' } }

// 변수로 따로 지정해서 사용할 경우
const headers = {
    'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8',
};
axios.post('url', data, { headers });

{
  // `url`은 요청에 사용될 서버 URL입니다.
  url: '/user',

  // `method`는 요청을 할 때 사용될 메소드 이름입니다.
  method: 'get', // 기본

  // `url` 속성 값이 절대 URL이 아니라면, `url` 앞에 `baseURL`이 붙습니다.
  // axios 인스턴스가 상대 URL을 해당 인스턴스의 메소드에 전달하도록
  // `baseURL`을 설정하는 것이 편리 할 수 있습니다.
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest`는 서버에 보내기 전에 요청 데이터를 변경할 수 있습니다.
  // 요청 메소드 'PUT', 'POST' 및 'PATCH' 에만 적용 가능합니다.
  // 배열의 마지막 함수는 버퍼(buffer)의 문자열이나 인스턴스를 반환해야 합니다.
  // ArrayBuffer, FormData 또는 Stream 헤더 객체를 수정할 수 있습니다.
  transformRequest: [function (data, headers) {
    // 데이터 변환 수행 후, 반환
    // ...
    return data;
  }],

  // `transformResponse`는 응답할 데이터에 대한 변경을 전달해
  // then/catch에 전달하도록 허용합니다.
  transformResponse: [function (data) {
    // 데이터 변환 수행 후, 반환
    // ...
    return data;
  }],

  // `params`는 요청과 함께 전송 될 URL 매개 변수입니다.
  // 일반 객체 이거나 URLSearchParams 객체여야 합니다.
  params: {
    ID: 12345
  },

  // `paramsSerializer`는`params`를 직렬화(serializing) 하는 옵션 함수입니다.
  // (예: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `timeout`은 요청이 타임 아웃되는 밀리 초(ms)를 설정합니다.
  // 요청이`timeout` 설정 시간보다 지연될 경우, 요청은 중단됩니다.
  timeout: 1000, // 기본 값: `0` (타임아웃 없음)

  // `withCredentials`는 자격 증명(credentials)을 사용하여
  // 크로스 사이트 접근 제어(cross-site Access-Control) 요청이 필요한 경우 설정합니다.
  withCredentials: false, // 기본 값

  // `adapter`는 테스트를 보다 쉽게 해주는 커스텀 핸들링 요청을 허용합니다.
  // 유효한 응답(Promise)을 반환해야 합니다. (lib/adapters/README.md 참고).
  adapter: function (config) {
    // ...
  },

  // `auth`는 HTTP 기본 인증(auth)이 사용되며, 자격 증명(credentials)을 제공함을 나타냅니다.
  // 기존의 `Authorization` 커스텀 헤더를 덮어쓰는 `Authorization` 헤더(header)를 설정합니다.
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType`은 서버에서 응답할 데이터 타입을 설정합니다.
  // [ 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream' ]
  responseType: 'json', // 기본 값

  // `responseEncoding`은 응답 디코딩에 사용할 인코딩을 나타냅니다.
  // [주의!] 클라이언트 사이드 요청 또는 `responseType`이 'stream'인 경우는 무시합니다.
  responseEncoding: 'utf8', // 기본 값

  // `xsrfCookieName`은 xsrf 토큰(token)에 대한 값으로 사용할 쿠키 이름입니다.
  xsrfCookieName: 'XSRF-TOKEN', // 기본 값

  // `xsrfHeaderName`은 xsrf 토큰 값을 운반하는 HTTP 헤더 이름입니다.
  xsrfHeaderName: 'X-XSRF-TOKEN', // 기본 값

  // `onUploadProgress`는 업로드 프로그래스 이벤트를 처리합니다.
  onUploadProgress: function (progressEvent) {
    // 네이티브 프로그래스 이벤트(Native Progress Event) 처리 코드
    // ...
  },

  // `onDownloadProgress`는 다운로드 프로그래스 이벤트를 처리합니다.
  onDownloadProgress: function (progressEvent) {
    // 네이티브 프로그래스 이벤트(Native Progress Event) 처리 코드
    // ...
  },

  // `maxContentLength`는 HTTP 응답 콘텐츠의 최대 크기를 바이트(Bytes) 단위로 설정합니다.
  maxContentLength: 2000,

 // `validateStatus`는 주어진 HTTP 응답 상태 코드에 대한 약속을 해결할지 거절 할지를 정의합니다.
 // `validateStatus`가`true`를 반환하면 (또는`null`,`undefined`) promise를 resolve 합니다.
 // 그렇지 않으면 promise가 reject 됩니다.
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 기본 값
  },

  // `maxRedirects`는 Node.js에서 리디렉션 가능한 최대 갯수를 정의합니다.
  // 0으로 설정하면 리디렉션이 수행되지 않습니다.
  maxRedirects: 5, // 기본 값

  // `socketPath`는 Node.js에서 사용될 UNIX 소켓을 정의합니다.
  // 예: '/var/run/docker.sock'을 사용하여 docker 데몬에 요청을 보냅니다.
  // `socketPath` 또는`proxy`만이 지정 될 수 있습니다.
  // 둘 다 지정되면`socketPath`가 사용됩니다.
  socketPath: null, // 기본 값

  // `httpAgent`와`httpsAgent`는 각각 Node.js에서 http와 https 요청을 수행 할 때
  // 사용할 커스텀 에이전트를 정의합니다. 이것은 기본적으로 활성화되지 않은 `keepAlive`와 같은
  // 옵션을 추가 할 수 있게 합니다.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy'는 프록시 서버의 호스트 이름과 포트를 정의합니다.
  // 기존의 `http_proxy` 및 `https_proxy` 환경 변수를 사용하여 프록시를 정의 할 수도 있습니다.
  // 프록시 설정에 환경 변수를 사용하고 있다면 `no_proxy` 환경 변수를 쉼표로 구분 된 도메인 목록으로
  // 정의하여 프록시 할 필요가 없습니다.
  // 환경 변수를 무시하고 프록시를 사용하지 않으려면 `false`를 설정합니다.
  // `auth`는 HTTP 기본 인증(Basic Auth)를 사용하여 프록시에 연결하고 자격 증명을 제공해야 함을 나타냅니다.
  // 기존의 `Proxy-Authorization` 커스텀 헤더를 덮어쓰는 `Proxy-Authorization` 헤더(header)를 설정합니다.
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken`은 요청을 취소하는 데 사용할 수 있는 취소 토큰을 지정합니다.
  // (자세한 내용은 해제(Cancellation) 섹션 참조).
  cancelToken: new CancelToken(function (cancel) {
    // ...
  })

}

Axios 공식 문서

Axios Docs

Axios 러닝 가이드

Donggu(oo)

FE Developer

이전 포스트

[비동기 프로그래밍] - Axios

JavaScript

1. Axios

기본 문법

매개변수

1) GET(read) 요청

get 단축 메서드

2) POST(create) 요청

post 단축 메서드

3) PUT(replace) 요청

put 단축 메서드

4) PATCH(update) 요청

patch 단축 메서드

PUT과 PATCH의 차이점

5) DELETE 요청

delete 단축 메서드

6) 구성 옵션(config)

6-1. data

6-2. headers

Axios 공식 문서

[비동기 프로그래밍] - Fetch

0개의 댓글