柚子快報激活碼778899分享：Ajax學(xué)習(xí)筆記
柚子快報激活碼778899分享：Ajax學(xué)習(xí)筆記
文章目錄標題
Ajax學(xué)習(xí)筆記axios使用axios請求攔截器axios響應(yīng)攔截器優(yōu)化axios響應(yīng)結(jié)果
form-serialize插件圖片上傳HTTP協(xié)議請求報文相應(yīng)報文接口文檔
AJAX原理 - XMLHttpRequest使用XMLHttpRequestXMLHttpRequest - 查詢參數(shù)查詢字符串對象
XMLHttpRequest - 數(shù)據(jù)提交
事件循環(huán)執(zhí)行過程宏任務(wù)和微任務(wù)
Promise對象同步代碼和異步代碼回調(diào)函數(shù)地獄
Promise的三種狀態(tài)通過Promise+XHR模擬axios實現(xiàn)Promise - 鏈式調(diào)用鏈式調(diào)用解決回調(diào)函數(shù)地獄：省份——城市——地區(qū)查詢
Promise.all 靜態(tài)方法
async函數(shù)和await關(guān)鍵字使用async函數(shù)和await關(guān)鍵字解決回調(diào)函數(shù)地獄async函數(shù)和await關(guān)鍵字的錯誤捕獲
Ajax學(xué)習(xí)筆記
定義：Ajax是異步的JavaScript和XML。簡單來說就是使用XMLHttpRequest對象與服務(wù)器通信。它可以使用JSON、XML、HTML和text文本鄧格式發(fā)送和接收數(shù)據(jù)。Ajax最吸引人的就是它的“異步”特性，也就是說它可以在不重新刷新頁面的情況下與服務(wù)器通信、交換數(shù)據(jù)或更新頁面。
概念：Ajax是瀏覽器與服務(wù)器進行數(shù)據(jù)通信的技術(shù)。
作用：瀏覽器和服務(wù)器之間通信，動態(tài)數(shù)據(jù)交互。
axios使用
axios體驗步驟：
引用axios庫使用axios語法
axios請求攔截器
axios請求攔截器：發(fā)起請求之前，出發(fā)點配置函數(shù)，對請求參數(shù)進行額外配置。
語法：
axios.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做什么
return config
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error)
})
axios響應(yīng)攔截器
axios響應(yīng)攔截器：響應(yīng)回到then/catch之前，觸發(fā)的攔截函數(shù)，對響應(yīng)的結(jié)果統(tǒng)一處理。
語法：
axios.interceptors.response.use(function (response) {
// 2xx范圍內(nèi)的狀態(tài)碼都會觸發(fā)該函數(shù)
// 對響應(yīng)數(shù)據(jù)做些什么
return response
}, function (error) {
// 超出2xx范圍的狀態(tài)碼都會觸發(fā)該函數(shù)
// 對響應(yīng)錯誤做點什么。
return Promise.reject(error)
})
優(yōu)化axios響應(yīng)結(jié)果
目標：axios直接接收服務(wù)器返回的響應(yīng)結(jié)果。
form-serialize插件
作用：快速收集表單元素的值。
語法：serialize(form, { hash: true, empty: true })
form：獲取的表單hash：設(shè)置獲取數(shù)據(jù)結(jié)構(gòu)
true：JS對象false：查詢字符串 empty：設(shè)置是否獲取空值
true：獲取空值，使數(shù)據(jù)結(jié)構(gòu)和標簽結(jié)構(gòu)一致false：不獲取空值
圖片上傳
使用步驟：
獲取圖片文件對象 使用FormData攜帶圖片文件 const fd = new FormmData()
fd.append(參數(shù)名, 值)
提交表單數(shù)據(jù)到服務(wù)器，使用圖片url網(wǎng)址
HTTP協(xié)議
HTTM協(xié)議：規(guī)定了瀏覽器發(fā)送及服務(wù)器返回內(nèi)容的格式。
請求報文
請求報文：瀏覽器按照HTTP協(xié)議要求的格式，發(fā)送給服務(wù)器的內(nèi)容。
組成部分：
請求行：請求方法，URL，協(xié)議請求頭：以鍵值對的格式攜帶的附加信息，比如Content-Type空行：分隔請求頭，空行之后的是發(fā)送給服務(wù)器的資源請求體：發(fā)送的資源
相應(yīng)報文
響應(yīng)報文：服務(wù)器按照HTTP協(xié)議要求的格式，返回給瀏覽器的內(nèi)容。
組成部分：
響應(yīng)行（狀態(tài)行）：協(xié)議、HTTP響應(yīng)狀態(tài)碼、狀態(tài)信息
HTTP響應(yīng)狀態(tài)碼：用來表明請求釋放成功完成
狀態(tài)碼說明1xx信息2xx成功3xx重定向信息4xx客戶端錯誤5xx服務(wù)端錯誤 比如：404（服務(wù)器找不到資源） 響應(yīng)頭：以鍵值對的格式攜帶的附加信息，比如Content-Type 空行：分隔響應(yīng)頭，空行之后是服務(wù)器返回的資源 響應(yīng)體：返回的資源
接口文檔
接口文檔：描述接口的文章。
接口：使用AJAX和服務(wù)器通訊時，使用的URL、請求方法以及參數(shù)。
AJAX原理 - XMLHttpRequest
定義：XMLHttpRequest（XHG）對象用于與服務(wù)器交互。通過XMLHttpRequest可以在不刷新頁面的情況下請求特定URL，獲取數(shù)據(jù)。這允許網(wǎng)頁在不影響用戶操作的情況下，更新網(wǎng)頁的局部內(nèi)容。
關(guān)系：axios內(nèi)部采用XMLHttpRequest與服務(wù)器交互
使用XMLHttpRequest
使用步驟：
創(chuàng)建XMLHttpRequest對象 配置請求方法和請求url地址 監(jiān)聽loadend事件，接收響應(yīng)結(jié)果 發(fā)起請求 const xhr = new XMLHttpRequest()
xhr.open('請求方法', '請求url網(wǎng)址')
xhr.addEventListener('loadend', () => {
console.log(xhr.response)
})
XMLHttpRequest - 查詢參數(shù)
定義：瀏覽器提供給服務(wù)器的額外信息，讓服務(wù)器返回瀏覽器想要的數(shù)據(jù)。
例子：查詢河北省的城市名稱。
查詢字符串對象
使用步驟：
創(chuàng)建URLSearchParams對象生成固定格式查詢參數(shù)的字符串
const paramsobj = new URLSearchParams({
參數(shù)名1: 值1,
參數(shù)名2: 值2
})
const queryString = paramsobj.toString() // 結(jié)果：參數(shù)名1=值1&參數(shù)名2=值2
XMLHttpRequest - 數(shù)據(jù)提交
核心：
請求頭設(shè)置Content-Type：application/json請求體攜帶JSON字符串
const xhr = new XMLHttpRequest()
xhr.open('請求方法', '請求url網(wǎng)址')
xhr.addEventListener('loadend', () => {
console.log(xhr.response);
})
// 告訴服務(wù)器，傳遞的內(nèi)容類型，是JSON字符串
xhr.setRequestHeader('Content-Type', 'application/json')
// 準備數(shù)據(jù)并轉(zhuǎn)成JSON字符串
const user = { username: 'itheima007', password: '7654321' }
const userStr = JSON.stringify(user)
xhr.send(userStr) // 發(fā)送請求體數(shù)據(jù)
事件循環(huán)
概念：JavaScript有一個基于事件循環(huán)的并發(fā)模型，事件循環(huán)負責(zé)執(zhí)行代碼、收集和處理事件以及執(zhí)行隊列中的子任務(wù)。
原因：JavaScript單線程（某一時刻只能執(zhí)行一行代碼），為了讓耗時代碼不阻塞其他代碼運行，設(shè)計了事件循環(huán)。
執(zhí)行過程
定義：執(zhí)行代碼和收集異步任務(wù)的模型，在調(diào)用?？臻e，反復(fù)調(diào)用任務(wù)隊列里回調(diào)函數(shù)的執(zhí)行機制，就叫事件循環(huán)。
console.log(1);
setTimeout(() => {
console.log(2);
}, 2000)
console.log(3);
setTimeout(() => {
console.log(4);
}, 0)
console.log(5);
// 打印順序：1 3 5 4 2
宏任務(wù)和微任務(wù)
ES6之后引入了Promise對象，讓JS引擎也可以發(fā)起異步任務(wù)。
異步任務(wù)分為：
宏任務(wù)：由瀏覽器環(huán)境執(zhí)行的異步代碼微任務(wù)：由JS引擎環(huán)境執(zhí)行的異步代碼
任務(wù)（代碼）執(zhí)行所在環(huán)境JS腳本執(zhí)行事件（script）瀏覽器setTimeout/setInterval瀏覽器AJAX請求完成事件瀏覽器用戶交互完成事件瀏覽器Promise對象.then()JS引擎
Promise本身是同步的，而then和catch回調(diào)函數(shù)是異步的。
因為微任務(wù)隊列離JS引擎更近，所以先執(zhí)行微任務(wù)隊列里的代碼，再執(zhí)行宏任務(wù)隊列里的代碼。
console.log(1);
setTimeout(() => {
console.log(2);
})
const p = new Promise((resolve, reject) => {
console.log(3);
resolve(4)
})
p.then(result => {
console.log(result);
})
console.log(5);
// 打印順序：1 3 5 4 2
console.log(1)
setTimeout(() => {
console.log(2)
const p = new Promise(resolve => resolve(3))
p.then(result => console.log(result))
}, 0)
const p = new Promise(resolve => {
setTimeout(() => {
console.log(4)
}, 0)
resolve(5)
})
p.then(result => console.log(result))
const p2 = new Promise(resolve => resolve(6))
p2.then(result => console.log(result))
console.log(7)
// 1 7 5 6 2 3 4
Promise對象
定義：Promise對象用于表示一個異步操作的最終完成（或失敗）及其結(jié)果值。
好處：
使邏輯更清晰了解axios函數(shù)內(nèi)部運作機制能解決回調(diào)函數(shù)地獄問題
核心代碼：
// 1.創(chuàng)建promise對象
const p = new Promise((resolve, reject) => {
// 2.執(zhí)行異步任務(wù)并傳遞結(jié)果
// 成功調(diào)用：resolve(值) 觸發(fā)then()執(zhí)行
// 失敗調(diào)用：reject(值) 觸發(fā)catch()執(zhí)行
})
// 3.接收結(jié)果
p.then(result => {
// 成功
}).catch(error => {
// 失敗
})
同步代碼和異步代碼
同步代碼：逐步執(zhí)行，需要原地等待結(jié)果后，才繼續(xù)往下執(zhí)行。
異步代碼：調(diào)用后耗時，不阻塞代碼繼續(xù)執(zhí)行（不必原地等待），在將來完成后觸發(fā)一個回調(diào)函數(shù)。
JS中的異步代碼：
setTimeout / setInterval事件AJAX
異步代碼通過回調(diào)函數(shù)接受結(jié)果。
回調(diào)函數(shù)地獄
概念：在回調(diào)函數(shù)中嵌套回調(diào)函數(shù)，一直嵌套下去就形成了回調(diào)函數(shù)地獄。
缺點：可讀性差，異常無法捕獲，耦合性嚴重，牽一發(fā)動全身。
Promise的三種狀態(tài)
作用：了解Promise對象如何關(guān)聯(lián)的處理函數(shù)，以及代碼執(zhí)行順序。
概念：一個Promise對象，必定處于以下三種狀態(tài)之中：
待定（pending）：初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕已兌現(xiàn)（fulfilled）：操作成功完成已拒絕（rejected）：操作失敗
注意：
promise對象一旦被兌現(xiàn)/拒絕，就是已敲定了，狀態(tài)無法再被改變。new promise()里的回調(diào)函數(shù)會立即執(zhí)行
通過Promise+XHR模擬axios實現(xiàn)
需求：基于Promise+XHR封裝myAxios函數(shù)，獲取省份列表展示
步驟：
定義myAxios函數(shù)，接收配置對象，返回Promise對象發(fā)起XHR請求，默認請求方法為get調(diào)用成功/失敗的處理程序使用myAxios函數(shù)，獲取省份列表展示
核心代碼模板：
function myAxios (config){
return new Promise((resolve, reject) => {
// XHR請求
// 調(diào)用成功/失敗的處理程序
})
}
myAxios({
url: '目標資源地址'
}).then(result => {
}).catch(error => {
})
完整實現(xiàn)代碼：
Promise - 鏈式調(diào)用
概念：依靠then()方法會返回一個新生成的Promise對象特性，繼續(xù)串聯(lián)下一環(huán)任務(wù)，直到結(jié)束。
細節(jié)：then()回調(diào)函數(shù)中的返回值，會影響新生成的Promise對象的最終狀態(tài)和結(jié)果
好處：通過鏈式調(diào)用，解決回調(diào)函數(shù)嵌套問題。
鏈式調(diào)用解決回調(diào)函數(shù)地獄：省份——城市——地區(qū)查詢
Promise.all 靜態(tài)方法
概念：合并多個Promise對象，等待所有同時成功完成（或某一個失?。龊罄m(xù)邏輯。
需求：當(dāng)需要同一時間顯示多個請求時，就需要把多請求合并。
語法：const p = Promise.all([對象1, 對象2, ...])
async函數(shù)和await關(guān)鍵字
定義：asyn和await關(guān)鍵字讓我們可以用一種更簡潔的方式寫出基于Promise的異步行為，而無需刻意地鏈式調(diào)用Promise。
概念：在async函數(shù)內(nèi)，使用await關(guān)鍵字取代then函數(shù)，等待獲取Promise對象成功狀態(tài)的結(jié)果值。
使用async函數(shù)和await關(guān)鍵字解決回調(diào)函數(shù)地獄
async函數(shù)和await關(guān)鍵字的錯誤捕獲
使用try…catch語句標記要嘗試捕獲的語句塊，并指定一個出現(xiàn)異常時拋出的響應(yīng)。
語法：
try {
// 要執(zhí)行的代碼
} catch(error) {
// error接收的是錯誤信息
// try里代碼，如果有錯誤，直接進入這里執(zhí)行
}
async function getData() {
try {
const pobj = await axios({ url: 'http://hmajax.itheima.net/api/province' })
const pname = pobj.data.list[0]
const cobj = await axios({ url: 'http://hmajax.itheima.net/api/city', params: { pname } })
const cname = cobj.data.list[0]
const aobj = await axios({ url: 'http://hmajax.itheima.net/api/area', params: { pname, cname } })
const areaName = aobj.data.list[0]
document.querySelector('.a').innerHTML = pname
document.querySelector('.b').innerHTML = cname
document.querySelector('.c').innerHTML = areaName
} catch (error) {
console.dir(error)
}
}
getData()
柚子快報激活碼778899分享：Ajax學(xué)習(xí)筆記
參考閱讀
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Jimoty外貿(mào)優(yōu)選集
