Promise/await/async

Hi·2020년 11월 6일

JavaScript

목록 보기
8/8

동기 비동기
promise
resolve/reject
async/await 에 대한 정리


출처: PoiemaWeb

동기 vs.비동기

Promise란 무엇인가?

출처: MDN
어느 시점에 어떤 행동을 취하겠다는 약속이다. 그러므로 우리는 어떤일이 일어날지 사실은 알수가 없다.
프로미스는 3가지 상태를 갖는데 pending-fulfilled-rejected-(settled) 이다.

let promise1= new Promise((resolve,reject)=>{
setTimeout(function(){
resolve("Success!"
}, 250);
});

promise1.then((successMessage) => {
console.log("YAY" + successMessage)
})

//// successMessage is whatever we passed in the resolve(...) function above --> resolve로 받아온 값이 successMessage에 담기게 된다. 

promise의 특징

-await을 사용할수 있다
-resolve/reject로 값을 받거나 에러를 뱉는다
-'미래' 시점의 데이터를 위함
-then/catch로 값을 받거나 에러를 낸다
-비동기 처리를 한다

Promise()생성자

Promise 생성자는 주로 프로미스를 지원하지 않는 함수를 감쌀 때 사용한다. new 생성자 키워드를 통해 생성한다

const promise = new Promise((resolve, reject) => {
setTimeout(()=> {
resolve('foo');
}, 1000);
});

promise.then((value) => {
console.log(value); //value값은 위에 promise에서 resolve를 통과한 값인 'foo'가 될 것이다. 
})

console.log(promise) //[object Promise]

await을 쓰는 이유?

promise이기만 하다면 await으로 기다릴수 있다
await에서는 try/catch와 같은 동기식의 코드를 사용할 수 있다.

await을 쓰지 않는다면?

예상값 대신에 (원하는값) promise객체를 받게 된다

다수의 값을 await하는 경우

let [변수명, 변수명] = await.Promise.all([함수명(), 함수명()])
//Promise.all() -> promise 배열을 받는다 -> 합쳐서 하나의 promise를 만든다 

Promise.resolve()

Promise.resolve(value) 메서드는 Promise.then 객체를 반환한다. 만약 Promise.then이 담고 있는 값이 프로미스인 경우, 해당 프로미스가 반환된다

const promise = Promise.resolve(23);
promise.then((value)=>{
console.log(value);
//expected output: 23 //정수, 객체, 배열 문자열등 모두 들어갈수 있다. 
});

references
1)
https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8
2)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

node 공식문서
https://nodejs.org/en/about/

참고하면 좋을 자료
https://javascript.info/async-await

0개의 댓글