동기

현재 실행중인 task가 종료할 때 까지, 다음 task가 대기하는 방식

• 동기 처리는 코드를 순서대로 하나씩 실행, 실행 순서 보장
• 현재 실행중인 task가 종료될 때까지 다음 task가 실행이 안된다는게 문제 = 블로킹(blocking)

블로킹

작업이 중단된다는 의미이다.
즉, 네트워크 통신에서 요청이 발생하고 완료될 때까지 모든 일을 중단한 상태로 대기해야 하는 것을 블로킹 방식이라고 한다.

자바스크립트는 싱글쓰레드 언어이다.
한줄씩 동기적으로 실행된다.

2️⃣ 비동기

현재 실행 중인 코드가 완료되지 않아도, 다음 코드로 넘어간다.

• 현재 실행중인 task가 완료되지 않아도, 다음 task를 실행하기 때문에 블로킹이 발생하지 않는다.
• task의 실행 순서가 보장되지 않는다.

비동기 처리가 필요한 이유

자바스크립트는 한번에 하나의 task만 실행할 수 있는 Single Thread 언어이다. 그렇기 때문에 처리 시간이 걸리는 task를 실행하면 Blocking(작업 중단)현상이 발생한다.

이미지 출처: https://adrianmejia.com/asynchronous-vs-synchronous-handling-concurrency-in-javascript/

setTimeout 비동기 함수

하지만... 자바스립는 싱글스레드인데 왜 setTimeout이 먹히냐?
결론 Web APIs가 있기 때문이다. 브라우저는 생각보다 더 많은 기능을 해준다. 브라우저안은 자바스크립트 엔진만 있는게 아니라 Web API도 있다. 웹 API 자바스크립트 언어와는 별개로 여러 API를 제공한다. 자바스크립트 엔진이 아니라 별도의 브라우저 환경에서 실행된다. 이 환경은 멀티스레드 환경이다.

3️⃣ 비동기 처리 종류

1. AJAX(Asynchronous JavaScript And XML)

서버와 통신하기 위해 XMLHttpRequest객체를 사용하는 것.

• JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 교환 가능
• 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식
• 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데, 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있도록 한다.

2. 콜백함수

함수의 매개변수가 함수일 때, 매개변수로 받은 함수

구조

let val = function(🐑){
		return 🐎
    }
function fn(arg){
	arg()
}

fn(val)

val함수는 현재 바로 실행되지는 않지만 다른 함수의 입력값으로 전달되어서 다른 함수에 의해서 나중에 호출된다라 해서 콜백함수라고 부른다.

콜백지옥(callback hell)

함수 안에 함수가 반복되어 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상

예제)

timer(1000,function(){
    console.log('작업');
    timer(1000,function(){
        console.log('작업');
        timer(1000,function(){
            console.log('작업');
        });
    });
});

3. Promise

Promise객체는 javascript에서 비동기 처리를 지원하는 객체 중 하나이다.

• ES6 등장한 Promise는 콜백함수보다 비동기 처리의 순서를 파악하기 쉽다.
• Promise는 자바스크립트 비동기 처리에 사용되는 객체이며 비동기 작업이 완료된 이후 다음 작업을 연결시켜 진행하게 해준다.

Promise 만드는 방법

기본 형태

const myPromise = new Promise((resolve, reject)=>{
	//구현 ..
})

promise가 생성될 때 프로미스 안에있는 콜백함수는 자동적으로 생성된다.

Promise 호출 과정

1. 비동기 함수 내에서 Promise 객체를 생성하고 그 내부에서 비동기 처리를 구현한다. 이때 비동기 처리에 성공하면 resolve 메소드를 호출한다.
2. 이때 resolve 메소드의 인자로 비동기 처리 결과를 전달 하는데, 이 처리 결과는 Promise 객체의 후속 처리 메소드로 전달된다.
3. 만약 비동기 처리에 실패하면 reject 메소드의 인자로 에러 메시지를 전달한다. 이 에러 메시지는 Promise 객체의 후속 처리 메소드로 전달된다.

후속 처리 메소드에는 대표적인 then(Promise 반환)과 catch(예외)가 있다.

Promise의 3가지 상태(states)

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스 상태(states)입니다. 여기서 말하는 상태란 프로미스의 처리 과정을 의미한다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖습니다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

Pending(대기)

new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다.

new Promise()

new Promise(function(resolve,reject){
	//...
})

Fulfilled(이행)

여기서 콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 된다.

new Promise(function(resolve, reject){
	resolve();
})

function getData(){
	return new Promise(function(resolve, reject){
		let data = 100;
      	resolve(data);
	})
}

//resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData){
	console.log(resolvedData); //100
});

프로미스의 '이행' 상태를 좀 다르게 표현해보면 '완료' 입니다.

Rejected(실패)

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했습니다. 여기 reject를 아래와 같이 호출하면 실패(rejected) 상태가 된다.

new Promise(function(resolve, reject){
	reject();
})

그리고, 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.

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

4. fetch()

fetch()는 네트워크 통신 함수이며 대표적으로 Promise 객체를 사용하는 함수이다.
fetch()의 Return 값은 Promise 데이터타입을 리턴한다.

그리고 이 Promise 데이터타입은 response Object를 돌려줄 것이다.

• fetch()가 리턴한 값(promise 객체)은 then(),catch()메서드를 사용할 수 있다.

  • then()
    코드가 제대로 수행되었을 때 작동.
    • then() 함수 안에는 callback()를 입력한다.
    • callback() 안에는 응답을 받았을 때 수행하는 코드를 작성.
    • 성공적으로 실행됐다면 response에는 fetch()의 결과가 들어있다.

  • catch()
    문제가 발생했을 때 작동
    • catch()에는 callback()를 입력한다.
    • 비동기 작업에 실패했을 때 수행하는 코드 작성
    • err에는 에러 관련 정보들이 들어있다.

.then(function(response){ })
response 파라미터에 안에는 여러가지 정보(서버와 통신결과,서버와 어떤 데이터를 통신했는지 등)가 저장 되어있다.

response.json()

1. api문서에 있는 텍스트를 json데이터타입이라는 것을 자바스크립트에게 알려준다.
2. 웹 브라우저는 json데이터타입에 맞게 그 데이터를 해석해서 자바스크립트 데이터 타입으로 돌려주게 된다.
3. response.json 리턴값은 promise객체가 반환된다.
4. 결론 : response.json()은 promise이다.
5. 반환된 promise 역할은 json텍스트를 자바스크립트 데이터타입으로 컨버팅하는 프로미스이다.
6. 이 프로미스는 컨버팅작업이 끝났을때 then을 호출하는 것이다.
7. response.json()은 promise이므로 then을 사용가능

promise를 사용하는 방법은 두가지 방법이 있다.

Nested방식

promise는 then()을 사용할 수 있기 때문에 then()안에 또 then()이 들어가고 다시 또 then()이 들어가는 방식

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(function (response) {
    response.json().then(function (data) {
      console.log("data", data);
    });
  })
  .catch(function (reason) {
    console.log("reason", reason);
  });

chaining방식

then()안에서 promise를 return 하고 바깥쪽에서는 내부 then()과 외부 then()을 연결하는 방식이다.

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(function (response) {
    return response.json();
  })
  .catch(function (response) {
    console.log("response", response);
  })
  .then(function (data) {
    console.log("data", data);
  });

❗️둘다 장단점이 있지만 chaining방식을 더 많이 사용한다.

5. async & await

비동기함수 timer 실습

function timer(time) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(time);
    }, time);
  });
}

timer(1000)
  .then(function (time) {
    //1000은 time인자에 들어간다.
    console.log("time:" + time);
    return timer(time + 1000);
  })
  .then(function (time) {
    console.log("time:" + time);
    return timer(time + 1000);
  })
  .then(function (time) {
    console.log("time:" + time);
  });

React 환경 then

//fetch 함수를 실행하면 Promise 객체를 반환한다.
const [coins, setCoins] = useState([]);
useEffect(() => {
  fetch("https://api.coinpaprika.com/v1/tickers?limit=10")
    .then((response) => response.json())
    .then((json) => setCoins(json));
  setLoading(false);
}, []);
//useEffect함수를 사용하여 한번만 통신하게 한다.
//fetch로 얻어온 데이터값 response값을 response.json()을 이용하여 자바스크립트 객체로 반환.
//변환된 객체값을 setCoins변수에 넣어 state값으로 넣어준다.

