비동기 작업 처리를 위한 Primise와 async/await

JS에서의 비동기란?

동기: 동시에 여러 작업을 수행할 수 없다. 순차적으로 실행하므로 호출 및 반환 흐름이 정해져있다.

비동기: 동시에 여러가지 작업을 수행할 수 있다. 비순차적으로 실행하므로 호출 및 반환 순서를 알 수 없다. 기다리는 작업(파일 입출력 및 데이터 송수신)을 처리할 때 사용한다. 

예시) url1에서 data1을 get하는 작업과  url2에서 data2를 get하는 작업을 동시에 진행했을 때 data1과 data2 중 무엇이 먼저 반환될 지 직관적으로 알 수 없다. 

---

Primise 비동기 처리 작업의 단위 / 비동기 함수가 반환하는 객체

https://springfall.cc/article/2022-11/easy-promise-async-await

const promise = new Promise((resolve, reject) => {
});
//const 선언: 재할당 불가
//생성자 new Promise()의 인수: executor

 

function executor(resolve, reject) { }

resolve: executor 내에서 호출할 수 있는 함수. 호출 시, 비동기 작업이 성공했음을 의미함  ... .then

reject: executor 내에서 호출할 수 있는 함수. 호출 시, 비동기 작업이 실패했음을 의미함. ... .catch

then 메소드는 해당 Promise 가 성공했을 때의 동작을 지정합니다. 인자로 함수를 받습니다.
catch 메소드는 해당 Promise 가 실패했을 때의 동작을 지정합니다. 인자로 함수를 받습니다.
위 함수들은 체인 형태로 활용할 수 있습니다. (연속적으로 호출할 수 있습니다. 아래 예제에서 확인하도록 합니다.)

---

Promise의 상태

: Promise는 생성과 동시에 executor를 실행한다.

- 대기 (이행, 거부가 호출되기 이전 상태)

- 이행 (then)

- 거부 (catch)

---

 

async/await: 비동기 처리 문법 / new Promise () → async function

 

async function ... : 해당 함수는 비동기적이며 Promise 객체에 반환값을 전달한다.

function startAsync(age) {
  return new Promise((resolve, reject) => {
    if (age > 20) {
      // 뭔가를 합니다.
      return resolve(`${age} success`);
    }
    // 또 뭔가를 합니다.
    return reject(new Error(`${age} is not over 20`));
    // 여기 있는 코드는 절대 실행되지 않습니다.
  });
}

 

async function startAsync(age) {
    if (age > 20) return `${age} success`;
    else throw new Error(`${age} is not over 20`
  });
}

//함수에 async 키위드를 붙입니다.
//new Promise... 부분을 없애고 executor 본문 내용만 남깁니다.
//resolve(value); 부분을 return value; 로 변경합니다.
//reject(new Error(…)); 부분을 throw new Error(…); 로 수정합니다.

 

await: Promise를 반환하는 함수에 붙여, 해당 Promise가 이행/거부 상태가 되기 전까지 기다린다.

 

https://springfall.cc/article/2022-11/easy-promise-async-await

[Javascript] 비동기, Promise, async, await 확실하게 이해하기