🌏 Promises / Async&Await

비동기 개념 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Concepts

출처 : MDN Web Docs

Promise란?

어떤 작업의 중간상태를 나타내는 객체. 미래에 어떤 종류의 결과가 반환됨을 약속한다.

Promise 객체는 비동기 작업이 종료된 이후에 결과값이나 실패를 처리할 수 있다.
Promise를 사용하면 비동기 메서드에서 마치 동기메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하는게 아니라 promise를 반환해서 미래의 어떤 시점에 결과를 제공한다.

Promise가 가지는 3가지 상태

1. pending : fulfilled되거나 rejected되지 않은 초기 상태
2. fulfilled : 연산이 성공적으로 완료됨
3. rejected : 연산이 실패함.

pending중인 promise는 값과 함께 fulfilled될수도 있고, 오류로 인해 rejected될수도 있다.

• fulfilled상태가 되면 .then()블럭에서 사용할 수 있는 값을 반환한다.
• rejected상태가 되면 어떤 이유 때문에 rejected되었는지를 나타내는 에러메세지를 포함한 결과가 반환된다.

//새 프로미스 생성
let myFirstPromise = new Promise(
  //실행함수는 promsie를 resolve하거나 reject할 수 있다.
  (resolve, reject) => {
  //비동기 코드처럼 보이기 위해 setTimeout 사용
  setTimeout(function(){
    resolve("Success!"); // Yay! Everything went well!
  }, 250);
});

//promise를 fulfilled했을때 할 일은 then()으로 정의, 거부되었을때 할 일은 catch()로 정의
myFirstPromise.then(
  //이행 값 작성
  (successMessage) => {
  console.log("Yay! " + successMessage);
})
.catch(
  //거부 이유 기록
  function(reason){
    console.log('여기서 거부된 promise('+reason+')를 처리하세요.');
  });
}

• finally()
  promise 체이닝의 끝에 배치. 결과가 fulfilled인지 rejected인지 관계없이 promise가 완료된 후 최종 코드 블럭을 실행하려고 할때 사용.

myPromise
.then(response => {
  doSomething(response);
})
.catch(e => {
  returnError(e);
})
.finally(() => {
  runFinalCode();
});

---

Async & Await

async

function()앞에 async를 추가 -> await가 비동기 코드를 호출할 수 있게 해주는 함수.

async function hello() { return "Hello" };
hello(); //promise를 반환.
hello().then((value)=>console.log(value));

async를 사용하면 Promise를 반환하게 한다.

await

async function hello() {
  return greeting = await Promise.resolve("Hello");
};

hello().then(alert);

await는 async 함수 안에서만 사용가능.
.then()블럭 대신 메서드 호출 전에 await를 사용하여 반환된 결과를 변수에 할당.
await는 이 라인에서 일시중지하여 비동기 함수 호출이 결과를 반환할때까지 기다리게한다.
fulfilled된 promise에서 반환된 응답은 greeting변수에 할당된다.

오류 처리

try...catch 구문을 사용하여 오류 처리

async function myFetch() {
  try {
    let response = await fetch('coffee.jpg');

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    let myBlob = await response.blob();
    let objectURL = URL.createObjectURL(myBlob);
    let image = document.createElement('img');
    image.src = objectURL;
    document.body.appendChild(image);

  } catch(e) {
    console.log(e);
  }
}

myFetch();