promise 대체 왜 사용하는걸까?

비동기는 언제끝날지 예측하기 어려울떄, 주가되는 작업이 아닐때 비동기 처리를 많이한다. 대표적으론 통신할때 비동기적 처리를한다.

서버와 웹브라우저가 통신을 할때 통신이 언제 끝날지 예측하기 어렵다. 이유는 인터넷이 느릴수도 서버가 느릴수도 있기 때문인다.  통신이 끝날때까지 아무일도 못하는 것보다는  통신이 끝날때까지 다른 작업을 하다가 통신이 끝날때 콜백이 호출되면서 필요한 작업들을 나중에 하면 좋을것이다. 이럴때 사용하는 것이 promise 이다.

promise는 지금없으니까 이따 이상없으면 주고 이상 있으면 알려줄게 와 같은 약속이다.

 

서버와 통신을 통해 비동기적 처리하는 예시를 한번보자 먼저

웹서버와 웹브라우저가 통신할때 사용하는 'fetch' api  와 그 fetch 가 사용하는 promise가 있는데 이것을 이용해보자

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(function(response){
        return response.json();
    })
    .then(function(myJson) {
        console.log(JSON.stringify(myJson));
    });

json 예제는 (공부를하거나 포르토타입으로 웹사이트를 만들때 서버를 마련는게 시간이 걸리면 굉장히 숩게 서버를 마련할 수 있음) post라는 링크에서 각각의 글들을 JSON이라는 데이터 타입으로 만들어서 응답해주는 URL획득가능
https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

자 서버통신은 준비가 완료되었으니 비동기적 사례를 보자 아래처럼 서버를 통신하기 전과 후에 각각 콘솔로 찍고 결과를보니

console.log(1);
fetch('https://jsonplaceholder.typicode.com/posts')
    .then(function(response){
        return response.json();
    })
    .then(function(myJson) {
        console.log(myJson); // 콜백함수
    });
console.log(2);

 

콘솔로 1 과 2가 먼저 출력이 되고 이후에 통신이 끝나고 json 데이터 타입을 javascript 데이터 타입으로 전환한 후 콜백함수가 호출 되면서 결과가 나중에 나오게 된다.  fetch가 비동기적으로 처리된 것이다.

 

fetch 함수를 좀 더 자세히 살펴보면 fetch 함수에게 리소스를 주면 (쉽게 말해서 url) 어떤값을 반환하게 된다. 이때 이 어떤값이 promise 데이터 타입 이다. 

MDN : 전역 fetch() 메서드는 네트워크에서 리소스를 취득하는 절차를 시작하고, 응답이 사용 가능해지면 이행하는 프로미스 데이터 타입을 반환합니다.

 

fetch(resource)

이 말을 좀 더 자세히 살펴보자.

변수를 선언하고 그 변수에 fetch가 리턴한 값을 할당했다. 그리고 콘솔로 출력해보니 promise라는 데이터 타입을 리턴하는것을 볼 수 있다.

let fetched = fetch('https://jsonplaceholder.typicode.com/posts');
fetched.then(function(result){})
fetched.catch(function(reason){})

• 이것으로 본다면 만약 어떤 함수를 호출했을때 함수의 리턴값이 promise라면 그 함수는 비동기적으로 동작하는 함수일 가능성이 높다
• 그리고 그 함수가 리턴한 값은 2개의 함수를 사용할수 있다. 하나는 then(), 다른하나는 catch()이다. 이 둘은 콜백함수를 받는다. 그리고 둘다 콜백함수의 인자를 하나씩 가지고 있는데 then은 result, catch는 reason이다. (파라미타명은 다른것으로 교체가능)

.then()은 언제 호출 되냐면 fetch를 통한 결과가 성공했을때 then으로 전달된 콜백함수가 호출되도록 돼있으며 그 콜백함수가 호출되면서 결과값이 있다면 첫번째 인자로 받을 수 있다.

만약 실패를 했다면 catch안으로 콜백된 함수가 호출될것이고 그 인자는 실패의 이유를 알려준다.

즉, fetch가 성공하면 then의 콜백함수로 promise 데이터 타입을 전달하고 실패하면 그 이유를 알려주는 catch의 콜백함수가 호출되는 것이다! 맞는 표현인지 확인필요

그럼 promise를 사용해서 좋은점은 무엇일까?

• 비동기적인 어떤 작업을 실행할떄 그 작업이 성공했는지 실패했는지를 알 수 있다는 점이 가장 크다.
• response가 갖고 있는 함수중에는 여러가지가 있는데 가져온 텍스트 더미인 데이터를 자바스크립트로 가공하는 함수가 있다. (해당 함수로 반환되는 값은 다시 promise 객체이고 이것을 또 then, catch 를 쓸 수있다.)

 

 fetch('https://jsonplaceholder.typicode.com/posts')
    .then(function(response){
		// response.json().then(function(data){console.log(data)}) // Nested promise
        return response.json()  // Promise chaning
    })
    .catch(function(reasone){
        console.log(reason)
    })
    .then(function(data){ 
        console.log(data)
    })

 

promise를 사용하는 방법

• Nested promise :  promise는 then을 사용할 수 있고 그 then안에서 다시 promise를 사용할 수 있고 또 그 안에서 다시 then 을 사용하는방법
• Pronise chaning : then 안에서 promise를 리턴하것 이렇게 되면 바깥쪽에 있는 then 을 연결시킬수 있다. (일반적으로 많이 사용됨)

 

 

정리하자면!

promise를 사용하게 되면 그 즉시 대기중이 되고 결과가 성공되면 바로 then으로 전달된 함수가 호출된다. 이땐 resolve상태가 된다. 만약 실패하게되면 catch로 전달된 함수가 호출되고 이땐 rejected 상태이다.  then이건 catch건 새로운 promise를 리턴하면 다시 pending 상태가 되고 또 다시 then과 catch를 사용할수 있다.

<이미지 출처> https://www.freecodecamp.org/news/javascript-es6-promises-for-beginners-resolve-reject-and-chaining-explained/