비동기식 작업 (Asynchronous)
- 먼저 시작된 작업의 완료 여부와는 상관 없이 새로운 방식을 시작하는 방식
- CPU가 시분할 처리 방식을 지원하기 때문에 하나의 작업이 완료되지 않아도 다른 작업을 시작할 수 있음
1. Callback function
- 비동기적으로 수행할 함수를 두 번째 인수로 삽입
- 비동기 동작이 많아지는 경우 가독성이 안 좋아짐
loadScript('/my/script.js'); // script.js엔 "function newFunction() {…}"이 존재한다 가정
newFunction(); // 스크립트 로드 전 newFunction() 호출하는 경우, 함수가 존재하지 않는다는 에러가 발생
loadScript('/my/script.js', function() { // 두 번째 인수로 전달된 함수, Callback 함수를 넣어줌
newFunction(); // Callback 함수는 원하는 동작이 완료되면 실행
...
});
loadScript('1.js', function(error, script) {
if (error) {
handleError(error);
} else {
// ...
loadScript('2.js', function(error, script) {
if (error) {
handleError(error);
} else {
// ...
loadScript('3.js', function(error, script) {
if (error) {
handleError(error);
} else {
// 모든 스크립트가 로딩된 후 실행
}
});
}
})
}
});
2. Promise를 활용한 async/await
- Callback 방식보다 가독성을 개선할 수 있음
- 함수는 await 부분에서 Promise가 처리될 때까지 기다림
- await을 사용하기 위해서는 해당 함수 앞에 async가 붙어 있어야 함
async function f() {
let result = await new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000)
}); // 프라미스가 이행될 때까지 기다림
alert(result); // "완료!"
}
f();
1. resolve(value)
작업이 성공, value와 함께 호출
2. reject(error)
작업이 실패, error와 함께 호출
3. then
then의 첫 번째 인수는 성공 결과, 두 번째 인수는 실패 결과
Promise 객체의 실제 내용을 첫 번째 인수로 받을 수 있음 (result)
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("done!"), 1000);
});
// resolve 함수는 .then의 첫 번째 함수(인수)를 실행
promise.then(
result => alert(result), // 실행 결과 -> 1초 후 "done!"을 출력
error => alert(error) // 실행되지 않는 경우
);
출처
https://ko.javascript.info/callbacks
https://velog.io/@change/JavaScript-asyncawait%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C
'IT > Programming Language' 카테고리의 다른 글
[Python] switch -> match (0) | 2022.03.22 |
---|---|
Generic이란 (0) | 2022.03.06 |
[Javascript] closure (0) | 2022.02.20 |
[Javascript] var -> let, const (0) | 2022.02.19 |
[Javascript] ... 활용 (0) | 2022.02.19 |
댓글