基礎(chǔ)知識

AJAX概念

AJAX概念：是瀏覽器與服務(wù)器進(jìn)行數(shù)據(jù)通信的技術(shù)。

認(rèn)識URL

定義：統(tǒng)一資源定位符，簡稱網(wǎng)址，用于訪問網(wǎng)絡(luò)上的資源。

組成：

• http協(xié)議：超文本傳輸協(xié)議，規(guī)定瀏覽器和服務(wù)器之間傳輸數(shù)據(jù)的格式。
• 域名：標(biāo)記服務(wù)器在互聯(lián)網(wǎng)中方位。
• 資源位置：標(biāo)記資源在服務(wù)器下的具體位置。

查詢參數(shù)

定義：瀏覽器提供給服務(wù)器的額外信息，讓服務(wù)器返回瀏覽器想要的數(shù)據(jù)。

語法：http://xxxx.com/xxx/xxx?參數(shù)名1=值1&參數(shù)名2=值2

常用請求方式

請求方式：對服務(wù)器資源，要拽行動的操作

請求方法	操作
GET	獲取數(shù)據(jù)
POST	數(shù)據(jù)提交
PUT	修改數(shù)據(jù)(全部)
DELETE	刪除數(shù)據(jù)
PATCH	修改數(shù)據(jù)(部分)

報文

HTTP協(xié)議：規(guī)定了瀏覽器發(fā)送及服務(wù)器返回內(nèi)容的格式。

請求報文

請求報文：瀏覽器按照HTTP協(xié)議要求的格式，發(fā)送給服務(wù)器的內(nèi)容。

請求報文由以下幾個部分組成：

1. 請求行：包含請求方法、URL和協(xié)議。
2. 請求頭：以鍵值對格式攜帶的附加信息，例如 Content-Type。
3. 空行：用于分隔請求頭，空行之后是發(fā)送給服務(wù)器的資源。
4. 請求體：實(shí)際發(fā)送給服務(wù)器的資源。

調(diào)試窗口查看報文

在瀏覽器任意頁面右鍵找到檢查或者直接F12鍵打開調(diào)試窗口。

然后找到網(wǎng)絡(luò)，找到Fetch/XHR。

然后就可以在調(diào)試窗口里面查看報文信息啦！

請求頭在標(biāo)頭中觀看：

響應(yīng)頭就在響應(yīng)標(biāo)頭中查看：

請求標(biāo)頭保存請求頭的信息：

可以點(diǎn)擊原始顯示原始的請求頭信息

請求體在載荷中觀看：

響應(yīng)體就在響應(yīng)中查看：

如果響應(yīng)的內(nèi)容比較多的時候，可以在預(yù)覽窗口查看，就會以json數(shù)據(jù)的格式呈現(xiàn)出來。

響應(yīng)報文

響應(yīng)報文：服務(wù)器按照HTTP協(xié)議要求的格式，返回給瀏覽器的內(nèi)容。

它由以下幾個部分組成：

1. 響應(yīng)行（狀態(tài)行）：包含協(xié)議、HTTP響應(yīng)狀態(tài)碼和狀態(tài)信息。
2. 響應(yīng)頭：以鍵值對格式攜帶的附加信息，例如 Content-Type。
3. 空行：用于分隔響應(yīng)頭，空行之后是服務(wù)器返回的資源。
4. 響應(yīng)體：實(shí)際返回給瀏覽器的資源。

HTTP響應(yīng)狀態(tài)碼

HTTP響應(yīng)狀態(tài)碼：用來表明請求是否成功完成

狀態(tài)碼	說明
1xx	信息
2xx	成功
3xx	重定向消息
4xx	客戶端錯誤
5xx	服務(wù)端錯誤

接口文檔

接口文檔：由后端提供的描述接口的文章

接口：使用AJAX和服務(wù)器通訊時，使用的URL，請求方法，以及參數(shù)

Axios

基本使用

使用方法：

1. 引入axios：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js

   • 可以使用console.log(axios)檢驗是否拿到了axios對象

2. 使用axios函數(shù)

   使用方法：1. 傳入配置對象。2. 再用.then回調(diào)函數(shù)接收結(jié)果，并做后續(xù)處理。axios({url:‘目標(biāo)資源地址’
   }).then((返回結(jié)果)=>{//在then回調(diào)函數(shù)中，第一個參數(shù)就是服務(wù)端返回的數(shù)據(jù)結(jié)果//對服務(wù)器返回的數(shù)據(jù)做后續(xù)的處理
   })
   

查詢參數(shù)

語法：使用axios提供的params選項

模版：

axios({url:''params:{參數(shù)名：值}
}).then(res =>{//方法
})

??注意：axios在運(yùn)行時把參數(shù)名和值，會拼接到url?參數(shù)名=值。

請求配置

語法：使用axios提供的 mothed選項

模版：

• method：請求的方法（get可以省略不寫）
• data：提交數(shù)據(jù)

axios({url:''，params:{ 參數(shù)名：值 }，method:'請求方法'，data:{參數(shù)名：值}
}).then(res =>{//方法
})

錯誤處理

語法：在then方法的后面，通過點(diǎn)語法調(diào)用catch方法，傳入回調(diào)函數(shù)并定義形參。

模版：

axios({//請求選項
}).then(res =>{//處理數(shù)據(jù)
}).catch(err =>{//錯誤處理
})

AJAX原理

XMLHttpRequest

定義：XMLHttpRequest(XHR)對象用于與服務(wù)器交互。axios內(nèi)部采用XMLHttpRequest與服務(wù)器交互。

使用步驟：

1. 創(chuàng)建一個XHR對象

   const xhr = new XMLHttpRequet()
   

2. 調(diào)用open方法，配置請求方法和請求url地址

   xhr.open(請求方式，請求路徑)
   

3. 監(jiān)聽loadend事件，接受響應(yīng)結(jié)果

   xhr.addEventListener('loadend',() = >{//console.log(xhr.response)//轉(zhuǎn)化為json對象console.log(JSON.parse(xhr.response))
   })
   

4. send方法發(fā)起請求

   xhr.send()
   

查詢參數(shù)

直接在open方法中拼接查詢字符串：

xhr.open(get，請求路徑?參數(shù)名=參數(shù)值&參數(shù)名2=參數(shù)值2&...)

URLSearchParams

將對象格式數(shù)據(jù)，轉(zhuǎn)化為查詢字符串

const obj = new URLSearchParams({對象名1，對象名2...
})
const str = obj.toString()const xhr = new XMLHttpRequet()
xhr.open(請求方式，請求路徑?${str})

提交參數(shù)

const xhr = new XMLHttpRequet()
xhr.open(post，請求路徑)
xhr.addEventListener('loadend',() = >{//console.log(xhr.response)//轉(zhuǎn)化為json對象console.log(JSON.parse(xhr.response))
})
//請求體參數(shù)步驟：
// 1. 設(shè)置請求頭數(shù)據(jù)類型，根據(jù)接口文檔設(shè)置application/json
xhr.setRequestHeader('Content-Type','applicatio/json')
// 2.在send方法中攜帶參數(shù)
const obj ={username:'',password:''
}
//3.轉(zhuǎn)化成字符串
const data = JSON.stringfy(obj)xhr.send(data)

封裝簡易axios(了解)

步驟：

1. 定義一個函數(shù)，接受配置對象，返回Promise對象

   function myAxios(option){const { url,method } = optionreturn new Promise((resolve,reject) => {})
   }
   

2. 發(fā)起XHR請求

   function myAxios(option){const { url,method } = optionreturn new Promise((resolve,reject) => {const xhr = new XMLHttpRequestxhr.open(method,url)xhr.addEventListener('loadend', ()=>{})xhr.send()})
   }
   

3. 調(diào)用成功或失敗的處理程序

   function myAxios(option){const { url,method } = optionreturn new Promise((resolve,reject) => {const xhr = new XMLHttpRequestxhr.open(method,url)xhr.addEventListener('loadend', ()=>{resolver(xhr.response)})xhr.send()})
   }
   

4. 使用封裝的函數(shù)

   myAxios({url:'',method:''
   }).then(res => {console.log(res)
   })
   

如果需要查詢參數(shù)：

1. 調(diào)用函數(shù)的時候傳入params參數(shù)

   myAxios({url:'',method:''，params:{參數(shù)1:值1...}
   }).then(res => {console.log(res)
   })
   

2. 基于URLSearchParmas轉(zhuǎn)化并攜帶url上

   let { url,method,params } = optionparams = parmas ? new URLSearchParmas(params).toString():''
   url = params ? url+'?' +params:url
   

如果需要請求參數(shù)

1. 同樣的先調(diào)用函數(shù)傳入data 參數(shù)

2. 解構(gòu)data

   let { url,method,params，data } = option
   

3. 設(shè)置data

   if(data){//1. 設(shè)置請求頭xhr.setRequestHeader('Content-Type','application/json')//2. 處理數(shù)據(jù)// data = JSON.stringify(data)//3. 發(fā)送請求
   }else{xhr.send(JSON.stringfy(data))
   }
   

