async, await, then

async, then

async function fetchUser2() {
  return 'sunny';
}
const user = fetchUser2();

user.then(value => console.log(value)); // 다음
user.then(console.log); // 바로 윗줄의 함축형

console.log('my name is'); // 먼저



// exptected output: my name is
// exptected output: sunny
// exptected output: sunny

 

 

async, await

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function getApple(){
  await delay(1000);
  return 'apple';
}
async function getBanana(){
  await delay(1000);
  return 'banana';
}

async function pickFruits() {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`;
}

pickFruits().then(console.log);


// expected output: apple + banana

 

예시

// fetch, then

fetch(
  "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year"
)
  .then((response) => response.json())
  .then((json) => {
    setMovies(json.data.movies);
    setLoading(false);
  });
  
  
  
  
// async, await
  
const response = await fetch(
  "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year"
);
const json = await response.json();
setMovies(json.data.movies);
setLoading(false);




// 더 축약

const json = await await fetch(
  "https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year"
).json();
setMovies(json.data.movies);
setLoading(false);