2020.08.10 - promise/async/await

공부하기전 접한 키워드

1. promise
2. async / await

promise

직역하면 약속이라는 뜻으로 JavaScript 내부에서는 아래와 같이 사용된다.

 

Promise는 프로미스가 생성될 때 꼭 알 수 있지는 않은 값을 위한 대리자로, 비동기 연산이 종료된 이후의 결과값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있도록 합니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하지는 않고, 대신 프로미스를 반환해서 미래의 어떤 시점에 결과를 제공합니다. - MDN -

즉 비동기 실행에 의해 언제 처리가 완료되거나 실패 할지 모르는 어떤것에 대하여

처리 완료되었다면 어떻게, 실패하였다면 어떻게.. 할지 등등에 대하여 미리 정해두고

그에따라 행동을 결정할 수 있다.

promise 생성방법

1. new Promise(함수)
2. Promise.resolve(이행될값)
3. Promise.reject(거부된이유)

등의 방법이 있다.

promise 이행, 거절 처리하기

이행에 대한 처리는 then, 거절에 대한 처리는 catch메서드를 사용하여 처리한다.

let a = Promise.resolve('name');

a.then(data => {
    console.log(data);
    return Promise.resolve('Hwang');
}).then(data => {
    console.log(data);
    return Promise.reject('하기 싫어졌어');
}).then(data => {
    console.log(data);
    return Promise.resolve('Dae-seong');
}).catch(err => {
    throw Error(err)
})
// name
// Hwang
// Uncaught (in promise) Error: 하기 싫어졌어

// 동일하게 아래와 같이 나타낼 수 있다.
let a = Promise.resolve('name');

a.then(data => {
    console.log(data);
    return 'Hwang';
}).then(data => {
    console.log(data);
    return Promise.reject('하기 싫어졌어');
}).then(data => {
    console.log(data);
    return 'Dae-seong';
}).catch(err => {
    throw Error(err)
})

위 코드블럭에서 알아야 할 것은

어떤 promise에 대한 then의 결과 역시 promise이다.

이때 then에서 사용된 callback함수의 return값이 promise가 아니라면

그 값으로 이행할 promise가, promise라면 그 자체가 된다.

위 코드블럭 처럼 연속적으로 사용된 형태를 promise chain이라고 한다.

거절됨

promise chain중 어떤 곳에서 거절이 되더라도 항상 catch문으로 전달된다.

당연하지만 반복문에서 break키워드를 만난 것 처럼 더이상 진행되지 않는다.

promise - MDN -

async / await

promise chain을 보다 동기적으로 표현하게 만들어 준다.

이를 사용하기 위해선 함수앞에 키워드가 붙어야 한다.

async function hi() {
    let a = await Promise.resolve('name');
    console.log(a);
}

result = hi(); // name
console.log(result); // Promise {<fulfilled>: undefined}

await이라는 키워드 뒤에 promise가 온다면 그 promise가 이행된 값을 갖게된다.

여기선 'name' 이었으므로 a = 'name'과 같다.

async키워드가 사용된 함수의 결과도 역시 then과 마찬가지로 promise가 된다.

이때 역시 return 된 값이 promise라면 그 promise를,

promise가 아니라면 그 값으로 이행될 promise를 갖는다.

async / await - javascript.info -