Promise

JavaScript에서 Promise란..?

자바스크립트에서 비동기를 처리하기 위해 가장 기본이 되는 것이 프로미스

• 프로그램에서 간단한 코드가 한줄한줄 순차적으로 실행된다면 크게 어려운게 없다. 하지만 함수를 호출했는데 그 함수가 시작되고 끝나는 동안 프로그램은 진행되어야 할 필요가 있습니다 이럴 때 사용하면 비동기적인 상황에서 코드를 좀 더 명확하게 표현하고 실행할 수 있다.

• Promise 개체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다 - MDN
  이해 되시나요 ? 전 안되서 한 번 코드를 쳐볼게요

// ES6 이후 표준 내장 객체로 추가 되었습니다.
// 생성자를 통해서 프로미스 객체를 만들 수 있다.
// 생성자의 인자로 executor 함수를 이용합니다.
// executor 함수는 resolve와 reject를 인자로 가집니다.

new Promise((resolve, reject) => {}); // pending

// 생성자를 통해 프로미스 객체를 만드는 순간 pending(대기) 상태 입니다.

// executor 함수 인자 중 하나인 resolve 함수를 실행하면, fulfiled(이행) 상태가 됩니다.
new Promise((resolve, reject) => {
    //
    // ...
    resolve(); // fulfiled
});

// executor 함수 인자 중 하나인 reject함수를 실행하면, reject(거부) 상태가 됩니다.
new Promise((resolve, reject) => {
    //
    // ...
    reject(); //rejected
});

promise 객체가 생성되고 pending상태에서 resolve 함수가 동작하면 fullfilled 상태가 되고, reject 함수가 동작하면 rejected 상태가 된다.

인자인 resolve 함수 사용 법

const a = new Promise ((resolve, reject) => {
  setTimeout(() => {
    resolve();
  },1000)
});

a.then(() => {
  console.log("1초 후 fullfilled 됩니다.")
})

Handling errors 에 관하여

인자인 reject 함수 사용 법

각 함수에 callback 넣어주기.

fulfilled 나 rejected 후 작업할게 있다면

Callback 함수와 Promise의 차이는..?

callback hell

Promise

callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없다. 하지만 promise를 사용하면 비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해집니다.

콜백함수로 비동기 로직을 처리할 경우 비동기 로직의 결과를 다음 비동기로 전달해서 실행할 때 콜백은 점점 깊어지고 가독성이 떨어지고 코드를 작성하기도 힘들어진다.

하지만 프로미스를 사용하게 되면 프로미스 객체에 비동기가 처리 된 결과값이 저장되고 콜백의 경우 매번 비동기를 실행해야지 그 값을 사용할 수 있지만 프로미스는 .then 메소드를 통해서 저장되어 있는 결과 값을 원하는 때에 사용 가능합니다.