[TIL] Day31-비동기(2)

Event Loop

[호출스택][백그라운드]
[테스크 큐]

node.js 는 싱글 스레드이다.
node.js는 기본적으로 동기적으로 실행
호출스택에 시작을 넣음
작업 1,2,3 이 있을 때
호출 스택에 작업1 , 작업2, 작업3 을 넣는다.(동기적인 작업)
백그라운드에 작업들을 다 넣게 됨 -> 동시에 진행하게 됨(비동기적인 작업)
작업이 끝난 순서대로 테스크 큐에 넣게 됨(왜? 호출스택에 바로 넣게 되면 등록하고 있는 호출스택에 섞이게 됨)
작업 1, 작업3, 작업2 이렇게 순서를 보장하지 않는 순서로 테스크 큐에 넣게 됨
호출 스택 실행이 끝난뒤 비워지면
이벤트 루프가 테스트 큐의 콜백을 호출스택으로 올림
호출스택으로 올라간 뒤 실행됨

비동기 코딩해보기

fs.readFile 을 통해 callback 만들기

fs.readFile 공식API문서

function (filePath, callback) {
  let options = {
    encoding : 'utf8',
    flag : 'r'
  }
    fs.readFile(filePath, options, (err, data) => {
        if (err) {
          callback(err,null)
        } else {
          callback(null,data);
        }
      });
};

Promise 를 이용하여 콜백함수만들기

function(filePath) {
  let options = {
    encoding : 'utf8',
    flag : 'r'
  }
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, options, (err, data) => {
      if (err) {
        reject(err)
      }
      else {
        resolve(data)
      }
    })
  });
};

promise 의 3가지 상태

Pending
Fulfilled 비동기 요청완료(resolve 가 실행되면 fulfilled 상태) => .then 이 실행
Rejected 비동기 요청 실패(reject가 실행되면 rejected 상태) => .catch 가 실행

에러처리가 안되있을 때 에러가 나오면 프로그램이 꺼짐
그러므로 에러처리를 해줘야한다.

chaining 과 Promise.all , async&await 는 문제는 있지만 따로 적진 않겠다.

Promise.all

Promise.all() 메서드는 순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환
주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

Promise.all은 여러 프로미스의 결과를 집계할 때 유용하게 사용
프로미스들 중 하나라도 reject가 되면 결과는 rejected

async&await

sync&await
에러처리가 필요할 때
try(에러가 아닐때) / catch(에러일때) / finally(에러가 있던 없던 무조건 실행)
기본적인 모양은

const run = async () => {
    let task1 = await code();
    console.log()
}

await 가 들어간다면 그것이 Promise의 .then의 쓰임새와 같다

const run = async () => {
    try {
        let task1 = await code();
        console.log('hi')
        let task2 = await code();
        console.log('hi2')
    }
    catch(err) {
        console.log(err)
    }
    finally {
        console.log('절대 실행해')
    }
}

fetch(url)

fetch MDN

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

위는 mdn 예시

fetch 는 Promise 형태의 함수이며 url을 인자로 받는다.
fetch의 내장함수는 .json() 이 있는데 JSON.parse와 기능이 같다.
참고해보면 좋은 사이트
https://yeri-kim.github.io/posts/fetch/

---

마지막으로...

오늘은 비동기 문제만 풀었기 때문에 특별한 내용은 없음
이벤트 루프와 fetch/Promise.all/async&await 의 사용법을 정확하게 익히고
.then 체인을 잘 이용하자