async & await

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다.

• Promise Chaining 방식으로 .then()을 연쇄적으로 호출하다보면 에러가 발생했을 때 몇번째 then에서 문제가 발생한건지 파악하기 어려워질 수 있다.
• .then()단점을 해결하기 위해 ES7에 async & await이 등장한 것이다.
• async & await을 사용하면 await이 대기를 처리해주기 때문에 .then()이 거의 필요하지 않다. 또 promise에서 사용한던 .catch 대신 try/catch 구문을 사용할 수 있는 장점이 생긴다.
• async & await을 사용하면 비동기 코드를 동기 코드처럼 보이게 작성하여 가독성을 높일 수 있다.

async

• 비동기적으로 동작하는 함수이다.
• 함수 앞에 붙이면 그 함수는 promise를 return 한다.

await

• 비동기적인 함수 앞에 함수가 실행되는것을 기다리게 만든다.
• await가 붙어있는 promise를 리턴하는 함수는 반드시 다른 함수 안에 실행되어야 하고 그 함수는 앞에 async가 작성되어 있어야 한다.

실습1)

function timer(time) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(time);
    }, time);
  });
}


async function run() {
  var time = await timer(1000);
  console.log("time:" + time);
  time = await timer(time + 1000);
  console.log("time:" + time);
  time = await timer(time + 1000);
  console.log("time:" + time);
}

run();

실습2)

function timer(time) {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve(time);
    }, time);
  });
}
async function run() {
  console.log("start");
  var time = await timer(1000);
  console.log("time:" + time);
  time = await timer(time + 1000);
  console.log("time:" + time);
  time = await timer(time + 1000);
  console.log("time:" + time);
  console.log("end");
}

async function run2() {
  console.log("parent start");
  await run();
  console.log("parent end");
}
run2();

//순서대로 동작한다.

//console.log(run()); -> promise 리턴 -> 이말은 run()앞에도 await을 사용할 수 있다.
/*
결론 : async는 평범한 함수를 promise를 리턴하는 비동기적인 함수로
만들어주는 키워드이고 그렇기 때문에 함수안에서는 await 사용할 수 있다.
*/

실습3)

async & await & .then() 병행 활용

async function run() {
  console.log("start");
  var time = await timer(1000);
  console.log("time: " + time);
  time = await timer(time + 1000);
  console.log("time: " + time);
  time = await timer(time + 1000);
  console.log("time: " + time);
  console.log("end");
  return time;
  // async함수에 return값을 만들어 준다면 run2()함수 안 time에 값이 들어간다.
}
async function run2() {
  console.log("parent start");
  var time = await run();
  console.log("time:" + time);
  console.log("parent end");
}
console.log("parent parent start");
run2().then(function () {
  console.log("parnet parent end");
});

반복해서 async()함수를 다시 만들어 사용하고 싶지 않을 때는 마지막에 then()함수를 사용해주는 방법이 있다.

실전)

promise객체의 메서드인 fetch로 통신하여 await을 이용하여 json변수에 넣어주고 async함수로 감싸주어 json형식 데이터를 자바스크립트 객체로 변환하는 json()을 이용하여 getMovies 함수로 넣어주었다.

const getMovies = async () => {
  const json = await (
    await fetch(
      `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
    )
  ).json();
};
/*
const getMovies = async () =>{
	const response = await fetch(`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`);
	const json = await response.json();
};
*/

---

결론

1. promise와 async & await의 차이점을 명확하게 알고 써야한다.
2. 둘다 비동기 실행을 하기위한 방법
3. 둘다 비동기 실행 될 내용을 동기가지고 실행하고 싶은 것이다.
4. async & await은 catch라고 하는 구문을 별도로 지원하지 않는다.
   자바스크립트에는 기본적으로 예외 처리할 수 있는 문법 중 try, catch문이 있다.
   try catch 구문 안에 async & await 사용하는 걸 넣어 놓으면 문제가 생기면 catch에서 잡아 낼 수 있다.

---

참고자료
Promise 만드는 방법
Promise states
콜백함수 - 생활코딩
async & awiat - 생활코딩
많이 참고한 자료