(React) Axios (vs Fetch)

Axios 와 Fetch 의 간단한 차이점은 아래와 같다.

• Fetch 는 별도 인스톨 없이 사용가능하나 Axios 는 별도 인스톨 해야 한다.  

npm install axios

• Fetch 는 브라우저 일부에서 지원하지 않고, 반면 Axios 는 모든 브라우저에서 지원한다.
• Axios 가 사용하기 쉽다.
• Axios 는 자동으로 JSON 데이터를 변환시켜 주지만, Fetch 는 .json() 을 사용해 변환한다.
  

fetch('https://myapi.com/')  .then(response => response.json())  .then(console.log);

axios.get('https://myapi.com/')  .then(response => console.log(response.data));

• Axios 는 .catch() 를 사용해 에러 핸들리이 가능하지만 Fetch 는 response 의 ok 프로퍼티를 체크 할 필요가 있다.

그래서 이번 칼럼에서는 Axios 의 사용법에 대해 정리하겠다.

 

기본 샘플

// axios 는 data 를 자동으로 JSON 변환 axios(   "https://myapi/sample",    {    method: 'post',    timeout: 1000,    headers: { 'Authorization': `Bearer ${token}`,  // token 이 있을 경우 "Content-Type": "application/json",    },    data: {      property: "value",    },   } ) // 혹은 간단하게 const data = { property: "value" }; // axios.get, axios.put, axios.delete axios.post("https://myapi/sample", data) // bearer 송신 axios.post('https://myapi/sample', data, {     headers:{         'Authorization': `Bearer ${token}`     } })

 

화일 보내기

// html 부분 <input type="file" onChange={onChange} accept ="image/*"/> // 화일 선택 이벤트 함수 const onChange = (e) => {   let url = "https://myapi/upload";   let file = e.target.files[0];   uploadFile(url, file); }; // 송신 함수 부분 const uploadFile = (url, file) => {   let formData = new FormData();   formData.append("file", file);      axios.post(url, formData, {       headers: {         "Content-Type": "multipart/form-data",       },     }).then((response) => { console.log(response.data) })     .catch((error) => { console.log(error.data) }); };

 

response, error 대응

axios.get('https://myapi.com/')   .then(response => console.log(response.data))   .catch(error => console.log(error.message)) // status code != 200..209

 

배치 대응

const endpoints = [   'http://myapi.com/endpoint1',   'http://myapi.com/endpoint2',   'http://myapi.com/endpoint3', ]; axios.all(   endpoints.map(endpoint => axios.get(endpoint)) ) .then(axios.spread((res1, res2, res3) => {     console.log(res1.data, res2.data, res3.data);   }))

 

비동기(Asysnc)

const fetchData = async() => {     try{         const response = await axios.get("URL");         console.log(response.data);     }     catch(error){         console.log(error);     }     finally { } } // call the function fetchData()