동기 비동기

동기 vs 비동기통신

동기

• 서버에 요청을 보낸 후 응답이 올깨까지 다음 동작을 수 행 하지 못함
• 설계가 간단하고 직관적이지만 처리과정이 비효율적임

비동기

• 서버에 요청을 보냈을때, 응답과 상관없이 다음 동작을 수행 할 수 있음
• 설계가 복잡하지만 효율적인 처리 가능

자바스크립트

js는 동기적언어이고 , blocking이며, single-threaded한 언어이다.

자바스크립트의 비동기

js의 동기적 이슈로 인해 비동기적으로 처리하는 방법존재한다.

1. 콜백 Callback (지옥)

• 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말하는데, 보통 콜백함수는 함수의 매개변수로 전달하여 특정 시점에 콜백 함수를 호출한다.
• 단점으로 가독성이 떨어지며, 많은 양의 콜백처리는 콜백지옥을 불러온다.
  해결 방법으로 Promise와 Async/await가 있다.

2. Promise

const promise = new Promise ((resolve, reject) => {
	//executor 실행자, 실행 함수.. 
})

ES6에서 도입된 기능이다.
resolve는 new Promise가 만들어 질때 자동으로 실행된다.

• resolve : 작업이 성공적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출한다.
• reject : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출한다.

executor의 인수 resolve, reject는 자바스크립트가 자체적으로 제공하는 콜백이다.
(executor는 자동으로 실행되는데 여기서 원하는 일이 처리된다. 처리가 끝나면 성공 여부에 따라 resolve나 reject를 호출한다)

Promise의 3가지 상태(처리과정을) 갖는다.
1. Pending : 비동기 처리 로직이 아직 완료되지 않은 상태 (대기)
2. Fulfilled : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 (성공)
3. Rejected : 비동기 처리가 실패하거나 오류가 발생한 상태(실패)

const myPromise = new Promise((resolve, reject) => {
	setTimeout (() => {
    resolve(1);
   }, 1000);
 });
 
 myPromise.then(n => {
 console.log(n);
});

작업이 끝나고 또 다른 작업을 하고자 할때, .then(...)을 붙어서 사용하면 된다.

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error());
  }, 1000);
});

myPromise
  .then(n => {
    console.log(n);
  })
  .catch(error => {
    console.log(error);
  });

성공하면 .then()메소드가 실행되고, 실패하면 reject를 사용하고,
error는.catch()메소드를 사용해서 처리한다.

3. async/ await
async/ await는 ES8문법 중 가장 최근에 나온 문법이다.
콜백함수와 promise의 단점을 보완하고 개발자가 읽기 좋은 코드를 작성하게 도와준다.

async/await는 promise를 기반으로 하있다.
모든 async함수는 promise를 리턴하고, 모든 await함수는 일반적으로 promise가 된다.

async function 함수명(){
 await 비동기처리_메서드명();
}

함수 앞에 async를 붙이고, promise앞에 await 키워드를 붙인다.
함수 앞에 async가 선언 되어야만 await를 사용할 수 있다.

• async
  async는 function앞에 위치한다.
  function앞에 async를 붙이면 해당 함수는 항상 promise를 반환한다.

• await
  await를 만나면 promise가 처리될 때 까지 기다린다. 결과는 그 이후에 변환된다.
  일반 함수에는 사용할 수 없다. async함수가 아닌데 await를 사용하면 문법 에러가 발생한다.
  await는 async 함수에서만 발생한다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function process() {
  console.log('안녕하세요!');
  await sleep(1000); // 1초쉬고
  console.log('반갑습니다!');
}

process();

async에서는 catch를 통해 에러처리/예외처리를 할 수 있다.

async function logTodoTitle() {
  try {
    var user = await fetchUser();
    if (user.id === 1) {
      var todo = await fetchTodo();
      console.log(todo.title); // delectus aut autem
    }
  } catch (error) {
    console.log(error);
  }
}