JS는 논블로킹 I/O 특징을 가지고있어서, 한가지 작업을 해도 비는 시간이 생기면 다른 작업을 시작한다. 그렇기 때문에 비동기 처리를 해줘야 작업을 원하는 순서대로 실행시킬 수 있다.
(순서를 맞춰 코드를 실행)
비동기 발생 함수 : setTimeOut(), query(), setInterval() 등....
비동기 처리 방식
1. 콜백 함수 : 할 작업을 다 수행하고 나서 다음 작업을 수행
2. promise 객체 사용
3. then & catch 사용
4. async await (es2017 추가)
JavaScript에서 CallBack함수는 비동기를 순차적으로 처리하기 위한 편법같은 존재이지 실제로 비동기를 위해 탄생한 객체로는 Promise 객체가 있다. Promise 객체는 비동기 작업의 성공, 실패와 그 결과값을 나타내어 비동기 작업을 비교적 깔끔하게 수행할 수 있다.
프로미스 함수에 then을 이어 붙여서 프로미스체이닝을 구현할 수 있다
let promise = new Promise(function (resolve, reject) {
setTimeout(() => resolve("완료"), 3000);
})
.then(
function (result) {
console.log(result);
return result + "!!!!!";
},
function (error) {}
)
.then(
function (result) {
console.log(result);
return result + "!!!!!";
},
function (error) {}
)
.then(
function (result) {
console.log(result);
},
function (error) {}
);
결과
완료
완료!!!!!
완료!!!!!!!!!!
async / await 문법은 비교적 최신에 추가된 (es2017) 문법으로 프로미스 객체를 좀 더 쉽게 사용하기 위해 사용한다. 즉, 비동기 처리를 위해 사용하는 신규 문법이라 볼 수 있다.
promise를 이용한 코드를 async await을 이용한 코드로 리팩토링한 결과이다.
let promise = new Promise(function (resolve, reject) {
setTimeout(() => resolve("완료!"), 3000);
});
promise.then(
function (result) {
console.log(result);
},
function (error) {
console.log(reject);
}
);
async function f() {
let promise = new Promise(function (resolve, reject) {
setTimeout(() => resolve("완료!"), 3000);
});
let result = await promise;
console.log(result);
}
f();