비동기 Promise & async await 1

https://www.youtube.com/watch?v=PYpVmpCasow&list=PLcqDmjxt30Rt9wmSlw1u6sBYr-aZmpNB3&index=11 

 

* 참고 : https://elvanov.com/2597

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

 

promise 장점

실행은 됬는데 결과값을 나중에 (내가 원할 때)할 수 있음
▶  setTimeout과 달리 코드가 분리됨

▶ promise return : 프로미스가 resolve된 값이 return 됨

▶ promise가 아닌 일반 값을 return : 그 값이 그대로 다음으로 넘어감


promise 단점

- promise 안에 하나라도 잘못되면 catch로 들어감
- promise.all이 아니라 allsSettled만 사용함(실패한 것만 필터링해서 다시 시도)


콜백의 최대 단점
- 값을 무조건 바로 받아야 함
- 콜백을 여러 번 쓰면 왜 안 좋은가?

 

 

비동기

- 동시개념x, 순서의 문제
- 동기코드는 일반적으로 왼→오, 위 →아래
- 비동기코드는 보이는 순서가 반드시 순서는 아님
- 한 번 비동기는 영원한 비동기
- setTimeout 자체는 비동기이나 검색해야 함
- 자바스크립트 = 싱글스레드 (동시의 개념x)

- 백그라운드(비동기가 들어감)에 있는 것들은 동시에 가능
(setTimeout, promise, process nextic, 네트워크 요청(ajax), 이벤트 리스너, 이벤트 리미터)
- 실행할 때는 호출스택으로 올라가야함 ▶ 테스트 큐에서 먼저 올라가야 함(대문자 M = 매크로테스트 큐)
- 소문자 m = 마이크로 : 프로미스, 프로세스.넥스트틱(process.nextTick) 
그외 나머지는 매크로
- 마이크로태스크큐가 꽉 차있으면 영원히 매크로태스크는 실행되지 않음

 

 

[예제]

let a = 2;

const p = new Promise((resolve, reject) => {
  //동기
  console.log("제일 먼저") //여기가 먼저 호출됨
  setTimeout(() => {
    a = 6;
    console.log(a); //6
    resolve(a);
  }, 0);
});

console.log("딴짓");
p.then((result) => {
  console.log("result", result);
  return 1
}).then((result) => {
  console.log(result) //1 
}).then((result) => {
  console.log(result) //undefined
});

//결과
//제일먼저
//딴짓
//6
//result 6
//1
//undefined

 

[예제 2]

let a = 2;

const p = new Promise((resolve, reject) => {
  //동기
  console.log("제일 먼저") //여기가 먼저 호출됨
  setTimeout(() => {
    a = 6;
    console.log(a); //6
    resolve(a);
  }, 0);
});

p.then((result) => {
  console.log("result", result);
  return Promise.resolve(1)
}).then((result) => {
  console.log(result) //1 
}).then((result) => {
  console.log(result) //undefined
});

//결과
//제일먼저
//6
//result 6
//1
//undefined

 

* 참고 : https://ko.javascript.info/promise-basics

프라미스

 

 

[예제 3]

let exPromise = new Promise(function (resolve, reject) {
  //resolve, reject는 자바스크립트에서 자체 제공하는 콜백
  //신경쓰지 않고 {} 작성하면 됨
  //resolve(value) : 일이 겅공적으로 끝난 후 그 결과를 나타내는 value와 함께 호출
  //reject(error) : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
});

let promise1 = new Promise(function (resolve, reject) {
  // 프라미스가 만들어지면 executor 함수는 자동으로 실행됩니다.

  // 1초 뒤에 일이 성공적으로 끝났다는 신호가 전달되면서 result는 '완료'가 됩니다.
  setTimeout(() => resolve("완료"), 1000);
});

let promise2 = new Promise(function (resolve, reject) {
  // 일을 끝마치는 데 시간이 들지 않음
  resolve(123); // 결과(123)를 즉시 resolve에 전달함
});

let promise = new Promise(function(resolve, reject) {
    resolve(1);
  
    setTimeout(() => resolve(2), 1000);
  });
  
  promise.then(alert); //1이 출력(첫 번째 reject/resolve 호출만 고려대상)