Async

1. 동기와 비동기

• 동기(synchronous)

  • 특정 코드의 실행이 완료될 때까지 기다리고 난 후, 다음 코드를 수행하는 것

• 비동기(asynchronous)

  • 특정 코드의 실행이 완료될 때까지 기다리지 않고, 다음 코드들을 수행하는 것

2. 비동기 JavaScript (Timer API)

setTimeout(callback, millisecond)

setTimeout(function() {
    console.log('1초 후 실행');
}, 1000); 
/// 123

• 일정 시간 후에 함수를 실행

• parameter: 실행할 콜백 함수, 콜백 함수 실행 전 기다려야 할 시간 (밀리초)

• return 값: 임의의 타이머 ID

clearTimeout(timerId)

const timer = setTimeout(function () {
console.log('10초 후 실행');
}, 10000);
clearTimeout(timer);
// setTimeout 종료

• setTimeout 타이머를 종료

• parameter: 타이머 ID

• return 값: 없음

setInterval(callback, millisecond)

setInterval(function() {
    console.log('1초마다 실행');
}, 1000);
/// 345

• 일정 시간 간격을 가지고 함수를 반복적으로 실행

• parameter: 실행할 콜백함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)

• return 값: 임의의 타이머 ID

clearInterval(timerId)

const timer = setInterval(function() {
    console.log('1초마다 실행');
}, 1000);
clearInterval(timer);
// setInterval 종료

• setInterval 타이머를 종료

• parameter: 타이머 ID

• return 값: 없음

3. Callback

• 비동기로 코드를 제어하는 방법 중 하나는 callback 함수 활용

• 그러나, 코드가 길어질수록 복잡하고 가독성이 낮아지는 callback Hell 발생

4. Promise

new Promise

• Promise는 class이기에 new 키워드를 통해 Promise 객체를 생성

• Promise는 비동기 처리를 수행할 콜백함수를 인수로 받는데, 이 콜백함수는 resolve, reject 함수를 인수로 전달받음

• Promise 객체가 생성되면 콜백함수는 자동으로 실행됨

• 코드가 잘 처리되었다면 resolve함수를 호출하고, 에러 발생 시 reject함수를 호출

  let promise = new Promise((resove, reject) => {
    // 1. 정상적으로 처리되는 경우 resolve의 인자에 값 전달
    resolve(value);
  
    // 2. 에러 발생시 reject의 인자에 에러메시지 전달
    reject(value);
  })

Promise 객체의 내부 프로퍼티

• new Promise가 반환하는 Promise 객체는 state, result 내부 프로퍼티를 가짐

• 다만, 직접 접근할 수 없고 .then, .catch, .finally 메소드 사용해 접근 가능

State

• 기본 상태는 pending. 비동기 처리를 수행할 콜백함수가 잘 작동했다면 → fulfilled로 변경, 에러 발생 시 rejected

Result

• 기본 상태는 undefined 비동기 처리를 수행할 콜백함수가 잘 작동하여 resolve(value) 호출되면 → value로, 에러 발생해 reject(error) 호출되면 → error 로 변경

Then

• 콜백함수에 작성했던 코드들이 잘 처리되었다면 resolve 함수 호출 → .then 메소드로 접근 가능

• .then 안에서 리턴한 값이 Promise라면 Promise 내부 프로퍼티 result를 다음 .then의 콜백함수의 인자로 받아옴

• Promise가 아니라면 리턴한 값을 .then의 콜백함수 인자로 받아올 수 있음

  let promise = new Promise((resolve, reject) => {
    resolve("성공");
  });
  
  promise.then(value => {
    console.log(value); // "성공"
  })

Catch

• 콜백함수에 작성한 코드의 에러 발생 시 reject함수를 호출하고 .catch 메소드로 접근 가능

  let promise = new Promise(function(resolve, reject) {
    reject(new Error("에러"))
  });
  
  promise.catch(error => {
    console.log(error); // Error: 에러
  })

Finally

• 콜백함수에 작성한 코드들이 정상 처리 여부와 관계 없이 .finally 메소드로 접근 가능

  let promise = new Promise(function(resolve, reject) {
    resolve("성공");
  });
  
  promise
  .then(value => {
    console.log(value); // "성공"
  })
  .catch(error => {
    console.log(error);
  })
  .finally(() => {
    console.log("성공이든 실패든 작동"); // "성공이든 실패든 작동"
  })

Promise Chaining

• 비동기 작업을 순차적으로 진행해야 하는 경우

Promise all()

• 여러 개의 비동기 작업을 동시에 처리하고 싶을 때 사용

• 인자로는 배열을 받으며, 해당 배열에 있는 모든 Promise에서 콜백함수 내 작성했던 코드들이 정상적으로 처리되었다면 결과를 배열에 저장해 새로운 Promise를 반환

• 더불어, 인자로 받은 배열의 Promise 중 하나라도 에러 발생 시, 나머지 Promise state와 상관없이 즉시 종료

  Promise.all([promiseOne(), promiseTwo(), promiseThree()])
    .then((value) => console.log(value)) // ['1초', '2초', '3초']
    .catch((err) => console.log(err));

5. Async, Await

• async, await로 복잡한 Promise 코드를 간결하게 작성 가능

• 함수 앞에 async 사용하고, async 함수 내에서만 await 키워드 사용하기: 이렇게 작성된 코드는 await 키워드가 작성된 코드가 동작한 후에 → 다음 순서의 코드 동작

  // 함수 선언식
  async function funcDeclarations() {
    await 작성하고자 하는 코드
    ...
  }
  
  // 함수 표현식
  const funcExpression = async function () {
    await 작성하고자 하는 코드
    ...
  }
  
  // 화살표 함수
  const ArrowFunc = async() => {
    await 작성하고자 하는 코드
    ...
  }

6. fetch API

fetch API

• 특정 URL로부터 정보를 받아오는 역할

• 이 과정이 비동기로 이루어지기에 경우에 따라 다소 시간이 걸림

  let url = 
    "https://koreanjson.com/posts/1";
  fetch(url)
    .then((response) => response.json())
    .then((json) => console.log(json))
    .catch((error) => console.log(error));

7. Axios

• fetch API와 비슷한 역할을 하는 라이브러리

• 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

• Fetch API보다 사용이 간편하면서 추가적인 기능들이 포함됨

• 써드파티 라이브러리로 설치가 필요함

• 자동으로 JSON 데이터 형식으로 변환됨

GET 요청

axios.get("url"[,config])

POST 요청

axios.post("url"[, data[, config]])