JavaScript #5 비동기 처리

비동기란?

앞 코드 실행이 끝나기 전에 다음코드를 진행시키는 것

log("1st")
Timeout(() => {
log("2nd")
},1000)
log({"3rd")

//결과 1st 3rd 3nd

Timeout 이라는 함수에 1000을 주어 함수의 실행 시간을 늦추었기 때문이다.

 

const getStudent1 = (name, age) => {
	let student
    
    setTimeout(() => {
    	student = {name, age}
    },1000)
    
    return student
}

const studentA = getStudent1("최혜림", 20)

log(studentA)
//오류발생 
//setTimeout 함수가 실행되기 전에 studentA가 먼저 실행됐고 이로 인해 값이 들어가지지 않았기 때문에 오류발생

비동기 처리 방법

1.콜백함수 사용

const gettStudent2 = {name, age, func) => {
	let student
    
    setTimeout(() => {
    	student = {name, age}
        func(student)
    },1000)
}

getStudent2("최혜림", 20, (student) => {
	log(`학생의 이름은 ${student.name}이고, 나이는 ${student.age}살이다`)
}
//콜백함수 사용

권장하지 않음!!

로직이 불편하고 가독성이 떨어지기 때문에

 

2.promise 객체 리턴

자바스크립트 es6에서 새로 등장한 기능

const promise = new Promise(resolve, reject) =>{})
//resolve에는 원하는 값, reject에는 예외처리가 발생했을 때의 값이 들어감

const getStudent3 = (name, age) = {
return new Promise((resolve, reject) => {
	setTimeout(() => [
    	if(!name) reject (new Error("Undefined Name"))
        //예외상황 : 만약 name에 이름이 없으면 에러처리를 해줌 => reject에 넣어줌
        student = {
        	name: name,
            age: age,
        }
        resolve(student)
        //성공적으로 값이 들어갔을때 resolve에 넣어주는 값
       },1000)
     })
    }
getStudent3("최혜림", 20)
	.then((student) => //성공시 성공한 resolve 값을 가지고 실행
    	log(`학생의 이름은 ${student.name}이고, 나이는 ${student.age}살이다.`)
    )
    .catch((err) => console.log(err))

가독성이 좋지 않다! 길어진다!

=> Async, await 등장!

 

3. Async, await 사용

const promise = new Promise(resolve, reject) =>{})

const getStudent3 = (name, age) = {
return new Promise((resolve, reject) => {
	setTimeout(() => [
    	if(!name) reject (new Error("Undefined Name"))
        //예외상황 : 만약 name에 이름이 없으면 에러처리를 해줌 => reject에 넣어줌
        student = {
        	name: name,
            age: age,
        }
        resolve(student)
        //성공적으로 값이 들어갔을때 resolve에 넣어주는 값
       },1000)
     })
    }
    
const getStudent = async () => {
  try {
	const student = await getStudent3("최혜림", 20)
    //getStudent함수의 연산이 끝날때까지 기다렸다가 끝나면 그 값이 student에 담긴다.
    lod(`학생의 이름은${student.name}이고, 나이는${student.age}살이다.`)
    } catch {
    	console.log(err)
    }//then과 catch의 기능을 해주는 try와 catch
} 
//함수 내에서만 사용 가능하기 때문에 함수를 만들어 준 후 async, await을 넣어준다
getStudent()
//async, await이 들어간 함수를 호출해준다.

async, await은 무조건 함수 내에서만 작동이 된다!

 

promise객체의 사용 여부에 따라 async, await사용 여부가 결정된다고 생각해면 됨!! 

 

가장 권장하는 방법!!