JS에 설명된 비동기 및 약속

참고: 모든 개념은 서로 연결되어 있으므로 한 가지를 알려면 다른 개념도 이해해야 합니다

차단 코드

완료하는 데 수년이 걸리는 프로그램 루프가 있다고 가정해 보겠습니다. 이제 계속 진행하거나 기다리는 두 가지 옵션이 있습니다. 기다리기로 선택하면 코드 차단으로 간주됩니다. 그렇지 않다면 선택의 여지가 없습니까?. 보자아아.

//blocking code
let sum = 0;
for(let i = 1;i<Number.MAX_SAFE_INTEGER;i++){
  for(let j = 1;j<Number.MAX_SAFE_INTEGER;j++){
      sum = i+j;
}
}
console.log(sum);
// above program is dummy and does not serve any purpose

이제 보시다시피 완료되기 전에는 그 아래에 있는 프로그램을 실행할 수 없습니다. 이제 합계를 실행하려면 몇 년을 기다려야 하며 사용자는 몇 가지 중요한 사항(다른 기능)을 놓칠 수 있습니다.

이러한 상황을 우회하려면 코드와 병렬로 실행될 수 있는 일부 파일에 for 및 console.log(sum)를 넣고 녹색 신호를 보낼 때까지 기다릴 수 있습니다. 이것을 비동기라고 합니다. 비동기 코드는 기본 코드와 병렬로 실행되며 기본 코드가 완료된 후에만 실행됩니다.

비동기 코드에 다른 비동기 코드가 있는 경우. 외부가 끝날 때까지 실행되지 않습니다.

숙제 문제

아래 프로그램의 출력은 무엇입니까?

• setInterval은 일정 간격으로 프로그램을 실행하기 위한 내장 JS 함수입니다.

// will inner ever run ? if yes then why (ask gemini/gpt)
setInterval(()=>{
  console.log("outer");
  setInterval(()=>{
    console.log("inner");
  },1000)
},1000)

비차단 코드

setTimeout(()=>{
   console.log("outer");
   setTimeout(()=>{
     console.log("inner");
     for(let i = 1;i<1000;i++){}
     console.log("inner finished");
   },0)
   console.log("outer finishes");
},0)
console.log("i will run first");

출력

i will run first
outer
outer finishes
inner
inner finished

참고: 위 코드에서 외부 블록이 이제 비동기 코드처럼 내부 블록이 기본 코드로 작동하는 장치를 만들 수 있습니다.

메인 코드가 먼저 실행된 후에 console.log("i will run first")가 작성된 것을 볼 수 있습니다. 어떻게 ? 이를 비차단 또는 비동기 코드라고 합니다. 프로그램의 주요 기능을 방해하지 않습니다. 애플리케이션에서 쓰기, 읽기 등 시간이 소요되는 작업을 수행할 수 있습니다.

비동기 대기

await 키워드는 항상 비동기 함수로 래핑되며 완료될 때까지 그 아래의 다른 코드가 실행되지 않도록 합니다. Async 및 Wait는 키 쌍입니다. 한 가지 더, Wait는 항상 Promise를 반환하는 함수 앞에 배치되고 항상 Try catch 블록으로 래핑됩니다.

async function myPromise(){
 try{
  await doSomething(); // a function that return promise
  console.log("Your file is successfully created"); //only runs when promise is accepted
  }
  catch(err){
   console.log(err); // if promised is rejected;
  }
}
myPromise();
console.log("first");

출력

# consider promise to be successful
first
Your file is successfully created

지금까지의 이해(결론):

1. 함수는 항상 async-await로 래핑된 Promise를 반환합니다.
2. async-await가 함께 진행됩니다.
3. 항상 try-catch 블록에서 대기합니다. (그렇지 않다면 내 블로그를 참조하세요)
4. 이제 비동기 기능 외부의 프로그램은 위와 같이 해결 또는 거부 여부에 관계없이 항상 실행됩니다. (그게 바로 미인이군요 ?)
5. 이제 약속을 이해해 봅시다

이제 약속 적용부터 시작해 보겠습니다.

1. API 요청 - 다른 서버에서 데이터 가져오기
2. 파일 작업 - 파일 읽기 및 쓰기
3. 데이터베이스 쿼리 - 데이터 가져오기 또는 쓰기

모든 사용 사례에서 공통점을 찾으셨나요?

예, 모든 애플리케이션을 실행하는 데 시간이 걸립니다.

약속은 그러한 상황을 적절하게 처리할 수 있는 초능력을 제공합니다. 다시 Promise와 async-await가 함께 진행됩니다.

Promise에는 3가지 상태가 있습니다(위의 예 참조).

• 해결됨(그렇다면 파일이 성공적으로 생성된 후 실행됩니다)
• 거부됨(catch 블록의 코드가 실행됨)
• 보류 중(기다리고 함수 내에서 어떤 코드도 실행되지 않음)

JS에서 맞춤 약속을 만들어 보겠습니다.

Promise를 반환하는 함수 외부의 비동기 키워드는 순전히 선택 사항입니다. 아래 코드를 참조하세요...

데이터 가져오기

// trying to mimic as a server response
function fetchData(success=false){
  return new Promise((resolve,reject)=>{
    if(success){
      setTimeout(()=>{
        resolve("fetched successfully");
      },5000) // execute after 5 sec
    }
    else
    reject("server is not responding");
  })
}
// lets consider fetchData is in-built function

메인

/* lets consider fetchData is a in-built function that gets data from other server. We are passing success para to just mimic the server otherwise it does not serve any purpose here.
*/
async function getData(){
  try{
    let result = await fetchData(true);
    console.log(result) //fetched successfully
  }
  catch(err){
    console.log(err); // in case of rejection
  }
}
getData();
// load other code

다른 코드도 데이터 가져오기 여부에 관계없이 실행됩니다. 이는 성능을 향상시키고 코드 품질을 향상시킵니다.

참고자료

아리안의 오류 처리

위 내용은 JS에 설명된 비동기 및 약속의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!