一、XMLHttpRequest（XHR）方式

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

代碼示例

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

邏輯說(shuō)明

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

頁(yè)面渲染

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

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

二、Fetch 方式

隨著 ES6+ 的普及，fetch API 成為更現(xiàn)代、更簡(jiǎn)潔的異步請(qǐng)求方式。它本質(zhì)上返回一個(gè) Promise 實(shí)例，天然支持 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("");
});

邏輯說(shuō)明

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

優(yōu)勢(shì)

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

三、對(duì)比與總結(jié)

結(jié)論

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

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

最新評(píng)論