微信小程序HTTP請(qǐng)求從0到1封裝
前言
作為一個(gè)前端開(kāi)發(fā)者,從最開(kāi)始的js、jQuery一把梭,后來(lái)的vue、react、angular等MVVM、MVC框架,我們?cè)陂_(kāi)發(fā)工程中都離不開(kāi)HTTP庫(kù)的使用。
HTTP庫(kù)
1、jQuery的$.ajax
調(diào)用了XMLHttpRequest對(duì)象,封裝在相關(guān)函數(shù)在配置項(xiàng)中,一旦傳入了必需選項(xiàng),則直接調(diào)用相應(yīng)的send()方法進(jìn)行數(shù)據(jù)的請(qǐng)求
2、Axios
基于Promise的請(qǐng)求庫(kù),通過(guò)判斷XMLHTTPRequest對(duì)象存在與否,來(lái)支持客戶(hù)端和node服務(wù)端發(fā)送請(qǐng)求,封裝的很不錯(cuò)的HTTP庫(kù),支持promise、攔截請(qǐng)求和響應(yīng)等
小程序網(wǎng)絡(luò)請(qǐng)求
wx.request({
url: 'test.php', //僅為示例,并非真實(shí)的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默認(rèn)值
},
success (res) {
console.log(res.data)
}
})
小程序本身的請(qǐng)求已經(jīng)封裝的很不錯(cuò)了,使用起來(lái)和$.ajax相似,支持許多配置項(xiàng)的設(shè)置,但是缺少公共配置、響應(yīng)和請(qǐng)求攔截等實(shí)用功能
第一步--創(chuàng)建請(qǐng)求實(shí)例
class Axios {
constructor() {
this.instance = null // 類(lèi)的實(shí)例
this.config = defaultConfig
}
create(instanceConfig) {
const { config } = this
// 創(chuàng)建實(shí)例的時(shí)候添加基本配置
this.config = {
...config,
...instanceConfig
}
return this
}
// 單例
static getInstance() {
if (!this.instance) {
this.instance = new Axios()
}
return this.instance
}
}
創(chuàng)建實(shí)例
const axios = Axios.getInstance()
promise包裝小程序請(qǐng)求
const dispatchRequest = function(config) {
return new Promise((resolve, reject) => {
wx.request({
...config,
url: config.base + config.url,
success: res => {
resolve(res)
},
fail: res => {
reject(res)
}
})
})
}
給請(qǐng)求實(shí)例添加request方法
request(options) {
const { config } = this
// 實(shí)例請(qǐng)求的時(shí)候添加基本配置
const requsetOptions = {
...config,
...options
}
return dispatchRequest(requsetOptions)
}
第二步--創(chuàng)建請(qǐng)求工具方法
創(chuàng)建實(shí)例,通過(guò)create設(shè)置基本配置項(xiàng)
const instance = (config = {}) => {
return axios.create({
base: globalApi,
...config
})
}
創(chuàng)建請(qǐng)求工具方法,執(zhí)行實(shí)例request
export function request(options) {
const { baseConfig, url, method, data, isLogin } = options
instance(baseConfig)
.request({
url,
method: method || 'GET',
data
})
.then(res => {
options.success && options.success(res)
})
.catch(err => {
if (options.error) {
options.error(err)
} else {
errAlert()
}
})
}
}
這樣,一個(gè)請(qǐng)求的工具方法就完成了,但是這個(gè)方法現(xiàn)在只支持基本的請(qǐng)求和基本配置項(xiàng)的配置,還是缺少我們很常用的公共請(qǐng)求和響應(yīng)的攔截。
第三部--添加請(qǐng)求和響應(yīng)的攔截器
創(chuàng)建攔截器實(shí)例
class InterceptorManager {
constructor() {
this.fulfilled = null
this.rejected = null
}
use(fulfilled, rejected) {
this.fulfilled = fulfilled
this.rejected = rejected
}
}
在請(qǐng)求實(shí)例的構(gòu)造方法中添加請(qǐng)求和響應(yīng)攔截實(shí)例
constructor() {
this.instance = null // 類(lèi)的實(shí)例
this.config = defaultConfig
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
}
}
在實(shí)例的request添加promise執(zhí)行隊(duì)列
request(options) {
const { config, interceptors } = this
// 實(shí)例請(qǐng)求的時(shí)候添加基本配置
const requsetOptions = {
...config,
...options
}
const promiseArr = [] // promise存儲(chǔ)隊(duì)列
// 請(qǐng)求攔截器
promiseArr.push({
fulfilled: interceptors.request.fulfilled,
rejected: interceptors.request.rejected
})
// 請(qǐng)求
promiseArr.push({
fulfilled: dispatchRequest,
rejected: null
})
// 回調(diào)攔截器
promiseArr.push({
fulfilled: interceptors.response.fulfilled,
rejected: interceptors.response.rejected
})
let p = Promise.resolve(requsetOptions)
promiseArr.forEach(ele => {
p = p.then(ele['fulfilled'], ele['rejected'])
})
return p
}
在請(qǐng)求工具方法中通過(guò)設(shè)置請(qǐng)求和響應(yīng)的攔截方法
axios.interceptors.request.use(
request => {
return request
},
err => {
console.error(err)
}
)
axios.interceptors.response.use(
response => {
return response
},
err => {
console.error(err)
}
)
在請(qǐng)求攔截方法里面可以添加數(shù)據(jù)轉(zhuǎn)換,在請(qǐng)求頭部添加sign、token等,在響應(yīng)攔截方法里面去做公共的數(shù)據(jù)處理等
最后
從零搭建一個(gè)簡(jiǎn)單的請(qǐng)求庫(kù)很簡(jiǎn)單,但是想考慮的方方面面,設(shè)計(jì)好整個(gè)流程會(huì)比較麻煩,需要不斷的改進(jìn)和重構(gòu),本文的搭架過(guò)程參考了Axios的部分源碼。
好了,以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
js文件中直接alert()中文出來(lái)的是亂碼的解決方法
下面小編就為大家?guī)?lái)一篇js文件中直接alert()中文出來(lái)的是亂碼的解決方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
vscode工具函數(shù)idGenerator使用深度解析
這篇文章主要為大家介紹了vscode工具函數(shù)idGenerator使用深度解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
JS前端組件設(shè)計(jì)以業(yè)務(wù)為導(dǎo)向?qū)嵺`思考
這篇文章主要為大家介紹了JS前端組件設(shè)計(jì)以業(yè)務(wù)為導(dǎo)向?qū)嵺`思考,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
JS實(shí)現(xiàn)隨機(jī)亂撞彩色圓球特效的方法
這篇文章主要介紹了JS實(shí)現(xiàn)隨機(jī)亂撞彩色圓球特效的方法,可實(shí)現(xiàn)彩色小球的碰撞效果,涉及隨機(jī)函數(shù)與頁(yè)面樣式的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-05-05
TypeScript中type和interface的區(qū)別及注意事項(xiàng)
type的類(lèi)型別用可以用戶(hù)其他的類(lèi)型,比如聯(lián)合類(lèi)型、元祖類(lèi)型、基本類(lèi)型,interface不行,下面這篇文章主要給大家介紹了關(guān)于TypeScript中type和interface的區(qū)別及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-10-10
判斷div滑動(dòng)到底部的scroll實(shí)例代碼
下面小編就就為大家分享一篇判斷div滑動(dòng)到底部的scroll實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Bootstrap 模態(tài)對(duì)話(huà)框只加載一次 remote 數(shù)據(jù)的完美解決辦法
前端框架 Bootstrap 的模態(tài)對(duì)話(huà)框,可以使用 remote 選項(xiàng)指定一個(gè) URL,這樣對(duì)話(huà)框在第一次彈出的時(shí)候就會(huì)自動(dòng)從這個(gè)地址加載數(shù)據(jù)到 .modal-body 中,但是它只會(huì)加載一次,不過(guò)通過(guò)在事件中調(diào)用 removeData() 方法可以解決這個(gè)問(wèn)題,具體操作方法,大家通過(guò)本文了解下吧2017-07-07
20個(gè)JS簡(jiǎn)寫(xiě)技巧提升工作效率
這篇文章主要介紹了20個(gè)JS簡(jiǎn)寫(xiě)技巧提升工作效率,本文特點(diǎn)以言簡(jiǎn)意賅為主,圍繞JS簡(jiǎn)寫(xiě)技巧的話(huà)題展開(kāi)全文,具有一定的查看價(jià)值 ,需要的小伙伴可以參考一下2021-12-12

