[反応]反応を処理する技術14枚

18020 ワード
はんのう はんのうぎじゅつ テキストリンク
第14章
非同期タスクとは?
時間のかかる作業を待つと、作業効率が低下します.
従って、非同期タスクを用いて効率的にタスクを完了することができる.
タスクが同期処理されている場合は、リクエストの終了を待つときに他のタスクを停止する必要があります.
そして、仕事が終わったら、他の仕事をすることができます.
ただし、これらのタスクを非同期で処理すると、Webアプリケーションは停止しないため、複数のリクエストを同時に処理できます.
待機中に他の関数を呼び出すこともできます.
この非同期処理を行うためにsettimeout関数を用いた.
function printme() {
  console.log("안녕하세요");
}

setTimeout(printme, 3000);

console.log("대기");

/* 예상 처리 결과
 대기
 안녕하세요!
*/
Calback関数
function increase(number, callback) {
  setTimeout(() => {
    const result = result + 10;
    if (callback) {
      callback(result);
    }
  }, 1000);
}

console.log("작업시작");
increase(0, (result) => {
  console.log(result);

  increase(result, (result) => {
    console.log(result);

    increase(result, (result) => {
      console.log(result);

      increase(result, (result) => {
        console.log(result);
        console.log("작업 완료");
      });
    });
  });
/* 결과
작업시작
0
10
20
30
40
작업 완료
*/
上記の状況はcallback地獄と形容される.
コールバックにもう一つのコールバックが重なるため、コードの可読性が低下する.
Promise関数
これは上記のcallback地獄にはならない関数です.
function increase(number) {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = number + 10;
      if (result > 50) {
        const e = new Error("number is too big");
        return reject(e);
      }
      resolve(result);
    }, 1000);
  });
  return promise;
}

increase(0)
  .then((number) => {
    console.log(number);
    return increase(number);
  })
  .then((number) => {
    console.log(number);
    return increase(number);
  })
  .then((number) => {
    console.log(number);
    return increase(number);
  })
  .catch((e) => {
    // 에러 발생 시
    console.log(e);
  });
Promise関数を使用する例は、複数の包囲関数ではありません.thenを使用して次のタスクを設定するので、コールバック地獄は発生しません.
async/await
asyn,awaitはpromiseをより使いやすくする文法です.
function increase(number) {
  const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = number + 10;
      if (result > 50) {
        const e = new Error("number is too big");
        return reject(e);
      }
      resolve(result);
    }, 1000);
  });
  return promise;
}
async function runTasks() {
  try {
    let result = await increase(0);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
    result = await increase(result);
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}
JavaScriptの矢印機能:あなたがそれらについて知っておく必要があるすべて
pythonベース構文1