promise, async, await

Promise ?

1. 개념

• promise는 자바스크립트 에서 제공하는 데이터 타입 중 하나 인데 비동기를 간편하게 처리할 수 있도록 도와주는 역할을 한다.

• 만약 어떤 함수의 리턴 값이 promise라면 해당 함수는 .then과 .catch 메서드를 사용할 수 있다.
  then과 catch 모두 인자로 콜백 함수를 받는다.

• promise를 리턴 하는 함수가 성공적으로 실행이 되면 .then의 콜백 함수의 인자로 reponse 객체를 전달을 하고
  promise를 리턴 하는 함수가 성공적으로 실행이 되지 못하면 .catch의 콜백 함수의 인자로 error 메세지를 전달 한다.

2. 예제

먼저 promise를 리턴하는 대표 적인 함수가 Fetch API다.

const A = fetch('https://jsonplaceholder.typicode.com/posts/1')

// fetch가 Promise를 리턴하는 것을 확인해 볼 수 있다.
console.log(A) // Promise {<fulfilled>: Response}

A.then( res => console.log(res))
// fetch함수가 정상적으로 수행이 되었기 때문에 then에 response객체가 전달되었다.
Response {type: 'basic', url: 'https://jsonplaceholder.typicode.com/posts/1', redirected: false, status: 200, ok: true, …}


// fetch의 url을 일부러 틀리게 해 보면
A.catch( err => console.log(err))
// 에러 메세지가 뜨는 것을 볼 수 있다.
TypeError: Failed to fetch
    at <anonymous>:1:11

3. promise의 효용성

promise를 사용하면 비동기 적인 작업을 처리할 때 작업이 성공 했을 경우와, 실패 했을 경우를 구분 해서 처리 할 수 있다.

async await

비동기 적으로 실행될 함수 앞에 await을 붙인다. await가 붙어 있는 promise를 리턴하는 함수는 리턴 값을 변수에 담아서 확인해볼 수 있다. 그리고 await은 반드시 다른 함수 안에서 실행이 되야 한다. 그리고 그 함수 앞에는 async라는 키워드를 붙여야 한다.

promise를 사용하면 성공의 결과가 then으로 들어 오는데, await을 쓰면 성공의 결과를 그냥 바로 받아 볼 수 있다.