亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

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

前后端分離時(shí)代的到來

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

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

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

XMLHttpRequest：異步請(qǐng)求的開山鼻祖

理解XMLHttpRequest的工作原理

XMLHttpRequest可以說是前端異步請(qǐng)求的開山鼻祖。雖然它"早期接口請(qǐng)求的對(duì)象"，但理解它的工作原理對(duì)我們掌握現(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 請(qǐng)求 GET 打開一個(gè)數(shù)據(jù)傳輸?shù)耐ǖ?/span>
        // 底層，好理解 瀏覽器網(wǎng)絡(luò)請(qǐng)求的通道被打開
        console.log(xhr.readyState);
        xhr.open('GET','https://api.github.com/users/usersname/repos')
        console.log(xhr.readyState);
        xhr.send() // 發(fā)送請(qǐng)求
        
        xhr.onreadystatechange = function() {
            if(xhr.readyState === 4) {
                // 響應(yīng)內(nèi)容到到達(dá)了
                resolve(JSON.parse(xhr.responseText))
            }
        }
    })
}

XMLHttpRequest的readyState詳解

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

• 0: 未初始化（還沒有調(diào)用open()方法）
• 1: 啟動(dòng)（已經(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時(shí)，說明響應(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)代異步請(qǐng)求的新寵

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

XMLHttpRequest有個(gè)明顯的問題：它是"es6之前的對(duì)象，連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時(shí)，我們需要理解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加載時(shí)機(jī)的選擇

DOMContentLoaded vs window.onload

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

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主動(dòng)拉取這些資源，而網(wǎng)站地址是用戶直接訪問的頁面。這種分離讓前端可以更靈活地處理數(shù)據(jù)和用戶交互。

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

讓我們看看如何將獲取到的數(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. 將每個(gè)倉(cāng)庫(kù)對(duì)象轉(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，前端異步請(qǐng)求技術(shù)的演進(jìn)體現(xiàn)了幾個(gè)重要趨勢(shì)：

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

寫在最后

無論是XMLHttpRequest還是Fetch API，它們都是前端異步編程的重要工具。理解它們的工作原理和使用場(chǎng)景，不僅能幫助我們寫出更好的代碼，也能讓我們?cè)诿鎸?duì)復(fù)雜的異步場(chǎng)景時(shí)游刃有余。

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

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