国产欧美精品专区一区二区_91www永久在线精品果冻传媒_日韩成人亚洲综合专区无码av_欧美激情一区二区三区高清视频_免费福利在线视频亚洲_日韩精品无码人妻自慰喷水_把腿张开老子cao哭你动态图_51a性爱高清免费视频_国产无码资源在线观看資源免費看_再深点灬舒服灬太大了网站

作為一名前端開發(fā)者，我們每天都在與各種API打交道。從最初的XMLHttpRequest到現(xiàn)在的Fetch API，前端異步請求技術(shù)經(jīng)歷了怎樣的演變？今天就讓我們通過實(shí)際代碼來探索這段技術(shù)演進(jìn)的歷程。

前后端分離時代的到來

還記得早期的Web開發(fā)嗎？那時候前后端是緊密耦合的，頁面刷新是家常便飯。而現(xiàn)在，我們已經(jīng)進(jìn)入了前后端分離的時代：

前后端分離 js 主動請求接口 （異步任務(wù)），拿到數(shù)據(jù)

這種架構(gòu)讓前端可以"自己做主"，通過JavaScript主動拉取資源，實(shí)現(xiàn)了真正的Web 2.0動態(tài)頁面體驗(yàn)。

XMLHttpRequest：異步請求的開山鼻祖

理解XMLHttpRequest的工作原理

XMLHttpRequest可以說是前端異步請求的開山鼻祖。雖然它"早期接口請求的對象"，但理解它的工作原理對我們掌握現(xiàn)代異步編程至關(guān)重要。

讓我們來看看XMLHttpRequest的經(jīng)典用法：

const getJSON = async(url) =>  {
    return new Promise((resolve,reject) => {
        // executor
        // pending 狀態(tài)
        const xhr = new XMLHttpRequest(); // 實(shí)例化
        // http 請求 GET 打開一個數(shù)據(jù)傳輸?shù)耐ǖ?/span>
        // 底層，好理解 瀏覽器網(wǎng)絡(luò)請求的通道被打開
        console.log(xhr.readyState);
        xhr.open('GET','https://api.github.com/users/usersname/repos')
        console.log(xhr.readyState);
        xhr.send() // 發(fā)送請求
        
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                // 響應(yīng)內(nèi)容到到達(dá)了
                resolve(JSON.parse(xhr.responseText))
            }
        }
    })
}

XMLHttpRequest的readyState詳解

這里有個關(guān)鍵概念需要理解：readyState。它表示XMLHttpRequest對象的狀態(tài)：

• 0: 未初始化（還沒有調(diào)用open()方法）
• 1: 啟動（已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法）
• 2: 發(fā)送（已經(jīng)調(diào)用send()方法，但尚未接收到響應(yīng)）
• 3: 接收（已經(jīng)接收到部分響應(yīng)數(shù)據(jù)）
• 4: 完成（已經(jīng)接收到全部響應(yīng)數(shù)據(jù)）

當(dāng)readyState === 4時，說明響應(yīng)內(nèi)容已經(jīng)到達(dá)，我們就可以處理數(shù)據(jù)了。

從XML到JSON的數(shù)據(jù)格式演變

有趣的是，XMLHttpRequest中的"XML"反映了早期的數(shù)據(jù)交換格式：

<song>
    <author>周深</author>
    <title>大魚</title>
</song>

而現(xiàn)在我們更多使用的是JSON格式：

{
    "author": "林俊杰",
    "title": "江南"
}

JSON格式更輕量、更易于JavaScript處理，這也體現(xiàn)了前端技術(shù)的不斷進(jìn)步。

Fetch API：現(xiàn)代異步請求的新寵

告別回調(diào)地獄，擁抱Promise

XMLHttpRequest有個明顯的問題：它是"es6之前的對象，連promise都沒有"。這意味著我們只能通過事件監(jiān)聽和回調(diào)函數(shù)來處理異步操作，容易陷入回調(diào)地獄。

Fetch API的出現(xiàn)徹底改變了這種情況：

document.addEventListener('DOMContentLoaded', async () => {
    console.log(fetch('https://api.github.com/users/usersname/repos'))
    // resolve() fullfilled 完成了
    // reject() rejected 失敗
    const result = await fetch('https://api.github.com/users/usersname/repos')
    const data = await result.json()
    document.getElementById('repos').innerHTML = data.map(item => `<li>${item.name}</li>`).join('')
})

