[Javascript] 비동기 처리 방식

비동기식 작업 (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