Promise

서재환·2021년 11월 23일
0

JavaScript

목록 보기
7/25

Promise

Promise란 비동기처리를 보다 손쉽게 하기 위해 도입된 기술이다.
인수로 전달받은 함수를 통해 비동기처리를 수행한다.

우선 Promise 객체를 생성해야한다.
new 연산자와 함께 프로미스를 호출하면 promise 객체를 생성한다.
const promise = new Promise((매개변수)=>{함수내용}) // 함수를 인자로 갖는다.


프로미스 생성자 함수는 *함수를 인자로 갖고 *해당 함수는 resolve와 reject함수를 인자로 갖는다.
const promise = new Promise((resolve, reject)=>{}) // 인자(resolve, reject)를 받음

비동기처리가 성공하면 resolve 함수를 호출하고 비동기 처리가 실패하면 reject 함수를 호출한다.
const promise = new Promise((resolve, reject)=>{
  if (비동기처리 성공시) {
    resolve('성공') 
  } else {
    reject('실패')
  };
  
비동기처리가 성공 또는 실패시 promise 객체를 반환한다.
아래 그림에서 비동기처리가 이루어지지 않게 함수인자를 주지도 않고 따라서 함수내용에 아무 것도 적어주
지 않았다. 그랬을때 Promise객체인 promise2는 PromiseState "pending"상태 PromiseResult로 
undefined를 가진다.

그렇지만 Promise 내부적으로 비동기처리가 성공해서 함수 resolve(매개변수)가 실행이 된다면  promise
객체는 PromiseState는 "fulfilled"상태 PromiseResult는 'ok'를 값으로 갖는다.

만일 비동기실행에 실패 할 경우 promise 객체는 PromiseState로 "rejected"상태를 PromiseResult로
"비동기실패"를 값으로 갖는다.

결론적으로 프로미스는 비동기 처리상태와 처리결과를 관리하는 객체이다.

then, catch, finally를 통해 Promise를 알아보자

Promise 생성자는 promise 객체를 반환한다는 것을 위에서 살펴보았다. 
promise 객체 안에는 then() 이라는 method가 있다.

비동기처리가 성공해서 resolve 함수가 실행이되던, 실패해서 reject 함수가 실행이 되던 두 함수
모두 프로미스를 반환한다는 것을 알고 있다. 만일 비동기가 성공 할 경우 then 함수를 사용하여
반환한 프로미스를 받을 수 있는데 그 때 then 함수 안의 함수가 자동으로 호출이 된다.

아래 코드를 보면 이해할 수 있다. 아래 코드는 비동기 처리가 성공하여 resolve 함수가 실행되었다.
비동기 처리가 성공 할 경우 then 메서드 안의 함수가 호출이된다. then 메서드는 인자로 함수를 받
는다. 그 함수의 인자는 또 인자를 받는데 그것이 바로 resolve 함수의 매개변수로 '비동기성공1'이
다.

두번째 비동기처리도 resolve 함수를 호출해서 then 메서드로 받았다. 이것이 가능한 것은 위에서 살
펴보았듯이 promse 객체가 promise를 반환하기 때문에 then 메서드에 접근할 수 있어서이다.

그리고 then 메서드를 사용한다는 것은 위에서 살펴보았듯이 비동기처리가 성공했다는 것이고 then 메서
드의 인자로 함수를 그 함수가 받는 인자를 resolve 함수의 매개변수로 받는다는 의미이다.

그렇게 두번 비동기처리가 성공한 경우로 코드를 작성하였고 console.log(v) 부분을 통해 then 메서드
가 받는 함수 인자의 매개변수가 누구인지 확인해보았다.

마찬가지로 then 메서드 또한 promise 객체를 반환한다. 그래서 이렇게 then 함수를 2번 사용할 수 있
는 것이다.

세번째 비동기처리부터 에러를 발생시켰는데 에러를 발생시킬 경우 이때 반환할 프로미스를 받을수 있는 메
서드는 catch 메서드이다. catch 메서드는 reject 함수가 실행이될 때 자동으로 실행이 되고 catch 함
수의 인자로 reject 함수의 매개변수가 들어간다.

마찬가지로 console.log(e)를 통해 reject 함수의 매개변수 '비동기실패'가 들어간 것을 알 수 있다.
reject 메서드도 마찬가지로 프로미스 객체를 반환한다.

finally 메서드의 경우 함수를 인자로 받지만 해당 함수의 매개변수로 resolve나 reject의 매개변수를
받지 않는다. 즉 프로미스의 상태와 상관없이 공통적으로 수행해야 할 처리 내용이 있을 경우 사용한다.

0개의 댓글