Javascript의 비동기식 프로그래밍

JavaScript 코드에서 콜백, 약속 또는 최신 비동기식 대기를 사용한 적이 있습니까?너는 너의 머리를 그 물건들에 둘러싸기가 매우 어렵다고 생각하니?너는 엔진 뚜껑 아래에서 무슨 일이 일어났는지 생각해 본 적이 있니?좋아, 우리 그들의 비결을 파악해 보자.

소개

자바스크립트의 비동기 프로그래밍은 자바스크립트를 처음 배우는 사람들을 곤혹스럽게 할 수도 있고, 때로는 경험이 있는 사람들을 곤혹스럽게 할 수도 있다. 적어도 나는 배후에서 무슨 일이 일어났는지 모른다.우리가 알고 있는 바와 같이 자바스크립트는 단일 루틴이다. 이것은 자바, c 등 다른 다중 루틴 프로그래밍 언어와 달리 한 번에 하나의 작업만 완성할 수 있다는 것을 의미한다.그렇다면 API에서 뭔가를 얻거나 백엔드에서 비동기 데이터베이스 작업을 수행하려면 어떻게 해야 합니까?이것이 바로 우리의 답조, 약속, 비동기적인 기다림이 나타나는 곳이다.우리는 자바스크립트 메인 라인을 막고 싶지 않지만, 비동기 작업이 끝날 때 알림을 받기를 희망합니다. 이것이 바로 우리가 비동기 프로그래밍 개념을 사용하는 곳입니다.그것들과 그것들이 어떻게 진화했는지 봅시다...

비동기식 JavaScript 개발

* Callbacks
* Promises
* Async-Await

답조

callbacks are just the functions passed in as an argument which you want them to be called after some operation is done

      function add(x,y,callback){
            const sum = x+y;
            callback(sum);
       };

       add(2,3,function(sum){
       console.log('sum',sum); //sum 5
       });

this is fairly simple all we need to do is pass in a function which we want to execute after the asynchronous operation is done But,the major problem this approach introduces is when we want to do multiple asynchronous calls and we have to do them one after the another... it introduced what is popularly known as call-back hell . 다음과 유사한 코드로 보입니다.

getData(function(a){
    getMoreData(a, function(b){
        getMoreData(b, function(c){ 
            getMoreData(c, function(d){ 
                getMoreData(d, function(e){ 
                    ...
                });
            });
        });
    });
});

모든 비동기 호출은 이전 호출에서 추출한 데이터에 의존하기 때문에 이전 호출이 끝날 때까지 기다려야 합니다.이것은 실행할 수 있지만, 디버깅과 유지보수는 매우 어렵다.약속이 이 문제를 어떻게 해결하는지 봅시다.

승낙

es6에서 약속을 도입하여 조정의 일부 문제를 해결했다.모든promise 구조 함수는 두 개의 매개 변수resolve와 reject를 가진 함수가 필요합니다.약속이 성공적으로 해결되면 resolve, 약속이 거절되거나 오류가 발생하면 거절이라고 한다.

      const promise = new Promise(function(resolve, reject) { 
             // an API call or any async operation 
      }); 

여기에서 함수 매개 변수resolve와 reject는 모두 함수이며 적절하게 호출된다.예를 들어 보겠습니다.

const promise = new Promise(function(resolve, reject)  {
     setTimeout(() => {
      resolve("Time is out");
     }, 4000);
   });

promise
.then(function(data){console.log(data)})
.catch(function(error){console.log('Something bad happened: ',error)})

