Promise
Promise는 자바스크립트에서 '비동기를 간편하게 처리해주는 "객체"
🔊비동기처리란! 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 것을 말한다.
Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용된다.
Promise를 사용하지 않으면, 서버를 통해 데이터를 받아오기도 전에 데이터를 화면에 표시하려고 하게되어(동기적으로 실행되므로) 오류가 발생하거나 빈 화면이 뜨게 된다. 이 같은 문제를 해결하기 위해 Promise를 사용한다.
Promise는 세 가지 상태(state)를 가진다.
-대기(pending):비동기 처리가 아직 완료되지 않음
-이행(fulfilled): 비동기 처리가 완료되어 프로미스 결괏값을 반환
-거부(rejected): 실패 또는 오류 발생
promise객체는 콜백함수의 인자로 resolve와 reject를 가지는데,
resolve( )가 실행되면, promise state가 이행(fulfilled)으로 바뀐다.
reject( )가 실행되면, promise state가 거부(rejected)로 바뀐다.
아래 코드를 실행해 보자
const p = new Promise((resolve, reject) => {
setTimeout(( ) => {
resolve(1);
}, 3000);
});
console.log("그냥 실행")
p.then(n => {
console.log(n);
console.log("3초 기다렸다가 실행")
});
이행 상태일 때는 then 거부 상태일 때는 catch로 등록한 동작들이 실행된다.
그래서 프로미스는 catch()로 에러 처리가 가능하다는 장점이 있다.(callback과의 차이)
프로미스는 프로미스 객체에 비동기 처리된 결괏값이 저장되어 .then메소드를 통해 저장되어 있는 값을 원하는 때에 사용 가능하다.
Async/Await
Async / Await 이란?
promise의 문법을 간단하게 만든 것으로,
callback이나 promise와 같이 비동키 코드를 작성하는 새로운 방법이다.
Async / Await을 이용한 비동기요청 처리 방법?
함수를 선언할때 async라는 단어를 붙여준다.
await이라는 단어는 async로 정의된 함수에서만 사용되며, 비동기 함수를 call할때 앞에 붙여 사용한다.
asnc/await은 rejet를 처리하는 부분이 없어서 보통 try - catch문으로 감싼다.
const callApi= async ( ) => {
try{
const result = await axios.get("url");
return result;
} catch(error){
console.log(error)
}
}