JavaScript는 동기적일까? 비동기적일까?

결론부터 말하자면 JavaScript 비동기적인 언어이다.

• 동기(synchronous)

: 요청을 보낸 후 응답을 받아야 다음 요청이 가능한 것이다. 커피 주문을 예로 들면, 커피 주문이 완료되어 커피가 나간 그 시점에 다음 사람의 주문이 가능하다.

• 비동기(Synchronous)

: 요청을 보낸 후 응답 유무에 관계없이 다음 동작이 실행되는 것이다. 커피 주문이 blocking되지 않고 언제든지 주문을 받을 수 있으며, 완성되는 즉시 커피가 나온다.

 

비동기 흐름은 callback, promise, async/await 중 하나의 문법을 이용하여 제어할 수 있다.

 

해결 1 > callback

callback함수는 다른 함수의 인자로 사용되는 함수이다. 어떤 이벤트에 의해 호출되는 함수이며, 직접 함수를 호출하면 안된다. 

하지만, 반복적인 콜백함수 사용으로  callback hell 문제점이 발생하게 된다.

 

이를 해결하기 위해 나온 것이 promise, async/await ! async/await가 제일 최근의 문법이다.

 

해결 2 > promise

new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 300);
});

Promise는 자바스크립트 비동기 처리에 사용되는 객체이다. Promise에는 2가지 인자를 받는다.

 

1. resolve : 호출해 프로미스를 이행 (go to next Action)

2. reject : 호출해 거부 (handle error) 에러를 잡아주는 것

 

Promise 내장 메소드

.resolve : 해결되는 객체를 반환한다.

.reject : 거부된 객체를 반환한다.

.catch : 거부된 경우에만 처리한다.

.then: promise의 반환된 값이 then의 인자로 들어가 비동기적으로 처리한다. (체이닝 가능)

.all : 여러 promise의 결과를 한꺼번에 배열로 반환한다.

.race : 해결 / 거부 될 첫 번째 반복 가능한 promise와 동일한 방식으로 해결 / 거부 된 것을 race반환한다.

.finally : 해결되었을 때 호출되는 콜백 함수를 인수로 받는다.

 

Promise에 3가지 상태가 있다.

 

1. Pending(대기)

: 비동기 처리 로직이 아직 완료되지 않은 상태로, new Promise() 메서드를 호출하면 대기상태이다. 이 상태에 콜백 함수를 선언할 수 있고, 콜백 인자는 resolve 와 reject를 가진다.

2. Fulfilled(이행, 완료)

: 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태이다. 이떄,  resolve()를 실행하면 이행 상태되고, then()을 이용하여 결과 값을 받을 수 있다.

3. Rejected(실패)

: 비동기 처리가 실패하거나 오류가 발생한 상태이다. reject() 를 호출하면 실패 상태이다. 실패한 일, 싱패 터리 결과 값을 catch() 로 받을 수 있다.

 

해결 3 > async/await

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

async와 await는 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법이다. 위에서부터 아래로 한 줄 한 줄 차근히 읽으면서 사고하는 것이 async, await 문법의 목적이다. 이 흐름이 마치 "동기 함수"를 사용하는 구조처럼 보인다. 하지만 실제로는 Promise를 이용해 결과를 반환하는 것이다.

 

await는 Promise를 기다리기 위해 사용된다. 이는 async function 내부에서만 사용가능하다.

 

 

※

fetch는 url 서버에 있는 정보를 받아와 Promise객체를 반환한다.

return fetch('URL')
	.then(data => data.json()))
   	.then(dataJson => console.log(dataJson))

 

 

---

ref.

Promise mdn https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

캡친 판교님 https://joshua1988.github.io/web-development/javascript/js-async-await/

fetch mdn https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch