axios 是一個(gè)輕量的 HTTP客戶端
axios是一個(gè)基于 Promise 來管理 http 請(qǐng)求的簡潔、易用且高效的代碼封裝庫。
為什么要封裝?
為了統(tǒng)一使用，易于維護(hù)，減少冗余重復(fù)的代碼工作：
如果每發(fā)起一次HTTP請(qǐng)求，就要把這些比如設(shè)置超時(shí)時(shí)間、設(shè)置請(qǐng)求頭、根據(jù)項(xiàng)目環(huán)境判斷使用哪個(gè)請(qǐng)求地址、錯(cuò)誤處理等等（一堆配置與錯(cuò)誤處理）操作，都需要寫一遍
如何封裝
封裝的同時(shí)，你需要和 后端 協(xié)商好一些約定，請(qǐng)求頭，狀態(tài)碼，請(qǐng)求超時(shí)時(shí)間.......
- 設(shè)置接口請(qǐng)求前綴：根據(jù)開發(fā)、測試、生產(chǎn)環(huán)境的不同，前綴需要加以區(qū)分
- 請(qǐng)求頭 : 來實(shí)現(xiàn)一些具體的業(yè)務(wù)，必須攜帶一些參數(shù)才可以請(qǐng)求(例如：會(huì)員業(yè)務(wù))
- 狀態(tài)碼: 根據(jù)接口返回的不同
status， 來執(zhí)行不同的業(yè)務(wù)，這塊需要和后端約定好 - 請(qǐng)求方法：根據(jù)
get、post等方法進(jìn)行一個(gè)再次封裝，使用起來更為方便 - 請(qǐng)求攔截器: 根據(jù)請(qǐng)求的請(qǐng)求頭設(shè)定，來決定哪些請(qǐng)求可以訪問
- 響應(yīng)攔截器： 這塊就是根據(jù) 后端`返回來的狀態(tài)碼判定執(zhí)行不同業(yè)務(wù)
實(shí)現(xiàn)一個(gè)簡易mini版axios
// 構(gòu)建一個(gè)Axios構(gòu)造函數(shù)，核心代碼為request
class Axios {
constructor(){
}
request(config){
return new Promise(resolve=>{
const {url, methord, data} = config || {}
let xhr = new XMLHttpRequest()
xhr.open(methord, url, true)
xhr.onload = function(){
resolve(xhr.responseText)
}
xhr.send(data)
})
}
}
//最終導(dǎo)出axios的方法，即實(shí)例的request方法
function CreateAxiosFn(){
let axios = new Axios()
return axios.request.bind(axios)
}
// 得到最后的全局變量axios
let axios = CreateAxiosFn()
// 使用示例：
axios({url:'url', methord:'post',data:{} })
axios源碼解析
前言：之前一直使用axios這個(gè)庫來配合vue框架進(jìn)行接口數(shù)據(jù)請(qǐng)求，最多是根據(jù)項(xiàng)目對(duì)axios進(jìn)行了二次封裝，只學(xué)到了簡單的運(yùn)用，對(duì)其實(shí)現(xiàn)與源碼一直沒有學(xué)習(xí)。這次根據(jù)B站相關(guān)課程，逐個(gè)知識(shí)點(diǎn)擊破。不只解析了源碼，還做了源碼的模擬實(shí)現(xiàn)。
筆記參考：
【基礎(chǔ)】vue項(xiàng)目對(duì)axios進(jìn)行二次封裝，request全局接口請(qǐng)求文件如何寫？
【進(jìn)階】如何模擬實(shí)現(xiàn)一個(gè)發(fā)送請(qǐng)求的axios庫？
知識(shí)要點(diǎn)如下：
- axios的構(gòu)造過程
- axios如何發(fā)送請(qǐng)求
- axios攔截器及其實(shí)現(xiàn)原理
- axios如何取消請(qǐng)求
- 自行封裝一個(gè)完整的axios庫
