[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 7회차 미션

패스트캠퍼스 프론트엔드 인강 7일차. 비동기처리인 promise, async, await을 정리하였다.

 

비동기처리 종류가많아 너무나 헷갈리는데 동시에 다쓰면서 여러번 반복해 익숙해지면 될것같다.

async와 await를 쓰면 promise의 단점을 보완해줄수있다.(ES8에 소개된 문법)그런데 promise는 es6버전이고 async, await은 es8이라 IE는 전부다 지원안되네..

 

promise

promise는 비동기처리를 쉽게해주는 기능, 이전에는 비동기처리를위해 콜백함수를 사용하엿는데 콜백함수가 많아질경우 난잡해져 콜백지옥이생길수있다고한다.

콜백지옥예시

promise를 만드는방법

const myPromise = new Promise((resolve, reject) => {
	//구현
});

1초뒤에 성공하는 프로미스

        const myResolve = new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve('result')
            },1000)
        })
        myResolve.then(result => {
            console.log(result)
        })

결과 1초뒤에 result출력

 

1초뒤에 실패하는 프로미스

        const myReject = new Promise((resolve, reject) =>{
            setTimeout(()=>{
                reject(new Error());
            }, 1000)
        })
        myReject.then(result => {
            console.log(result)
        }).catch(e => {
            console.error(e)
        })

결과: 1초뒤에 에러발생

 

promise를 통해 콜백지옥을 해결하면 아래와같다.

promise의 불편한점은 에러를 잡을때 어떤부분에서 에러가발생햇는지 찾기힘든점이다.

promise에도 단점이있고 이를해결하기위에 async와 await이 있다.

 

async와 await

일단 promise를 만드는 함수작성먼저해보자

특정 밀리세컨드뒤에 resolve함수가 호출될수있도록 setTimeout함수를 사용한다.

function sleep(ms){
	return new Promise(resolve => setTimeout(resolve,ms))
}

async process(){
	console.log('안녕하세요')
    await sleep(1000);
    console.log('반갑습니다)
}

async와 await을 사용하기위해서 앞부분에 키워드를 붙여준다.

async가 앞에 붙은 함수를 만든뒤에

Promise와 연관있는 sleep함수앞에 await를 붙이는걸 잊지말자. 

 

안녕하세요가 출력되고 1초(1000ms)뒤에 반갑습니다가 출력된다.

 

그리고 async를 키워드로 사용하게될경우 process()의 결과는 promise를 반환하게된다.

만약 return true를 하게된다면 어떻게되는지보자

function sleep(ms){
	return new Promise(resolve => setTimeout(resolve, ms))
}
async process(){
	console.log('안녕하세요')
	await sleep(1000)
    console.log('반갑습니다')
	return true;
}
process().then((결과) => {
	console.log(결과)
})

 

process함수가 진행하면서 안녕하세요가 출력된뒤 1초뒤에 반갑습니다가 출력되고 true값을 리턴한다.

process함수가끝난뒤 then으로 넘어가 true값이 value값으로 넘어가 출력된다.(나는 '결과'라고했음)

 

만약에 에러를 발생하고싶으면

어떻게해야할까?

function sleep(ms){
	return new Promise((resolve) => setTimeout(resolve,ms))
}

async function makeError(){
	await sleep(1000)
    const error = new Error()
    throw error
}

async process(){
	//만약에 에러를 잡고싶을경우
    try{
    	await makeError()
    }catch(e){
    	console.error(e)
    }
}

process()

에러함수안에 throw를 넣고 만약에 에러를 잡고싶으면 try catch를써서 await makeError()를 호출해 에러를 출력한다

e는 error객체를 가르킨다

 

https://bit.ly/31Cf1hp

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스