[백엔드] fetch / axios 비교
코드예시를 통해 fetch와 axios의 차이점을 살펴본다.
1-1. fetch
- react-native에 적합한 함수.
- fetch는 url를 인자로 전달받는다.
- 주어진 url의 res를 전달하며, json data형식으로 반환한다.
- 반환(return)하는 res는 body 속성을 지닌다.
1-2. 코드예시
- url 정의
- fetch를 통해 url를 전달받아, 해당 url에 대한 res를 body 속성으로 반환한다.
const API_URL = "https://yts.mx/api/v2/list_movies.json"
//API control
export const checkmovie = () =>
//Can get whole data by async operation
fetch(API_URL)
.then(res => res.json())
.then(json => json.data.movies)
2-1. axios
- fetch보다 빠르고 호환하는 브라우저가 더 많다.
- axios는 url인자가 따로 없고, option 객체로 들어간다.
- fetch와 마찬가지로 res를 전달하며, json data형식으로 반환한다.
- 반환하는 res는 data 속성을 지닌다.
2-2. axios 기본포맷
//axios
const option ={
url ='http://localhost3000/test`
method:'POST',
header:{
'Accept':'application/json',
'Content-Type':'application/json';charset=UTP-8'
},
data:{
name:'sewon',
age:20
}
axios(options)
.then(response => console.log(response))
2-3. axios 코드예시(fetch와 비교)
- axios.get('url')을 통해 원하는 정보를 얻을 data의 경로를 탐색한다.
※ API를 통해 보여지는 화면이 아닌, 반드시 CLI 환경으로 정확한 경로를 알아야 한다.
export const seemovie = async () => {
const movies = await axios.get('https://yts.mx/api/v2/list_movies.json')
console.log(movies)
}
- data : { data : movies }에 얻고자 하는 정보가 모여있음을 확인한다.
- 확인한 경로 그대로 data를 불러온다.
//seemovie by axios
export const seemovie = async (id) => {
//const movies = await axios.get('https://yts.mx/api/v2/list_movies.json')
//console.log(movies)
const{
data:{
data: {movies}
}
//data params (by then or callback)
}
- 비동기처리(Ajax, 여기서는 then 혹은 callback)를 통해 axios URL을 받아온다.
- 아래 params는 정제된 데이터를 의미하는데, movie_id : id 라는 조건으로 선별된 데이터를 확보하도록 장치해주었다.
//seemovie by axios
export const seemovie = async (id) => {
//const movies = await axios.get('https://yts.mx/api/v2/list_movies.json')
//console.log(movies)
const{
data:{
data: {movies}
}
//data params (by then or callback)
}
//ajax
= await axios('https://yts.mx/api/v2/list_movies.json', {
params: {
movie_id : id
}
})
return movies
}
- 최종적으로 선별된 데이터는 movies에 담겨 GraphQL API을 통해 보여진다.
3. 참조링크
https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API
https://sigcho.tistory.com/126
Author And Source
이 문제에 관하여([백엔드] fetch / axios 비교), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gyrbs22/백엔드-fetch와-axois-코드의-차이저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)