Promise

Promise

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.
비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미한다.

자바스크립트는 비동기 처리를 위해 콜백을 사용하였는데, 너무 남용하게 되면 우리가 흔히 부르는 콜백 지옥에 빠질 수가 있다.
또한 에러처리도 힘들 뿐더러 여러개의 비동기 처리를 한번에 하는데 한계가 있다.
이런 콜백 함수의 단점을 보완하며 나온것이 프로미스이다.

프로미스는 객체이기 때문에 생성자 함수를 호출하여 인스턴스화할 수 잇다.
프로미스의 생성자 함수는 resolve와 reject함수를 인자로 전달받는 콜백함수를 인자로 전달 받는다.
프로미스는 인자로 전달받은 콜백 함수를 내부에서 비동기 처리한다.

프로미스는 비동기 처리의 성공한 경우 resolve가 호출되고, 실패할 경우 reject가 호출된다.
그 다음 프로미스의 후속 처리 메서드인 then, catch를 통해 비동기 처리 결과를 전달받아 처리한다.

const promise = () => new Promise((resolve, reject) => {
  const a = 1 + 1
  
  if(a === 2) {
    resolve('성공')
  } else {
    reject('실패')
  }
})

promise.then((res) => {
  console.log('then: ' + res)
}).catch((err) => {
  console.log('catch: ' + err)
})

후속 처리 메서드

프로미스로 구현된 비동기 함수를 호출하는 측에서 프로미스 객체의 후속 처리 메서드를 통해 비동기 처리 결과 또는 에러메시지를 받아 처리한다.

• then
  • then 메서드는 두 개의 콜백함수를 인자로 전달 받는다.
  • 첫 번째 콜백 함수는 성공시에 실행된다.
  • 두 번째 콜백하는 실패시에 실행된다.
  • then 메서드는 기본적으로 프로미스를 반환한다.
• catch
  • catch 메서드는 비동기 처리 혹은 then 메서드 실행 중 에러가 발생하면 호출된다.
  • catch 메서드 역시 프로미스를 반환한다.

axios

비동기 처리는 보통 api를 요청할 때 자주 사용된다.
이때 promise로 만들어진 aixos라는 라이브러리를 사용하면 비동기 통신을 쉽게 할 수 있다.

먼저 axios는 브라우저 또는 Node.js를 위한 HTTP 비동기 통신 라이브러리이다.
이미 자바스크립트에서 fetch api가 존재하지만, 프레임워크에서 ajax를 구현할 때 axios를 쓰는 편이라고 보면 된다.
axios는 npm에서 받아 사용하면 되고 쉽게 사용할 수 있다.

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

axios의 get 요청 방식이다.
axios 또한 프로미스로 만들어진 것이기에 후속 처리 메서드를 사용할 수 있다.

axios.post('url/enpoint', {
  email: 'asd@asd.com',
  password: '1234'
}).then((res) => {
  console.log(res)
}).catch((err) => {
  console.log(err)
})

위는 axios의 post 메서드를 이용한 post 요청이다.
post나 put을 요청할 때는 요청 주소 뒤에 넣어주고 싶은 데이터를 넣어준다.

async/await

비동기처리를 동기로 변경시켜줄수 있는 방법이 있다.
async와 await는 요청이가고 완료 될 때까지 아래 코드가 실행되지 않는다.
사용방법은 간단하다.

const aaa = async () => {
  const result = await axios.get('url/endpoint')
  console.log(result)
}

위와 같이 async/await를 넣어주면 요청이 완료되고 결과를 받을때까지 다음 로직이 실행되지 않고 결과를 가지고 와서 사용할 수 있다.

참고: [JavaScript] 프로미스(Promise)란, [AXIOS] 📚 axios 설치 & 특징 & 문법