Axios와 Promise에 대해 알아보자

Axios란?

프로젝트를 할 때 백엔드와 프론트는 API를 통해서 데이터를 요청하고 응답하면서 통신을 한다.

 

프론트가 주로 사용하는 React는 UI를 만드는 자바스크립트 라이브러리이기 때문에,

통신을 하기 위해서는 따로 라이브러리가 필요한데 그 역할을 하는게 Axios다.

 

즉,  Axios는 Promise 기반 HTTP 비동기 통신 라이브러리이다.

 

비동기로 HTTP 통신을 하게 해주고 REST API에 데이터를 요청할 때, 응답이 오면 promise 객체로 return 해주기 때문에 후속 처리도 간편하다. 

 

그럼 Promise는 뭔데?

Promise는 콜백 지옥을 벗어나기 위해 등장한 비동기 연산의 상태를 나타내는 객체이다.

비동기 처리가 진행중이면 pending, 성공할 경우에는 fullfied, 실패하면 rejected를 반환한다.

 

또한 이 결과를 가지고 후속 처리 메서드(promise.then(), promise.catch(), promise.finally()..)를 통해 프로미스 체이닝을 구성함으로써 콜백 지옥을 벗어날 수 있다. 

 

• promise 성공할 때는 resolve 함수 호출

//프로미스 생성
//1초 delay 시킨 다음에 이행함수(resolve)를 실행
//resolve()를 실행하는 것만으로도 fullfilled 상태가 된다.
const sucessPromise = new Promise(resolve => setTimeout(() => resolve(3), 1000));

sucessPromise.then(n => {
  //성공적으로 promise가 반환되면 이행함수의 파라미터가 전달된다.
  console.log(n);
});

 

• promise 실패할 때는 reject 함수 호출

//reject가 호출되면서 rejected(Promise)가 반환
//그럼 .catch() 메서드로 건 체이닝 함수가 실행된다.
const failPromise = new Promise((reject) => setTimeout(() => reject(new Error()), 1000));

failPromise.then(n => {
  console.log(n);
}).catch(error => {
  console.log(error); //// [object Error] {}
})

 

 

Promise.all은 뭐지?

Promise.all은 여러 비동기 요청을 동시에 실행시키고 모든 비동기 요청이 완료될 때 기다린 후 결과값을 반환하는 메서드이다.

const synchronousPromise = async () => {
    console.time('프로미스 시간');
    await new Promise((resolve) => setTimeout(resolve(1), 3000));
    await new Promise((resolve) => setTimeout(resolve(1), 2000));
    await new Promise((resolve) => setTimeout(resolve(1), 1000));
    console.timeEnd('프로미스 시간');
}

synchronousPromise().then(() => {});

// 프로미스 시간: 6.006s

 

async/await은 한 비동기 요청이 완료될 때까지 기다려주는(동기식) 비동기 처리 패턴식으로,

위와 같이 코드를 실행하면, 3초 기다렸다가 완료, 2초 기다렸다가 완료, 1초 기다렸다가 완료하는 식으로 총 6초가 걸리게된다.

 

그래서 Promise.all을 사용하면

const synchronousPromise = async () => {
    console.time('프로미스 시간');
    await Promise.all([
    	new Promise((resolve) => setTimeout(resolve(1), 3000));
        new Promise((resolve) => setTimeout(resolve(1), 2000));
        new Promise((resolve) => setTimeout(resolve(1), 1000));
    ]);
    console.timeEnd('프로미스 시간');
}

synchronousPromise().then(() => {});

// 프로미스 시간: 3.001s

 

비동기 요청을 모두 다 실행시키고 다 완료되면 결과를 반환하니 가장 오래걸리는 3초만 걸리는 걸 볼 수가 있다.

 

 

 

 

 

참고

Promise.all 과 트랜잭션 (velog.io)

Promise.all 과 트랜잭션

[React] API통신(Axios) (velog.io)

[React] API통신(Axios)

[동기와 비동기] new Promise(resolve => setTimeout(resolve, ms)); 이게 몬데요...?;;; (tistory.com)