Promise 자바스크립트 프로미스 비동기 통신

1. 우선 Promise 는 ES6 에서 새롭게 추가된 내장 객체입니다.

2. 이 객체가 무엇을 하는 객체냐? >> 어떤 일을 하되, 비동기적으로 해야할 경우 편리하게 할 수 있도록 도와주는 객체입니다.

3. 예를 들어 비동기 통신을 할 경우, 콜백함수로 순서를 지키고자 합니다. 그러다가 콜백지옥 현상이 나타나게되죠?

이런 콜백 지옥 현상을 피할 수 있도록 하는게 Promise 객체의 역할입니다. 한마디로 편리한 비동기 코딩을 위해 제공된것 입니다.

 

 

기본 사용법

const promise = new Promise((resolve, reject) => {
	// 프로미스를 사용하려면 반드시 내장 콜백함수도 같이 써줘야 합니다.
    // (resolve, reject) => { 이 안에다가 할 일 작성 }
    
	// 여기에다가 할 일을 정의해주면 됩니다. 
    // 대부분 비동기 관련한 작업들이 여기에 오겠죠?
    
    // 여기는 예시이므로 그냥 console.log만 찍어보겠습니다.
    console.log("여기에 할 일을 작성해 주세요");
    
    
    // 이제 할 일을 다하고 만약 성공적으로 결과값을 받았다고 가정한다면, 
    // resolve 함수를 호출해서 성공했음을 promise객체에 알려줘야 합니다.
    // (프로미스 객체는 자기가 한 일이 실패했는지, 성공했는지까지는 모릅니다.)
   
    // 일을 잘 수행해서 결과값이 왔다면
    resolve(response);			
    
    // 만약 요청이 실패해서 결과값이 오지 않았다면
    reject(new Error("요청 실패")); 
});

 위에서 처럼 프로미스가 할 일을 정의해주고, 성공/실패시에 대해 로직을 짜서 resolve(), reject() 함수를 호출합니다.

그리고 성공했다면 받은 데이터는 어떻게 처리을 해야 할까요? 혹은 실패했다면 오류에 대한 처리는 어떻게 해야 할까요?

 

 then() catch() 함수

// 이제 위에서 만든 promise 객체에서 결과값을 받아봅시다.

promise.then( (data) => {
	// then함수의 파라미터로 콜백이 들어오고 이 콜백의 파라미터에는 자동으로 위에
    // resolve(response)에서 저장된 결과값이 저장되어 있습니다.
    
    // 따라서 받아온 데이터는 다음과 같이 로그로 나타낼 수 있죠
    console.log(data);
    
})

// 만약 실패했다면 어떻게 될까요? 오류메시지라도 받아봐야겠죠?
promise.catch( (error) => {
	// 만약 reject() 함수를 위에서 호출했었다면 catch() 함수로 이어집니다.
    // then() 함수는 작동하지 않죠.. 
    // 반대로 성공하면 catch() 함수가 실행되지 않습니다. 
    
    // 에러가 자동으로 콜백함수의 파라미터인 error로 저장됩니다.
    // 따라서 우리는 이렇게 에러메세지를 확인 할 수 있습니다.
    console.log(error);
})


// 좀 코드를 이쁘고 간단하게 다시 짜볼까요?
promise
	.then(data => {
    	console.log(data);
    })
    .catch(error => {
    	console.log(error);
    }
 // 이렇게 하면 좀 간단하고 보기도 쉽죠

여기서 알아야 할 것은 2가지 입니다.

1. reject() 함수를 위에서 호출했다면 catch()로 이어진다.

2. resoleve() 함수를 위에서 호출했다면 then()으로 이어진다.

 

3. 추가로 .finally() 함수도 있습니다. 이것은 실패하든 성공하든 반드시 실행하는 부분이죠. 사용방법은 똑같이 쓰면 됩니다. 마치 자바에서 try catch finally문과 비슷하죠?