promise, async, await

동기적 : 1,2,3 -> 1 -> 2 -> 3 순차적으로 실행
비동기적 : 1,2,3 -> 1,2,3 각자 실행
👉 콜백헬에서 벗어날수 있게 한 promise문법 !

promise

promise = 약속

promise는 약속이다
만약 우리가 스타벅스에서 커피를 주문 했을 때 주문을 고민하게 된다면
바로 보류 상태이다
이제 커피를 주문하려고 한다면 커피 점원은 "커피 나오는 시간은 00분 필요하다" 라고 약속(promise)을 하게 된다
이 약속은 결과(커피를 주거나/못주거나)를 준다는 것이다
그리고 기다리는 시간동안 우리는 다른 일을 할수 있다
이후에 커피가 나왔을 때 주문이 완료가 되었고 즉, 해결된 상태가 된다(fulfilled:약속 이행)
하지만 약속이 이행 되지 않을 수도 있다 커피 원두가 떨어졌다면..?
약속이 이루어지지 않은 거절된 상태(rejected)가 된다

위의 예시를 코드로 풀어보면,

// 1. 
const orderCoffee = new Promise((resolve, reject) => {
  const requestObj = new XMLHttpRequest();
  requestObj.open("GET", "orderCoffee.txt");
  requestObj.onreadystatechange = () => {
    if (requestObj.readyState === 4 && requestObj.status === 200) {
      const result = requestObj.responseText;

      // 2.
      resolve(result);

      // 3.
      // reject(result);
    }
  };
  requestObj.send();
});

// 4.

// 5.
orderCoffee
  .then((asyncResult) => {
    console.log(asyncResult);
    console.log("약속이 이루어졌습니다.");
    return asyncResult;
  })
  .catch((error) => {
    // 6.
    console.log(new Error("커피주문이 정상적으로 이뤄지지 않았습니다."));
  });

1. 커피를 주문하는 프로미스 객체를 생성합니다. 생성자에는 약속을 지키기 위한 resolve와, 약속을 지키지 못했을 때를 대비한 reject 두 가지를 인자로 전달합니다.
2. resolve 메소드가 실행되면 then 메소드가 자동으로 호출됩니다.
3. resolve 메소드 호출이 없는 상태에서 reject 메소드가 실행되거나 통신에 문제가 발생하면 catch 메소드가 자동으로 호출됩니다.
4. 이 부분에 주목해주세요. then 메소드를 사용하면 비동기 코드를 마치 동기적인 코드처럼 작성할 수 있습니다. 앞에서 작성한 XHR 코드와 비교해보는것도 좋습니다.
5. resolve 메소드가 실행될때 전달된 인자는 then 메소드의 콜백함수의 인자로 전달됩니다.
6. then 메소드는 프라미스 객체를 반환하기 때문에 catch 메소드를 이어서 쓰는것이 가능합니다.

👉 정리하자면 promise는 비동기 코드를 동기적인 코드처럼 작성할 수 있다 이유가 뭘까 ❓
약속을 의미로 promise 객체가 만들어져 fulfilled/reject 둘중에 한가지 결과를 가지게 된다
then과 catch 를 이용해 동기적으로 코드를 이어 쓸 수 있는것이다
이제 콜백지옥에서 해방되어 보자

fetch API를 이용해보자
promise 객체는 크게 두가지 상황으로 가정한 메서드를 가졌다
then과 catch 이다

let result = fetch('https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json');
result
    .then((data) => data.json())
    .then((result) => {
        console.log(result);
        return result;
    })
    .catch((result) => {
        console.log(new Error(result));
    });

async, await

async 키워드는 어떤 함수든 프로미스 객체를 반환하게 할수있다(return을 하지 않아도)
await는 꼭 async 함수 안에서만 사용 할수있다
await는 async 함수 안에서 promise 객체를 반환할 때까지 다음코드를 실행 시키지 않고 기다리게 한다 그리고 promise 객체의 fulfilled 값을 반환한다

async function f() {
// 2.
let promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("완료!"); // 3.
}, 1000)
console.log("a"); // 4. 
});

// 5. 
let result = await promise;

// 6.
alert(result);
}

// 1. f() 함수 호출
f();

결과 화면 >

위 코드는 함수 f()를 정의하고, 이 함수를 호출하는 코드입니다.
1. f() 함수를 호출
2. Promise 객체를 생성, Promise 객체는 setTimeout() 메서드를 사용하여 1초 후에 'resolve' 상태가 되도록 설정
3. 1초 후 Promise 객체가 'resolve' 상태가 되면 then() 메서드가 실행
4. Promise 객체를 생성후 콘솔에 'a' 출력
5. await 키워드를 사용하여 Promise 객체가 'resolve' 상태가 될 때까지 대
Promise 객체가 'resolve' 되면,
6. Promise 객체가 'resolve' 된 후 실행되는 코드 , alert() 메서드가 실행되어 '완료!'라는 메시지 창이 띄워진다