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