promise pattern in javascript, react.js

javascript(react, next...)개발시 비동기는 거의 필수입니다.  그리고 콜백함수 지옥에 빠지지 않기 위해 async await 패턴을 많이 쓰죠.

 

(callback) => {
	callback((callback) => {
    	callback((callback) => {
        	callback((callback) => {
        		callback()
        	})
        })
    })
}

 

 

오늘은 async await 사용대신, promist pattern을 이용해 비동기 함수를 직접 만들어볼까합니다.

 

 

#대표적인 경우

let asyncFunc = new Promise((resolve) => {  
  setTimeout(() => {resolve("Success!")}, 10000); //ms 단위이기에, 10초뒤 resolve를 실행합니다
});

asyncFunc.then((res) => {
	console.log(res) // 10초뒤 Success를 띄웁니다
})

 

 

비동기 함수 사용시 .then()도 있지만, 에러 발생시 실행시키는 .catch()도 있습니다. 에러 발생시 실행시키는 경우도 다뤄보도록 하겠습니다.

 

#.catch()사용하기 위한 경우

let asyncFunc = new Promise((resolve, reject) => {  
  setTimeout(() => {reject("Success!")}, 10000); //ms 단위이기에, 10초뒤 reject를 실행합니다
});

asyncFunc
.then((res) => {
	console.log(res) // 10초뒤 Success를 띄우지 않습니다
})
.catch((err) => {
	console.log("err") // 10초뒤 "err" 띄웁니다
	console.log(err) // 10초뒤 Success를 띄웁니다
})

 

 

단 .then(), .catch()가 아닌 async await을 사용시 에러구분이 불가합니다.

let asyncFunc = new Promise((resolve, reject) => {  
  setTimeout(() => {resolve("Success!")}, 10000); //ms 단위이기에, 10초뒤 reject를 실행합니다
});

async () => {
	let a = await asyncFunc
    conosle.log(a) // Success
}

let asyncFunc = new Promise((resolve, reject) => {  
  setTimeout(() => {reject("Success!")}, 10000); //ms 단위이기에, 10초뒤 reject를 실행합니다
});

async () => {
	let a = await asyncFunc
    conosle.log(a) // 에러 발생했다 해도, resolve와 똑같은 Success alert
}

 

 

요약:

@ 비동기 함수 작성시 promise 패턴을 이용한다

@ async await 사용시, 에러 구분 없이 응답결과를 리턴한다

 

이상입니다!

 

 

코드가 보기 어려우시면 이 링크를 참조해주세요:

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/promise-pattern-in-javascript-react-js-578c60f021ca