비동기 JS - 콜백, 약속, 비동기 대기

고지사항: 이 포스팅은 영상과 조이 아이스크림 포스팅을 기반으로 작성되었습니다.

아래 코드 스니펫을 보고 질문에 답하세요.

const posts =[
{title:'post one', body:'This post one'},
{title:'post two',body:'This is post two'}
]
function getPosts(){
  setTimeout(()=>{
  let output ='';
  posts.forEach((post,index)=>{
     output +=`<li> ${post.title},</li>';
});
  document.body.innerHTML = output;},1000);
}
function createPost (post ){
  setTimeout(()=>{
   posts.push(post);

  },2000);
}
getPosts()
createPost({title:'Post Three', body:'This is post three'} );

질문

1. 위의 코드를 실행하면 어떻게 될까요? 설명?

게시물 1과 게시물 2만 인쇄되는 것을 볼 수 있습니다. create Post에는 2초의 지연이 있고 CreatePost가 실행될 때(2초) getPosts 함수가 이미 실행을 완료했기 때문에 게시물 3을 인쇄할 수 없습니다.

2. 위의 코드 스니펫을 수정하여 위의 내용을 수정하고 세 개의 게시물을 인쇄하려면 어떻게 해야 합니까?

createPosts 내부에서 getposts 함수를 호출하도록 코드 스니펫을 수정하여 이를 수행할 수 있습니다. 이렇게 하려면 createPost 내부에 getPosts 함수를 추가하고 아래와 같이 콜백을 추가해야 합니다.

function createPost(post,callback) {
 setTimeout(()=>{
  posts.push(post);
 callback();
},2000);
}
 //and then

createPost({title:'Post three', body: 'This is post three'}, getPosts);

3. 위 (2)의 수정된 코드를 사용하여 콜백 대신 약속으로 동일하게 수행합니다.

function createPost(post) {
  return new Promise((resolve,reject) =>{
    setTimeout(()=> {
      posts.push(post);

      const error = false;

      if(!error){
       resolve();
      } else {
       reject('Error: something went wrong');
    }
},2000);
});
}

createPost({title:'Post three', body:'This is post three'}).then(getPosts).catch(err=> console.log(err));

4. promise.all의 용도는 무엇입니까?

서로 다른 약속이 많은 경우 .then 많은 약속을 작성하는 대신 아래와 같이 promise.all 을 수행할 수 있습니다.

const promise1 = Promise.resolve('Hellow world')
const promise2 = 10;
const promise3 = new Promise((resolve, reject)=>setTimeout(resolve,2000,'Goodbye'))
const promise4=fetch('https://jsonplaceholder.typicode.com/users').then(res=>res.json());


Promise.all([promise1,promise2,promise3,promise4]).then(
(value)=>console.log(values)
);

5. 약속의 맥락에서 'async , await'의 사용은 무엇입니까?

예 1

async function init(){

  await createPost({title:'Post three', body:'This is post three'});
  getPosts()
}

init()

await 키워드를 사용하면 createPost가 getPosts()로 이동하기 전에 실행을 완료하기 때문에 위 코드의 출력에서 ​​3개의 게시물을 모두 볼 수 있습니다.

가져오기가 있는 예 2

async function fetchUsers(){
  const res = await fetch ('https://jsonplaceholder.typicode.com/users');

const data = await res.json()

console.log(data);

}

fetchUsers();

6. async await를 사용하여 작성된 프로그램을 기반으로 질문에 답하십시오.

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")

  await toppings_choice()

  console.log("D")
  console.log("E")

}

// Trigger the function

kitchen();
console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

ㅏ. 결과는 무엇이고 그 이유는 무엇입니까?

이것의 출력은 다음과 같습니다.

output
A
B
C
doing the dishes
cleaning the tables
taking orders
which topping would you love
D
E

이는 toppings_choice()에서 주방 기능의 실행이 일시 중지되었고 toppings_choice()가 백그라운드에서 실행되는 동안 다른 console.log가 실행된 다음 주방 기능의 나머지 줄이 실행되었기 때문입니다.

비. getPosts 예제와 이 예제의 주요 차이점은 무엇입니까?

getPosts 예제에서 우리가 사용한 async 함수는 init()이고 내부에 await 키워드가 있는 하나의 약속이 있으며 실행이 완료될 때까지 'CreatePosts' 함수에서 실행이 일시 중지되지만 이 예제에서는 console.logs인 여러 함수가 있습니다. , 대기 기능은 주방 기능 외부의 console.logs가 실행되는 동안 주방 기능 내부에서 일시 중지됩니다.