[TIL] promise

1. promise가 나오게 된 배경

: 비동기 작업을 처리하되, 콜백지옥을 해결하려고

1-1. 콜백지옥 예시

timer(1000, function() {
	console.log('작업1');
    timer(1000, function() {
    	console.log('작업2');
    	timer(1000, function() {	
        	console.log('작업3');
          	timer(1000, function() {	
            	....
          })
    	})
    })
})

1-2. promise 객체 사용 예시

timer(1000)
	.then(function(){
    	console.log('작업1');
        return timer(1000);
    })
    .then(function(){
    	console.log('작업2');
        return timer(1000);
    })
    .then(function(){
    	console.log('작업3');
        return timer(1000);
    })

2. promise 객체

: fetch 같은 비동기 함수는 promise 객체를 반환하는데,
then과 catch 메서드를 사용할 수 있다.
둘다 콜백함수를 인자로 받음.

then: fetch 호출한 결과가 성공했을때 response객체를 전달함.
catch: fetch 호출한 결과가 실패했을때

3. promise를 사용하는 이유

: 비동기 작업을 처리의 결과를 표준화된 방식으로 처리할 수 있게 해준다.
ex) 성공시 then메서드로 받아서 사용, 실패시 catch메서드로 받아서 사용

const fetched = fetch(URL);
fetched
	.then(function(result) {
    	// 성공시 처리해야할 내용
    })
    .catch(function(reason) {
    	// 실패시 처리해야할 내용
    })

4. promise를 사용하는 방식

4-1. nested promise

const fetched = fetch(URL);
fetched
	.then(function(response) {
    	response.json().then(function(data) { // 내부에서 then 메서드를 사용
        	console.log('data', data)
        })
    })
    .catch(function(reason) {
    	// 실패시 처리해야할 내용
    })

4-2. promise chaining

const fetched = fetch(URL);
fetched
	.then(function(result) {
    	// 성공시 처리해야할 내용
    })
    .then(function(result) {
    	// 성공시 처리해야할 내용
    })
    .catch(function(reason) {
    	// 실패시 처리해야할 내용
    })

5. promise를 만드는 방법

const promisee = new Promise(콜백함수)

콜백함수는 성공했을 경우에 실행할 함수, 실패했을 경우에 실행할 함수를 파라마티러로 넣어줘야함

const promisee = new Promise(function(resolve,reject) {
	// 비동기 처리가 성공하면
   setTimeout(() => {
   	resolve('resolved');
   }, 2000)
})

6. promise와 fetch

: promise는 비동기처리 작업을 할 때 사용하는데,
new Promise처럼 생성해서 처리할 수도 있고 fetch 함수같은걸 사용할 수도 있다.

7. promise와 async/await

: promise는 then과 catch 메서드를 이용해서 비동기 처리에 대한 결과를 처리하는데
async는 await으로 비동기 처리에 대한 결과를 기다렸다가 처리함

참고

생활코딩-JavaScript - Promise (then, catch)
생활코딩 - JavaScript Promise 2 - new Promise