JavaScript の非同期プログラミングをステップごとに理解します。

この記事では、JavaScript での非同期プログラミングについて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

非同期とは非同期を意味します....

このセクションは少し退屈かもしれませんが、JavaScript では非常に重要な概念であり、非常に重要です。役に立つので、学ぶ必要があります。

#目的

開発効率を向上させ、保守しやすいコードを作成します

導入の質問

リクエスト時にページが停止するのはなぜですか? ?

• $.ajax({
    url: "www.xx.com/api",
    async: false, // true
    success: function(result) {
      console.log(result);
    },
  });

  ログイン後にコピー

データは更新されるのに、DOM が更新されないのはなぜですか? ?

// 异步批量更新DOM（vue-nextTick）
// <p id="app">{{num}}</p>
new Vue({
  el: "#app",
  data: {
    num: 0,
  },
  mounted() {
    let dom = document.getElementById("app");
    while (this.num !== 100) {
      this.num++;
    }
    console.log("Vue num=" + this.num, "DOM num=" + dom.innerHTML);
    // Vue num=100,DOM num=0
    // nextTick or setTimeout
  },
});

ログイン後にコピー

非同期生成の理由

シングル スレッドとは、JS エンジンで IavaScript コードの解釈と実行を担当するスレッドが 1 つだけあることを意味します。これをメイン スレッドと呼ぶこともできます。

レンダリング スレッドと JS スレッドがあります。 は相互に排他的です。

欠点は、 1 つのタスクに時間がかかると、後続のタスクをキューに入れて待機する必要があり、プログラム全体の実行が遅れます。一般的なブラウザの応答不能 (サスペンドデス) は、特定の Javascript コードが長時間実行される (無限ループなど) ことが原因で発生することが多く、その結果、ページ全体がその場所でスタックし、他のタスクが実行できなくなります。

while (true) {}

は一度に 1 つのことしか実行できません。

この欠点: 非同期が生成されます。 インスタント ラーメンを食べる例を挙げます。

• 非同期 : インスタント ラーメンを買う => 水を沸騰させる (水が沸騰し、やかんが鳴る - コールバック) => テレビを見る => 麺を調理する (麺の準備ができてやかんが鳴る - コールバック) => テレビを見る => 時間が来たら電話する完了 => インスタント ラーメンを食べる
テレビを見ることは非同期操作であり、やかんの音はコールバック関数です。

JS のコードの大部分は同期的に実行されます。非同期で実行される関数はほんのわずかです。非同期で実行されるコードには非同期プログラミングが必要です。

setTimeout(() => {
  console.log("log2");
}, 0);
console.log("log1");
// ?? log1 log2

ログイン後にコピー

非同期コードの特徴:

非同期コードを記述する最も一般的な方法は、コールバック関数を使用することです。

HTTP ネットワーク リクエスト (リクエストは成功し、識別後に xx 操作が実行されます)

DOM イベント バインディング メカニズム (ユーザーがイベントをトリガーした後に xx 操作が実行されます)
Timer (setTimeout, setInterval) (設定時間に達したら xx 操作を実行)

// 注意到click方法中是一个函数而不是一个变量
// 它就是回调函数
$("#btn_1").click(function() {
  alert("Btn 1 Clicked");
});
// 或者
function click() {
  // 它就是回调函数
  alert("Btn 1 Clicked");
}
$("#btn_1").click(click);

ログイン後にコピー
• コールバック関数の欠点も明らかで、コールバック地獄を引き起こしやすいです。

非同期プログラミングの 3 つの方法

コールバック

function getOneNews() {
  $.ajax({
    url: topicsUrl,
    success: function(res) {
      let id = res.data[0].id;
      $.ajax({
        url: topicOneUrl + id,
        success: function(ress) {
          console.log(ress);
          render(ress.data);
        },
      });
    },
  });
}

ログイン後にコピー
promise

function getOneNews() {
  axios
    .get(topicsUrl)
    .then(function(response) {
      let id = response.data.data[0].id;
      return axios.get(topicOneUrl + id);
    })
    .then((res) => {
      render(res.data.data);
    })
    .catch(function(error) {
      console.log(error);
    });
}

ログイン後にコピー
async/await

async function getOneNews() {
  let listData = await axios.get(topicsUrl);
  let id = listData.data.data[0].id;
  let data = await axios.get(topicOneUrl + id);
  render(data.data.data);
}

ログイン後にコピー
オンライン プレビュー

プレビュー アドレス: http:// jsrun.net/s43Kp/embedded/all/light

質問がありますか? ?

複数の非同期コードが同時に存在する場合、実行順序はどうなるでしょうか?どちらが先に実行され、どちらが後に実行されるのでしょうか?

マクロ タスクとマイクロ タスク

非同期コードの分割、非同期コードはマクロ タスクとマイクロ タスクに分けられます。

console.log("script start");
setTimeout(function() {
  console.log("timeout1");
}, 10);
new Promise((resolve) => {
  console.log("promise1");
  resolve();
  setTimeout(() => console.log("timeout2"), 10);
}).then(function() {
  console.log("then1");
});
console.log("script end");