JSで説明されたasyncとpromise

注: すべての概念はつながっているため、1 つのことを理解するには、他の概念も理解する必要があります

ブロックコード

プログラム内に、完了までに何年もかかるループがあると仮定してみましょう。ここで、次に進むか待つかの 2 つの選択肢があります。待機することを選択した場合、コードのブロックが考慮されます。そうでない場合は、選択の余地はありません。じゃあね。

//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 と await はキーペアです。もう 1 つ、await は常に 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. await は常に try-catch ブロックで囲みます。 (そうでない場合は、私のブログを参照してください)
4. 上に示したように、非同期関数の外にあるプログラムは、解決されるか拒否されるかに関係なく、常に実行されるようになります。 (それが美しさ?)
5. さあ、約束を理解しましょう

それでは、Promise の適用から始めましょう

1. API リクエスト - 別のサーバーからデータを取得
2. ファイル操作 - ファイルの読み取りと書き込み
3. データベースクエリ - データのフェッチまたは書き込み

すべてのユースケースに共通するものはありますか?

はい、すべてのアプリケーションの実行には時間がかかります。

約束は、そのような状況に適切に対処するためのスーパーパワーを私たちに与えます。繰り返しますが、Promise と async-await は連携して行われます。

Promise には 3 つの状態があります (上の例に示すように)

• 解決されました (解決された場合、ファイルは正常に作成され、実行されます)
• 拒否されました (catch ブロック内のコードが実行されます)
• 保留中 (待機し、関数内でコードを実行できません)

JSでカスタムPromiseを作成しましょう

Promise を返す関数の外側の async キーワードは完全にオプションです。以下のコードを参照してください...

fetchData

// 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

他のコードも、データがフェッチされたかどうかに関係なく実行されます。これによりパフォーマンスが向上し、コードの品質が向上します。

参考文献

aryan によるエラー処理

以上がJSで説明されたasyncとpromiseの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。