Promise的三種狀態(tài)

使用Fetch API時，我們需要理解Promise的三種狀態(tài)：

1. pending狀態(tài)：等待中，異步操作還未完成
2. fulfilled狀態(tài)：已完成，通過resolve()觸發(fā)
3. rejected狀態(tài)：已失敗，通過reject()觸發(fā)

async/await：讓異步代碼像同步代碼一樣

ES8引入的async/await語法糖讓異步代碼變得更加優(yōu)雅：

// 傳統(tǒng)的then鏈?zhǔn)秸{(diào)用
fetch('https://api.github.com/users/usersname/repos')
.then(res => res.json())
.then(json => {
    // 處理數(shù)據(jù)
})
// async/await寫法
const result = await fetch('https://api.github.com/users/usersname/repos')
const data = await result.json()
// 像同步代碼一樣處理數(shù)據(jù)

"then的鏈?zhǔn)秸{(diào)用有的繁瑣"，而async/await讓代碼"像同步代碼一樣"，大大提高了代碼的可讀性和可維護(hù)性。

性能優(yōu)化：DOM加載時機(jī)的選擇

DOMContentLoaded vs window.onload

在實(shí)際開發(fā)中，我們經(jīng)常需要在DOM加載完成后執(zhí)行JavaScript代碼。這里有兩個重要的事件：

document.addEventListener('DOMContentLoaded', async () => {
    // DOM結(jié)構(gòu)加載完成就執(zhí)行，不等待圖片、樣式表等資源
})
window.onload = function() {
    // 所有資源都加載完成后執(zhí)行，"有點(diǎn)晚"
}

正如注釋中提到的，window.onload"有點(diǎn)晚"，因?yàn)樗却匈Y源（包括圖片、樣式表）都加載完成。而DOMContentLoaded只需要DOM結(jié)構(gòu)加載完成就可以執(zhí)行，性能更好。

API接口 vs 網(wǎng)站地址：理解URL的本質(zhì)

在前端開發(fā)中，我們需要區(qū)分兩種不同的URL：

// API接口地址 - 返回JSON格式數(shù)據(jù)
// https://api.github.com/users/usersname/repos
// 網(wǎng)站地址 - 用戶訪問的頁面
// www.bilibili.com

API接口地址是"資源"的概念，前端通過JavaScript主動拉取這些資源，而網(wǎng)站地址是用戶直接訪問的頁面。這種分離讓前端可以更靈活地處理數(shù)據(jù)和用戶交互。

實(shí)戰(zhàn)應(yīng)用：GitHub倉庫列表展示

讓我們看看如何將獲取到的數(shù)據(jù)渲染到頁面上：

// 獲取數(shù)據(jù)并渲染
const data = await getJSON('https://api.github.com/users/usersname/repos')
document.getElementById('repos').innerHTML = data.map(item => `<li>${item.name}</li>`).join('')

這里使用了函數(shù)式編程的思想：

1. 使用map()方法遍歷數(shù)組
2. 將每個倉庫對象轉(zhuǎn)換為<li>標(biāo)簽
3. 使用join('')將數(shù)組元素連接成字符串
4. 通過innerHTML更新DOM

技術(shù)演進(jìn)的思考

從XMLHttpRequest到Fetch API，從回調(diào)函數(shù)到Promise，從then鏈?zhǔn)秸{(diào)用到async/await，前端異步請求技術(shù)的演進(jìn)體現(xiàn)了幾個重要趨勢：

1. 語法簡化：代碼變得更加直觀和易讀
2. 錯誤處理：更好的錯誤處理機(jī)制
3. 性能優(yōu)化：更高效的資源管理
4. 開發(fā)體驗(yàn)：更好的開發(fā)者體驗(yàn)

寫在最后

無論是XMLHttpRequest還是Fetch API，它們都是前端異步編程的重要工具。理解它們的工作原理和使用場景，不僅能幫助我們寫出更好的代碼，也能讓我們在面對復(fù)雜的異步場景時游刃有余。

技術(shù)在不斷演進(jìn)，但核心思想是不變的：讓前端能夠主動獲取數(shù)據(jù)，提供更好的用戶體驗(yàn)。這正是Web 2.0時代動態(tài)頁面的魅力所在。

?轉(zhuǎn)自https://juejin.cn/post/7524627104581255202