await, async, promise

📞 비동기란?

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것.

ex) ajax, setTimeout(), callback

 

 

👉🏻 비동기 처리가 필요한 이유?

화면에서 서버로 데이터를 요청했을때 서버가 언제 그 요청에 대한 응답을 줄지 모르는데 마냥 기다릴 순 없기 때문이다.
또한, JavaScript는 싱글 스레드 언어이기 때문에 비동기 처리가 필수적이다.

 

📞 await, async

promise의 문제점을 보완하기 위해 가장 최근에 나온 비동기 처리 문법.

• 기존의 callback이나promise의 단점을 보완하기 위해 만들어졌다.
  ex) callback 지옥, then() 지옥
• await와 async는 주로 같이 쓰인다.
• 기존 동기식 처리의 단점을 보완하고 가독성을 높여준다.
• 예외 처리는 try-catch로 한다.

 

 

👇🏻 내가 사용한 await, async

function 앞에 async만 붙여주면 되고 비동기로 처리되는 부분 앞에 await만 붙여주면 된다.

// 게시글 등록 함수
  const handleBoardSubmit = async () => {
    const result = await axios
      .post(`${BASE_URL}/board`, {
        title: submit.title,
        contents: submit.contents,
      })
      .catch((err) => {
        throw err;
      });
  };

await & async를 사용하는 것이 promise를 사용하는 것보다 훨씬 가독성이 좋다.

 

📞 promise

Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 한다.

 

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공한다.

 

 

👉🏻 promise의 상태 값

promise를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 promise의 상태(state)이다. 상태(state)란 promise의 처리 과정을 의미한다.

promise는 다음 중 하나의 상태를 가진다.

1. pending(대기)

이행하거나 거부되지 않은 초기 상태.

아래와 같이 new Promise() 메서드를 호출하면 대기(pending) 상태가 된다.

new Promise();

 

 

new Promise() 메서드를 호출할 때 callback 함수를 선언할 수 있고, callback 함수의 인자는 resolve, reject이다.

new Promise(function(resolve, reject) { // ... });

 

 

2. fulfilled(이행)

연산이 성공적으로 완료됨.

callback 함수의 인자 resolve를 아래와 같이 실행하면 이행(fulfilled) 상태가 된다.

new Promise(function(resolve, reject) { resolve(); });

 

그리고 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

 

 

3. rejected(실패)

연산이 실패함.

 

new Promise()로 프로미스 객체를 생성하면 callback 함수 인자로 resolve와 reject를 사용할 수 있는데, 여기서 reject를 아래와 같이 호출하면 실패(rejected) 상태가 된다.

new Promise(function(resolve, reject) { reject(); });

 

그리고 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

 

대기 중인 프로미스는 값과 함께 이행할 수도, 어떤 이유(오류)로 인해 거부될 수 있다.
이행이나 거부될 때, 프로미스에 연결한 처리기는 그 프로미스의 then 메서드에 의해 대기열에 오른다.
이미 이행했거나 거부된 프로미스에 연결한 처리기도 호출한다.

 

 

참고 사이트

👉🏻 MDN - Promise
👉🏻 자바스크립트 Promise 쉽게 이해하기
👉🏻 JavaScript Async/Await (비동기 함수와 실행 순서)