一、XMLHttpRequest（XHR）方式

早期的前端異步請求主要依賴于 XMLHttpRequest 對象。它允許 JavaScript 以異步方式與服務(wù)器進行數(shù)據(jù)交換，而無需重新加載整個頁面。

代碼示例

const getJSON = async url => {
  return new Promise((resolve, reject) => {
    // executor 執(zhí)行器
    // 開始處于pending狀態(tài)
    const xhr = new XMLHttpRequest(); // 實例化
    xhr.open("GET", "https://api.github.com/users/LeeAt67/repos");
    console.log(xhr.readyState);
    xhr.send(); // 發(fā)送請求
    // 事件監(jiān)聽 回調(diào)函數(shù)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        // 響應(yīng)內(nèi)容到達(dá)了
        resolve(JSON.parse(xhr.responseText));
      }
    };
  });
};

邏輯說明

1. 實例化 XHR 對象：通過 new XMLHttpRequest() 創(chuàng)建請求對象。
2. 打開請求通道：xhr.open("GET", url) 指定請求方式和目標(biāo)地址。
3. 發(fā)送請求：xhr.send() 向服務(wù)器發(fā)送請求。
4. 監(jiān)聽狀態(tài)變化：通過 xhr.onreadystatechange 監(jiān)聽請求狀態(tài)的變化。當(dāng) readyState 為 4 時，表示響應(yīng)內(nèi)容已經(jīng)到達(dá)，可以通過 xhr.responseText 獲取數(shù)據(jù)。
5. Promise 封裝：將 XHR 封裝在 Promise 中，使其支持 async/await，更符合現(xiàn)代 JavaScript 的異步編程習(xí)慣。

頁面渲染

請求到的數(shù)據(jù)會被渲染到頁面的 <ul id="repos"></ul> 元素中：

document.getElementById("repos").innerHTML = data
  .map(item => `<li>${item.name}</li>`)
  .join("");

二、Fetch 方式

隨著 ES6+ 的普及，fetch API 成為更現(xiàn)代、更簡潔的異步請求方式。它本質(zhì)上返回一個 Promise 實例，天然支持 async/await。

代碼示例

document.addEventListener("DOMContentLoaded", async () => {
  const result = await fetch("https://api.github.com/users/LeeAt67/repos");
  const data = await result.json();
  document.getElementById("repos").innerHTML = data
    .map(item => `<li>${item.name}</li>`)
    .join("");
});

邏輯說明

1. 頁面加載完成后執(zhí)行：通過 DOMContentLoaded 事件，確保 DOM 元素已加載。
2. 發(fā)起請求：fetch(url) 直接發(fā)起請求，返回 Promise。
3. 解析數(shù)據(jù)：await result.json() 將響應(yīng)體解析為 JSON 數(shù)據(jù)。
4. 渲染頁面：同樣將數(shù)據(jù)渲染到 <ul id="repos"></ul>。

優(yōu)勢

• 語法更簡潔，鏈?zhǔn)秸{(diào)用更自然。
• 支持更豐富的配置和更好的語義化。
• 天然支持 Promise，易于與 async/await 配合。

三、對比與總結(jié)

結(jié)論

• XHR 適合需要兼容老瀏覽器或維護老項目時使用。
• fetch 更適合現(xiàn)代前端開發(fā)，推薦優(yōu)先使用。

到此這篇關(guān)于前端JavaScript異步請求的兩種方式詳解的文章就介紹到這了,更多相關(guān)JavaScript異步請求方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論