4. 錯誤處理

   if(xhr.status >= 200 && xhr.status < 300){resolver(JSON.parse(xhr.response))
   }else{reject(new Error(xhr.response))
   }
   

Promise

Promise對象用于表示一個異步操作的最終完成（或失敗）及其結(jié)果值。

好處：

1. 邏輯更清晰

2. 了解axios函數(shù)內(nèi)部運(yùn)作機(jī)制

3. 能解決回調(diào)函數(shù)地獄問題

語法：

1. 創(chuàng)建Promise對象

   const p = new Promise(function(成功,失敗){ })
   //一般寫成以下👇形式
   

2. 執(zhí)行異步操作并傳遞結(jié)果

   const p = new Promise(function (resolve,reject){resolve('成功')
   })
   

   1. 成功調(diào)用：resolve(值)觸發(fā)then
   2. 失敗調(diào)用：reject(值)觸發(fā)catch

3. 接受結(jié)果

   p.then(result => {//成功})
   p.catch(error => {//失敗})
   

Promise三種狀態(tài)

作用：了解Promise對象如何關(guān)聯(lián)的處理函數(shù)，以及代碼執(zhí)行順序。

概念：一個Promise對象，必然處于以下幾種狀態(tài)之一

狀態(tài)	含義
待定（pending)	初始狀態(tài)，既沒有被兌現(xiàn)，也沒有被拒絕
已兌現(xiàn)（fulfilled)	意味著，操作成功完成
已拒絕(rejected)	意味著，操作失敗

狀態(tài)凝固：Promise的特性，一旦狀態(tài)從pending修改為其他狀態(tài)后就不會再次修改了。

Promise+XHR

1. 創(chuàng)建Promise對象

2. 在Promise對象中使用XHR

3. 接受結(jié)果，使用Promise對象

   const p = new Promise(function(resolve,reject){const xhr = new XMLHttpRequest()xhr.open(請求方式，請求地址)xhr.addEventListener('loadend',() => {//成功resolve(xhr.response)//失敗//reject(xhr.response)})xhr.send()
   })p.then(result => {//成功})
   p.catch(error => {//失敗})
   

同步與異步

同步代碼：逐行執(zhí)行，需原地等待結(jié)果后才繼續(xù)向下執(zhí)行。

異步代碼：調(diào)用后耗時，不阻塞代碼繼續(xù)執(zhí)行（不必原地等待），在將來完成后觸發(fā)一個回調(diào)函數(shù)。（例子：定時器、Axios、事件）

小習(xí)題：

答案：

由此可知，異步代碼是通過回調(diào)函數(shù)來接受結(jié)果

回調(diào)地獄問題

概念：回調(diào)函數(shù)嵌套回調(diào)函數(shù)就是回調(diào)地獄

缺點(diǎn)：可讀性差，異常無法獲取，耦合性嚴(yán)重，牽一發(fā)動全身。

鏈?zhǔn)秸{(diào)用

概念：依靠then()方法會返回一個新生成的Promise對象特性，繼續(xù)串聯(lián)下一環(huán)任務(wù)，直到結(jié)束，then回調(diào)函數(shù)中的返回值會影響新生成的Promise對象最終狀態(tài)和結(jié)果。

then回調(diào)函數(shù)中，return的值傳給了新的Promise對象。

Promise鏈?zhǔn)秸{(diào)用的作用是解決了回調(diào)函數(shù)嵌套的問題。

const p = new Promise((resolver,reject) => {resolve('成功1')
})p.then(res => P{console.log(res)	//這里打印的是('成功1')return new Promise((resolve,reject) =>{resolve(res + '成功2')	})}).then(res => {console.log(res)	//這里打印的是(res + '成功2')	})

async、await關(guān)鍵字

定義：async函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。async函數(shù)是一個構(gòu)造函數(shù)的實(shí)例，并且其中允許使用awai關(guān)鍵字。async和await關(guān)鍵字讓我們可以用一種更加簡潔的方式寫出基于Promise的異步行為，而無需刻意地鏈?zhǔn)秸{(diào)用Promise。

使用方法：在async函數(shù)內(nèi)，使用await關(guān)鍵字取代then函數(shù)，等待獲取Promise對象成功狀態(tài)的結(jié)果值。

模版：

async function render(){const res = await axios({url:'',method:''})
}
//調(diào)用async
render()

注意：

• await必須用在async修飾的函數(shù)內(nèi)
• await會組織“異步函數(shù)內(nèi)”代碼繼續(xù)執(zhí)行，原地等待結(jié)果

async函數(shù)錯誤處理

因為async函數(shù)只能獲取成功狀態(tài)的結(jié)果值，如果發(fā)生錯誤了，這個時候就要使用到try...catch方法來捕獲錯誤。try...catch語句標(biāo)記要嘗試的語句塊，并指定一個出現(xiàn)異常時拋出的響應(yīng)。

語法：

try{//要執(zhí)行的代碼
} catch(error){//error接受的是錯誤信息
}

那么我們直接跟上面的代碼進(jìn)行修改：

async function render(){try{const res = await axios({url:'',method:''})} catch(err){console.log(new Error(err))	//錯誤處理}
}
//調(diào)用async
render()

事件循環(huán)

原因：JavaScript單線程（某一刻只能執(zhí)行一行代碼），為了讓耗時代碼不阻塞其他代碼運(yùn)行，設(shè)計了事件循環(huán)模型（EventLoop）。

定義：執(zhí)行和收集異步任務(wù)的模型（機(jī)制），在調(diào)用?？臻e的時候，會反復(fù)調(diào)用任務(wù)列表里面回調(diào)函數(shù)的執(zhí)行機(jī)制，叫做事件循環(huán)。

執(zhí)行過程：

1. 執(zhí)行同步代碼，遇到異步代碼交給宿主環(huán)境執(zhí)行
2. 異步有了結(jié)果后，把回調(diào)函數(shù)放入任務(wù)隊列排隊

示例：

這段代碼示例，展示了如何使用console.log函數(shù)和setTimeout函數(shù)來打印數(shù)字到控制臺。不過，它并不是一個“時間循環(huán)”，而是展示了JavaScript中的異步執(zhí)行和事件循環(huán)機(jī)制。

1. console.log(1); 立即執(zhí)行，打印數(shù)字1到控制臺。
2. setTimeout(function() { console.log(2); }, 0); 設(shè)置了一個定時器，當(dāng)定時器到期時，會將一個匿名函數(shù)加入到事件隊列中。這個定時器設(shè)置的延遲是0毫秒，意味著它將在當(dāng)前執(zhí)行棧清空后的下一個事件循環(huán)迭代中執(zhí)行。打印數(shù)字2。
3. console.log(3); 立即執(zhí)行，打印數(shù)字3到控制臺。
4. setTimeout(function() { console.log(4); }, 2000); 設(shè)置了另一個定時器，延遲2000毫秒后執(zhí)行，打印數(shù)字4。
5. console.log(5); 立即執(zhí)行，打印數(shù)字5到控制臺。

執(zhí)行順序如下：

• 首先打印1。
• 然后設(shè)置第一個定時器，但不會立即執(zhí)行。
• 接著打印3。
• 然后打印5。
• 事件循環(huán)繼續(xù)，第一個定時器到期后執(zhí)行，打印2。
• 2000毫秒后，第二個定時器到期執(zhí)行，打印4。

所以，最終的打印順序是：1, 3, 5, 2, 4。

宏任務(wù)與微任務(wù)

ES6之后引入了Promise對象，讓JS引擎也可以發(fā)起異步任務(wù)。

異步任務(wù)分為：

• 宏任務(wù)：由瀏覽器環(huán)境執(zhí)行異步代碼
  • js腳本執(zhí)行事件
  • 定時器
  • AJAX請求完成事件
  • 用戶交互事件
• 微任務(wù)：由JS引擎環(huán)境執(zhí)行的異步代碼
  • Promise對象.then()方法（??注意：Promise本身是同步的，而then和catch回調(diào)函數(shù)是異步的）

執(zhí)行順序：

1. 執(zhí)行第一個script腳本事件宏任務(wù)，里面同步代碼。
2. 遇到宏任務(wù)/微任務(wù)交給數(shù)組環(huán)境，由結(jié)果回調(diào)函數(shù)進(jìn)入對應(yīng)隊列
3. 當(dāng)執(zhí)行?？臻e的時候，清空微任務(wù)隊列，在執(zhí)行下一個宏任務(wù)，循環(huán)往復(fù)。

示例：

Promise.all方法

作用：合并多個Promise對象，等待所有完成（或某一個失敗），做后續(xù)邏輯

語法：

const p = Promise.all([Promise對象，Promise對象,...])
p.then(resule =>{	//result結(jié)果
}).catch(error =>{//第一個失敗的Promise對象，拋出的異常
})