1. javascript는 비동기 처리가 가능할까?
javascript는 객체기반의 스크립트언어로써 동적이고, 타입을 명시할 필요가 없는 인터프리터언어이다.
동기적으로 실행되는 싱글 스레드 언어이기 때문에 비동기 처리를 하기 위해서는 콜백함수, promise, async/await의 처리가 필요하다.
2. 동기? 비동기?
동기
요청에 대한 반환이 바로 이루어져야만 하며, 요청에 대한 반환이 이루져야 다음 작업으로 넘어간다. 순차적이며, 자원활용이 불가하다.비동기
요청에 대한 반환이 바로 이루어지지 않아도 되며, 요청에 대한 반환이 이루어지지 않아도 다음 작업으로 넘어가며,순차적이지 않으며, 자원활용이 가능하다.
3. 콜백함수
다른 함수의 인자로 전달되어 그 함수안에서 필요한 시점에 호출되는 함수를 의미한다. 콜백함수는 다른 함수에 전달된 함수로써 그 함수가 실행되기 전이나 후에 호출되어 추가적인 작업을 처리하거나 결과값을 반환할 수 있다. 하지만 내부 로직이 길어질 수록 콜백이 많아질 것이고 콜백 지옥이 발생할 수 있다.
4. promise
promise는 자바스크립트에서 비동기처리를 위한 객체이다. 비동기적으로 실행되는 코드에서 특정 작업이 완료되면 콜백 함수를 호출하는 대신 프로미스 객체에 깜싸져서 반환이 되고, 이후 처리를 프로미스 객체를 통해서 수행할 수 있다. 또한 콜백 함수에서 발생하는 콜백 지옥을 방지 할 수 있다.
1. promise의 세가지 상태
pending(대기) : 비동기 처리가 아직 완료되지 않은 상태
fulfiled: 비동기 처리가 완료 되어서 결과값을 가지고 대기중인 상태
rejected: 비동기 처리가 실패하였을 때 오류가 발생한 상태
2. promise의 생성
프로미스 객체는 생성자 함수를 Promise를 이용하여 생성한다. 이 생성자 함수는 하나의 인자를 받으며, 이 인자는 resolve(성공),rejected(실패 )라는 두개의 인자를 받으며 resolve는 성공했을 때의 결과값을, rejected는 실패했을 때의 결과값을 반환한다.
ex)
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Success!');
}, 3000);
});위 코드는 promise의 생성자 함수를 이용하여 myPromise라는 함수를 프로미스 객체로 감싼것이다. setTimeout 함수를 이용하여 3초뒤에 resolve 함수를 이용하여 Success라는 문자열을 반환한다.
3. promise의 이후 처리
프로미스 객체를 호출 한 이후에는 then이라는 메서드를 이용하여 이행 상태일 때와, catch라는 메서드를 이용하여 거부상태일 때를 처리할 수 있다.
ex)
myPromise.then((result) => {
console.log(result);
}).catch((error) => {
console.error(error);
});then 메서드를 이용하여 promise 객체가 이행 상태일 때 result를 출력하고, 오류 상태일 때 error를 출력하는 코드이다.
5. async/await
async/await는 자바스크립트의 비동기 처리 패턴 중 하나로 promise를 기반으로 동작한다. async를 사용하면 promise를 감싸서 반환하고, await를 사용할 수 있는 함수는 promise를 반환하는 함수여야 하기 때문에, await는 async 안에서 사용할 수 밖에 없다.
ex)
const example = async() =>{
const res = await axios.get("API 주소")
return res
}이 코드는 async/await를 사용하여 함수를 비동기적으로 호출하는 코드이다. async를 사용하여 example 함수를 비동기 함수로 선언하고, axios.get()을 await를 사용하여 동기처리를 하였다.
1. try catch
promise는 then과 catch로 이행 상태와 예외처리를 하지만, async/await에서는 try catch로 예외처리와 이행 상태를 핸들링한다.
ex)
const example = async() =>{
try{
const res = await axios.get("API 주소")
return res
} catch(error){
console.log(error)
}
}이 코드는 위의 예시 코드에서 try catch 구문만 추가한 것이다. 이것으로 try 내에서 예외가 발생하면 catch블록으로 이동하여 예외처리를 하고, 프로그램을 계속 실행 할 수 있도록 한다.
async/await에서도 then과 catch를 통해 에러핸들링과 이행상태를 처리할 수 있지만, try catch를 사용하면 좀 더 편하게 에러 핸들링을 구현할 수 있고, promise에서 발생하는 thenChaining을 방지할 수 있다.