promise는 하나의 대상일 뿐, 모든 비동기 동작을 실행하고, 매개 변수로 리셋 함수에 전달되는resolve나reject 함수를 호출합니다.
상기 setTimeout 예시에서 우리는 새로운 Promise를 만들고 이를 변수에 분배했습니다. 이 변수에서resolve와reject를 통해 리셋을 전송했습니다.내부적으로 발생하는 상황은 다음과 같다.
1.firstpromise에서 리셋된 내용을 실행하려고 시도합니다.setTimeout2.4초 후 setTimeout 완료 시 해결 시도
리졸브 함수를 호출했기 때문에.
3. 우리가 리셋 함수 매개 변수로 전달한 resolve 은Promise 클래스에 연결된 다른 함수를 호출합니다.onResolved . 따라서 resolve 내에서 호출setTimeout할 때 onResolved 클래스에 전달된 값 호출Promise 클래스의 함수resolve를 사용합니다.이것은 Time is out 문자열입니다.onResolved 함수에서 .then()에 전달되는 리셋을 호출합니다resolve로부터 수신된 값을 사용하면
좋아요.
이것은 간단한 버전입니다. 안에 있는 약속입니다. 그래서 만약에 당신이
여러 개의 약속을 연결하고 있습니다. 그리고 그것은 매우 적어졌습니다.
복잡했어Promise클래스는 리셋으로 하나의 그룹을 유지합니다. 이 그룹은
순서대로 호출.then()성명만약 당신이 깊이 잠수하고 싶다면 보세요this article
따라서 약속 링크를 사용하면 호출을 다른 호출로 돌려보낼 필요가 없고, 호출을 하나하나 연결할 수 있다
만약 당신이 두 가지 비동기적인 일을 하고 싶고, 한 프로미스에서 되돌아온 데이터를 사용하여 다른 비동기적인 호출을 하고 싶다면, 우리는 프로미스로 이런 일을 할 수 있다.

  const promise1 =new Promise(function(resolve,reject){
     // async work
  })

  const promise2 = function(datafromFirst){
    return new Promise(function(resolve,reject){
     // async work
   })
  }

  promise1
  .then(function(data1){console.log(data1); return promise2(data1) })
  .then(function(data2){console.log(data2); })
  .catch(function(error){console.log(error);//error caught from any of 
  the promises})

이것은 코드를 더욱 읽을 수 있고 이해하기 쉽게...그러나 일련의 약속은 사람을 곤혹스럽게 한다.이전의 약속은 반드시 링크 약속으로 돌아가야 하기 때문에 디버깅도 쉽지 않다.물론 비동기 코드를 작성하는 것을 더욱 쉽게 하고 지옥으로 돌아가는 것을 피하겠다고 약속했지만, 우리가 더 잘할 수 있을까?오, 네!비동기와 기다림이 틀림없다...

비동기식 대기

The new async-await in es8 use the same promises under the hood but they remove the need of passing the callbacks and having to deal with the chaining of promises. It provided way more abstraction and code looks a lot cleaner now.

 async function func(){
    try{
    const result = await someasynccall();
    console.log(result);
    }
   catch(error){
     console.log(error); 
   } 
}

we need to use the keyword async to make a function async and only then you can use the keyword await inside the function. we can wrap try-catch around the await code so that when an error is thrown we will be able to catch it.

Let's look at the previous example of two async calls where we needed data from the first one to do another async call with async await syntax.

  async function func(){
      try{
       const data1 = await someasyncall();
       const data2 = await anotherasynccall(data1);
       console.log(data2);
      }
     catch(error){
     console.log(error); 
   }
  }

This looks cleaner, At least easy to write...

suppose we want to return something from async function and we want to use it afterwards, Then we need to use IIFE pattern.

With the below code what do you think will console.log(message) log?

async function func(){
    try{
    const result = await someasynccall();
    console.log('result',result);
    return 'successful';
    }
   catch(error){
     console.log(error); 
     return 'failed';
   } 
}

const message = func();
console.log(message) 

the console.log(message) will print Promise{<pending>} but not the actual 'successful' or 'failed' because our console.log runs before the promise inside the await someasynccall() is done executing so if we want to actually use message value then we need to use IIFE(immediately invoked function expression) like below:

async function func(){
    try{
    const result = await someasynccall();
    console.log('result',result);
    return 'successful';
    }
   catch(error){
     console.log(error);
     return 'failed'; 
   } 
}

(async function(){
 const message = await func();
 console.log(message);
})();

so we make use of another async function which is immediately invoked and await for the function to return the message string and then use it.

This is how, The way we handle the async code has evolved over the years now with the latest async-await , Code looks a lot cleaner and readable.