async/await

Rules

await 는 Promise 객체를 리턴하는 부분 앞에만 붙일 수 있습니다. 이 때, fetch API를 통해 받은 response 데이터는 Promise 객체라서 사용이 가능합니다.

await를 함수 내에서 사용하려면 그 함수에는 반드시 async 키워드가 붙어 있어야 합니다.

1. text aa 출력 후
2. text inside {패치 데이터} 출력

let text = "aa";

fetch("https://jsonplaceholder.typicode.com/posts")
  .then((res) => res.json())
  .then((json) => {
    text = json;
    console.log("text inside", text);
  });

console.log("text", text);

callback 형식으로 메소드를 만든다.
1. text aa 출력 후
2. text inside {패치 데이터} 출력

콜백함수 callBackFunction dksdp textInside는 정의되지 않았지만
실사용처 getData 함수 내부에 실행되면서 textInsie 변수 값을 사용할수잇다.
이같은 사용법을 closure 라고 한다.

let text = "aa";
function getData(callback) {
  let texInside = "bb";
  fetch("https://jsonplaceholder.typicode.com/posts")
    .then((res) => res.json())
    .then((json) => {
      callback(json);
    });
}

function callBackFunction(json) {
  texInside = json;
  console.log("text inside", texInside);
}

console.log("text", text);

getData(callBackFunction);

이제 aync await을 써보자

리턴값이 response인 함수에 대해서 await을 사용할 수 있다.

function getData() {
  return fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
    res.json()
  );
}

async function exec() {
  try {
    const text = await getData();
    console.log("const text  ", text);
  } catch (error) {
    console.log(error);
  }
}

exec();

아래는 then을 사용

async function getData(){
 return fetch("https://jsonplaceholder.typicode.com/posts").then((res) =>
    res.json()
  );
}

getData().then(json => console.log(json));

코드가 짧아 질수있다. 참고하자.