비동기, Promise, async, await 에 대한 자료 정리

내가 정리를 하기에 아직 내공이 부족하고

더 좋은 글들이 있기에

나의 학습 및 차후 리마인드를 위해 정리함

 

async / await 테스트 코드

function fetchItems() {
  return new Promise(function(resolve, reject) {
    var items = [1,2,3];
    setTimeout(() => resolve(items), 3000);
    //resolve(items)
    
  });
}

async function logItems() {
  var resultItems = await fetchItems();
  console.log(resultItems); // [1,2,3]
  console.log('logitems 완료');
}
(()=>{
  logItems();
  console.log('1 즉시실행함수 완료');
})();

(()=>{
  console.log('2 즉시실행함수 완료');
  logItems();
  console.log('3 즉시실행함수 완료');
  console.log('4 즉시실행함수 완료');
})();

 

async / await 결과 코드

"1 즉시실행함수 완료"
"2 즉시실행함수 완료"
"3 즉시실행함수 완료"
"4 즉시실행함수 완료"
[1, 2, 3]
"logitems 완료"
[1, 2, 3]
"logitems 완료"

 

promise then 테스트 코드

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

promise then 결과 코드

1
11
31

promise 에러 처리 코드

function getData() {
  return new Promise(function(resolve, reject) {
    reject('failed');
  });
}

// 1. then()의 두 번째 인자로 에러를 처리하는 코드
//getData().then(
//  handleSuccess,
//  handleError
//);

getData().then(function() {
  // ...
}, function(err) {
  console.log(err);
});

// 2. catch()로 에러를 처리하는 코드
//getData().then().catch();
getData().then().catch(function(err) {
  console.log(err);
});

* catch()를 사용해야 하는 이유로, then 두 번째 인자로 에러를 처리하게 되면, 첫번째 콜백 함수에서 오류가 나는 경우 제대로 잡아내지 못하는 문제가 발생함

 

비동기를 동기식으로 만들어 준다는 말은 정말 이해하기 어려운 말이다.

비동기를 동기화로 만들어 준다면, 병목 현상이 발생하는걸 감안하고 진행이 된다는건가?

 

동기화는 병목을 만드는데 왜?

 

이 말은 이런 뜻이었다.

 

비동기 결과를 받아오는데 있어서 언제 도착할지 모르는 응답을 처리하는건 어려운 일이다.

 

그래서 js는 promise로 해당 작업을 감싸고 결과가 오면 다음 처리를 하거나 에러를 처리할 수 있는 방법을 제시했다.

모든 작업은 순차적으로 동작을 한다. 대기 없이, promise도 당연하게

그렇게 처리를 하고 다른 작업을 하는 언젠가, promise의 비동기 작업에 대한 응답은 도착하고

그 결과는 다음 정의된 순서대로 처리된다.

 

헌데 이러한 promise는 많은 단점을 가지고 있다.

이러한 단점에 대해 상세한 정보는 아래 첨부된 포스트 들에서 확인하는게 좋다.

 

대충 then으로 인한 디버깅의 어려움

처리중인 중간 값을 재사용 하는데 있어 어려움

난잡해지는 코드로 인해 시각적으로 관리하는데의 어려움

등등의 이유가 있을 것이다.

 

 

https://elvanov.com/2597

[Javascript] 비동기, Promise, async, await 확실하게 이해하기 – Under The Pencil

https://ko.javascript.info/async-await

async와 await

https://spicycookie.me/JavaScript/asyncawait/

Home

https://www.daleseo.com/js-async-async-await/

[자바스크립트] 비동기 처리 3부 - async/await

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

async 함수로 빼서 구현하기 : https://www.daleseo.com/js-window-fetch/

[자바스크립트] fetch() 함수로 원격 API 호출하기

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%B2%98%EB%A6%AC-async-await

[JS] 📚 비동기처리 (async / await) 개념 & 문법 💯 정리

https://woojin.tistory.com/30

[Javascript] 동기/비동기 정리(3) - JS 초짜가 async/await 완벽하게 이해하기(+Typescript로 변환까지)