React axios

 

시작하기 | Axios Docs

useEffect과 짝궁과도 같은 라이브러리 Axios.. 비동기 통신을 굉장히 편리하게 해주는 라이브러리이다.

 

하지만 그만큼 에러도 많이 나온다. 그래서 에러를 방지하기 위해서는 공식문서를 자세히 읽어봐야겠다는 생각이 들었다.

 

중요한 것들만 우선적으로 정리하자.

 

Axios

Axios는 HTTP 요청을 위한 JavaScript 라이브러리로, 내부적으로 Promise를 사용한다. 따라서 axios 요청은 Promise를 반환하므로 then, catch, finally와 같은 Promise 메서드를 사용할 수 있다.

 

 

설치

npm install axios

 

인스턴스 만들기

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

 

 

get 요청하기

axios.get(('url'))
.then(()=>{})

 

요청이 실패할때

axios.get(('url'))
.then(()=>{})
.catch((err)=>{console.log(err})

 

에러처리하는 습관을 들이자.

왜? 

 

catch를 하지 않았을때 오류창

catch를 입력하면 음 뭐랄까 어디서 오류가 났는지 바로 알 수 있기 때문에 이렇게 catch를 만들어서 오류를 바로 찾을 수 있도록 항상 오류에 대비하는 코드를 만들어두자. 꼭!!

 

썻을때 오류창

console에 오류 출력되게 해주었다.

 

이렇게 출력해주니 더 편하게 에러를 확인할 수 있다. 

 

 

응용 : 받아온 객체들을 배열에 넣기 위해서는 어떻게 해야할까?

concat이라는 방법도 있고 전개연산자도 가능하다. 

우선 나는 전개연산자를 사용해주었다.

이렇게 copy해주는 습관도 매우 좋은 습관이다.

axios.get(('url'))
.then((res)=>{
    console.log(res.data) // 배열 안에 객체 3개
    console.log(arr) // 배열 안에 객체 3개
    let copy = [...arr, res.data]
    setArr(copy) 
})
.catch((err)=>{console.log(err})

 

 

post 데이터 보내는법

axios.post('URL', {name : 'kim'})

 

동시에 여러개 날리기

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

Using promises - JavaScript | MDN

 

ajax로 가져온 데이터를 html에 넣을때 에러나는 이유

순서

1. axios.get으로 데이터를 가져와서

2. state에 저장하라고 코드를 작성하고

3. html에 넣어서 보여달라고 코드를 작성했는데 오류가 났다면?

순서대로 잘 작성했는데 에러가 나는 이유

 

이유

axios 요청이 html 렌더링이 더 빨라서! 속도 : axios 요청 < html 렌더링

이럴때는 state안에 뭐가 들어있다면 보여달라고 if문을 추가하자!