Axios ?

앙두·2023년 2월 19일

Fetch Interceptor XML ajax axios instance

for My Programming

목록 보기

6/20

🔥 Axios ?

먼저 AJAX에 대해 개념을 알고 가야하는 것 같아서, AJAX를 잠깐 정리하고 가겠다. 👇🏻

AJAX (Asynchronous Javascript And XML) : 비동기식 자바스크립트와 xml

자바스크립트의 라이브러리 중 하나
서버와 통신하기 위해 XMLHttpRequest 객체를 사용
JSON, XML, HTML, 일반 텍스트 형식 등 다양한 포맷을 비동기로 주고받을 수 있음
전체 페이지를 새로 고치지 않고도, 페이지 일부만을 위한 데이터를 로드하는 기법
JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술
자바스크립트를 통해서 서버에 데이터를 요청하는 것
axios 는 HTTP통신의 요구사항을 컴팩트한 패키지로써 사용하기 쉽게 설계 되었다.

( XML : Extensible Markup Language, 웹 사이트, 데이터 베이스 및 타사 애플리케이션과 같은 컴퓨터 시스템 간의 정보 교환을 지원 )
( 비동기 방식 : 웹페이지를 리로드하지 않고 데이터를 불러오는 방식 )

Axios

브라우저와 Node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리.
( HTTP 비동기 통신 라이브러리 )

axios 특징

운영환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
Promise(ES6) API 사용
요청과 응답 데이터의 변형
HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경

(* XMLHttpRequest(XHR) 객체는 페이지의 새로고침 없이도, URL에서 데이터를 가져올 수 있음.
이를 활용하여 사용자의 작업을 방해하지 않고 페이지의 일부를 업데이트할 수 있음!
AJAX 프로그래밍에서 많이 사용됨)

👩🏻‍💻 HOW TO Axios

$ yarn add axios
$ npm i axios

// 프로젝트 상위에 import
import axios from 'axios'

다운로드
HTTP Methods
- GET : 서버에서 어떤 데이터를 가져와서 보여줌
- POST : 서버로 데이터를 보냄
- PUT : DB 내부 내용 갱신
- DELETE : DB 내부 내용 삭제
Methods 를 사용하기 위해 보내야하는 정보
- 어떤 Method ?
- url 주소 ?
- data (optional)
- params (optional)
정석 사용법 👇🏻

axios({
    //request
    
    method: "get",
    url: "url",
    responseType: "type"
}).then(function (response) {
    // response Action
    ...
});

(+) Axios 요청(request) 파라미터 옵션 중
withCredentials : cross-site access-control 요청을 허용 유무. 이를 true로 하면 cross-origin으로 쿠키값 전달 가능

🧚🏻 Axios Instance

Custom 속성을 지닌, 사용자 지정 config로 새로운 axios instance 를 만들 수 있음
Ex)

Const instance = axios.create({
	baseURL: ‘https://domain/api/'
	timeout: 1000,
	header: {‘Custom-Header’ : ‘foobar’}
});

Instance Methods

request, get, delete, head, options, post, put, patch, getUri

🎣 Axios interceptors

api 요청 시 반복되는 부분을 줄일 수 있다.
배포된 서버에 api를 요청할 때 header에 필수적으로 들어가야하는 부분이 있을 경우, 매번 요청때마다 header에 값을 넣어서 처리하는 것이 아닌,
interceptors를 사용해 중간에 api 요청을 가로채서, 자동으로 해당 값이 들어가게끔 하는 것!
-> 매 요청때마다 header에 값을 넣지 않아도 되고, 코드가 간결해진다.

fetch API 랑 Axios 를 비교

Fetch API

const url = 'http://localhost:3000/login'
const option = {
	method:'POST',
    header: {
    	'Content-Type':'application/json';charset=UTF-8'
    },
    body: JSON.stringify({
    	name: 'Ellie',
        say: 'Hello'
    })
    
    fetch(url, options)
    	.then(res => console.log(res))
}

url이 외부에 있고, fetch 함수에 파라미터로 넣어줌. body 사용.

axios

const option = {
	url = 'http://localhost:3000/main'
    	method:'POST',
        header: {
        	'Content-Type':'application/json';charset=UTF-8'
        },
        data:{
        	name: 'Ellie',
            say: 'Boujour'
        }
        
        axios(options)
        	.then(res => console.log(res))
}