1. 程式人生 > 實用技巧 >JS非同步知識點總結

JS非同步知識點總結

  • 非同步的概念
  • ajax 程式設計
  • 非同步實現的幾種方式
    • 回撥函式
    • promise
    • 生成器
    • async await
      非同步程式設計的概念
      有非同步程式設計,就有同步程式設計
      console.log("Hello"); console.log("World"); for(let i=0;i<5;i++){ console.log(i); } console.log("F71");
      通過上面的程式碼,我們可以看出同步程式碼的特點是由上至下依次執行。

非同步程式碼,往往是非常消耗時間的程式碼,傳送網路請求獲取資料、讀取檔案。
console.log("Hello"); console.log("World"); // 傳送網路請求,獲取資料,然後打印出來 console.log("F71");


上面的程式碼,如果是以同步的方式來執行,那麼“傳送網路請求”這個操作就會阻塞後面的程式碼。

由於我們 js 又是單執行緒語言。所以當 js 遇到非同步的問題的時候,處理的方式是優先處理同步程式碼,非同步的程式碼扔給非同步處理模組。非同步處理模組處理完成之後,扔到任務佇列裡面,然後主執行緒再一個一個的從任務佇列裡面去獲取非同步操作的結果。

  • setTimeout(fn,time) 非同步程式碼

  • setInterval(fn,time) 非同步程式碼
    console.log("Hello"); console.log("World"); setTimeout(function(){ console.log("非同步程式碼一") },3000); setTimeout(function(){ console.log("非同步程式碼二") },1000); console.log("F71");


    Ajax
    ajax 技術一個實現步驟

  1. 建立 XMLHttpRequest 物件(建立一個跑腿的人)
  2. 由這個物件來和伺服器進行通訊(傳送 HTTP 請求)
  3. 歡迎這個人回來,它把資料帶回來了
  4. 通過 DOM 技術進行區域性的重新整理,將帶回來的資料渲染在頁面上面
mockjs

使用 mockjs 可以生成隨機的資料,攔截 ajax 請求。
下面是一個 mockjs 的使用示例:

先來看一下如何生成隨機的資料
`

` ##### ajax 具體的程式碼實現

具體示例看下面的程式碼:
`