Introduction to Async

JS의 promises는 동시에 여러 작업을 하는 비동기적 작업을 실행한다. JS는 이렇게 작업을 진행한다.

/**
 * 이론상 fetch에 에러가 발생하고 console이 실행 되어야
 * 하지만, 그렇지 않고 console이 먼저 실행이 되고 fetch의
 * 에러상태가 출력된다.
 */
const hello = fetch("<https://google.com>");

console.log("something");
console.log(hello);

Creating Promises

Promise는 비동기 작업이 반환하는 결과 값을 나타내는 객체이다.

<aside> 📝 Promises declaration

var Promise: PromiseConstructor new <any>( excutor: (resolve: (value: any) ⇒ void, reject: (reason?: any) ⇒ void) ⇒ void) ⇒ Promise<any>

const getDBID = new Promise((resolve,reject)=>{});

</aside>

JS는 Promise를 만나면 작업을 동기적으로 실행하여 resolve가 반환될때까지 프로그램을 대기하게 된다. 그리고 resolve가 반환되기 시작하면 JS 시스템에 맞추어 프로그램이 동작된다.

/**
 * resolve는 JS에게 작업한 값을 전달하는 callback param이고
 * reject는 JS에게 에러를 알려주는 callback param이다.
 * @decription
 * Promise가 시작되면 JS는 호출되는 시점에서 값이 반환되기까지
 * 기다린다. 그리고 resolve를 실행시켜 함수를 완료한다.
 *
 * 아래 코드는 resolve로 promise반환을 정의하고 setInterval로
 * promise를 지속적으로 호출하여 결과값을 받는다.
 */
const amISexy = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, `Yes you are`);
});
/**
 * console.log로 amISexy의 setTimeout을 동작시키고 그다음
 * setInterval을 지속적으로 호출하여 setTimeout의 결과값을
 * 받아서 반환한다.
 */
console.log(amISexy);

setInterval(console.log, 1000, amISexy);

Using Promises

Promise에서 얻어진 결과값을 JS에서 사용하기위해 then과 catch를 사용해야한다.

<aside> 📝 Using promise

promise.then(),catch()

getDBId.then(result =>{}).catch(err=>{})

</aside>

JS시스템의 함수의 동작방법은 딜레이가 걸리는 함수는 비동기로 실행시키고 다음 함수 코드를 실행하는 방식으로 진행된다. 그렇기에 then과 catch는 언뜻보면 순차적으로 진행할것 처럼 정의하였지만 실상은 서로 각각 동작한다.

/**
 * then으로 전달된 인수는 promise에 처리한 resolve와 recject의
 * 값을 전달 받는다.
 */
const amISexy1 = new Promise((resolve, reject) => {
  resolve(`Yes you are!`);
});

amISexy1.then((value) => console.log(value));

/**
 * reject만 쓰이면 JS에서 에러를 반환한다. 그렇기에 에러를
 * catch하여 에러에 관한 처리소스를 구현해야한다. 여기서 then과 
 * catch가 함수로 보여서 then실행 후 cath가 실행되는거라 생각
 * 되지만, 실상 두 함수는 서로 각각 동작을 한다.
 * JS는 다른작업이 딜레이걸리면 다른 작업을 실행하는 시스템
 * 이기에 함수 디자인을 JS시스템을 고려하여 구현해야한다.
 */
const amISexy2 = new Promise((resolve, reject) => {
  setTimeout(reject, 3000, `Yes are ugly`);
});

amISexy2.then((result) => console.log(result)).catch((err) => console.log(err));