uni-app網路請求的封裝
這幾天沒事幹，就去小程式開發小團隊裡看看，順便看了一下程式碼，在網路請求上發現了一些問題，差點沒忍住破口大罵，最終想了想，他們之前沒做過，都是第一次就算了（其實是安慰自己而已）。
網路請求都寫在page裡，每個請求都要重複的寫uni.request以及一些基礎配置，每個頁面也要處理相同的異常，這簡直就是無腦複製啊。
新建一個MinRequest類，對uni.request進行簡單封裝
class MinRequest {
// 預設配置
config = {
baseURL: '',
header: {
'content-type': 'application/json'
},
method: 'GET',
dataType: 'json',
responseType: 'text'
}
// 判斷url是否完整
static isCompleteURL (url) {
return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
}
// 設定配置
setConfig (func) {
this.config = func(this.config)
}
// 請求
request (options = {}) {
options.baseURL = options.baseURL || this.config.baseURL
options.dataType = options.dataType || this.config.dataType
options.url = MinRequest.isCompleteURL(options.url) ? options.url : (options.baseURL + options.url)
options.data = options.data
options.header = {...options.header, ...this.config.header}
options.method = options.method || this.config.method
return new Promise((resolve, reject) => {
options.success = function (res) {
resolve(res)
}
options.fail= function (err) {
reject(err)
}
uni.request(options)
})
}
get (url, data, options = {}) {
options.url = url
options.data = data
options.method = 'GET'
return this.request(options)
}
post (url, data, options = {}) {
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
}
}複製程式碼上面解決了每個請求都要重複的寫uni.request以及一些基礎配置，
下面來新增請求攔截器
class MinRequest {
// 預設配置
config = {
baseURL: '',
header: {
'content-type': 'application/json'
},
method: 'GET',
dataType: 'json',
responseType: 'text'
}
// 攔截器
interceptors = {
request: (func) => {
if (func) {
MinRequest.requestBefore = func
} else {
MinRequest.requestBefore = (request) => request
}
},
response: (func) => {
if (func) {
MinRequest.requestAfter = func
} else {
MinRequest.requestAfter = (response) => response
}
}
}
static requestBefore (config) {
return config
}
static requestAfter (response) {
return response
}
// 判斷url是否完整
static isCompleteURL (url) {
return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
}
// 設定配置
setConfig (func) {
this.config = func(this.config)
}
// 請求
request (options = {}) {
options.baseURL = options.baseURL || this.config.baseURL
options.dataType = options.dataType || this.config.dataType
options.url = MinRequest.isCompleteURL(options.url) ? options.url : (options.baseURL + options.url)
options.data = options.data
options.header = {...options.header, ...this.config.header}
options.method = options.method || this.config.method
options = {...options, ...MinRequest.requestBefore(options)}
return new Promise((resolve, reject) => {
options.success = function (res) {
resolve(MinRequest.requestAfter(res))
}
options.fail= function (err) {
reject(MinRequest.requestAfter(err))
}
uni.request(options)
})
}
get (url, data, options = {}) {
options.url = url
options.data = data
options.method = 'GET'
return this.request(options)
}
post (url, data, options = {}) {
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
}
}複製程式碼寫到這裡就基本完成了就是沒有私有屬性和私有方法，有些屬性和方法是不想暴露出去的，現在要想辦法實現這個功能，es6有Symbol可以藉助這個型別的特性進行私有屬性的實現，順便做成Vue的外掛
完整程式碼實現
const config = Symbol('config')
const isCompleteURL = Symbol('isCompleteURL')
const requestBefore = Symbol('requestBefore')
const requestAfter = Symbol('requestAfter')
class MinRequest {
[config] = {
baseURL: '',
header: {
'content-type': 'application/json'
},
method: 'GET',
dataType: 'json',
responseType: 'text'
}
interceptors = {
request: (func) => {
if (func) {
MinRequest[requestBefore] = func
} else {
MinRequest[requestBefore] = (request) => request
}
},
response: (func) => {
if (func) {
MinRequest[requestAfter] = func
} else {
MinRequest[requestAfter] = (response) => response
}
}
}
static [requestBefore] (config) {
return config
}
static [requestAfter] (response) {
return response
}
static [isCompleteURL] (url) {
return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
}
setConfig (func) {
this[config] = func(this[config])
}
request (options = {}) {
options.baseURL = options.baseURL || this[config].baseURL
options.dataType = options.dataType || this[config].dataType
options.url = MinRequest[isCompleteURL](options.url) ? options.url : (options.baseURL + options.url)
options.data = options.data
options.header = {...options.header, ...this[config].header}
options.method = options.method || this[config].method
options = {...options, ...MinRequest[requestBefore](options)}
return new Promise((resolve, reject) => {
options.success = function (res) {
resolve(MinRequest[requestAfter](res))
}
options.fail= function (err) {
reject(MinRequest[requestAfter](err))
}
uni.request(options)
})
}
get (url, data, options = {}) {
options.url = url
options.data = data
options.method = 'GET'
return this.request(options)
}
post (url, data, options = {}) {
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
}
}
MinRequest.install = function (Vue) {
Vue.mixin({
beforeCreate: function () {
if (this.$options.minRequest) {
console.log(this.$options.minRequest)
Vue._minRequest = this.$options.minRequest
}
}
})
Object.defineProperty(Vue.prototype, '$minApi', {
get: function () {
return Vue._minRequest.apis
}
})
}
export default MinRequest複製程式碼怎麼呼叫呢
建立api.js檔案
import MinRequest from './MinRequest'
const minRequest = new MinRequest()
// 請求攔截器
minRequest.interceptors.request((request) => {
return request
})
// 響應攔截器
minRequest.interceptors.response((response) => {
return response.data
})
// 設定預設配置
minRequest.setConfig((config) => {
config.baseURL = 'https://www.baidu.com'
return config
})
export default {
// 這裡統一管理api請求
apis: {
uniapp (data) {
return minRequest.get('/s', data)
}
}
}複製程式碼在main.js新增
import MinRequest from './MinRequest'
import minRequest from './api'
Vue.use(MinRequest)
const app = new Vue({
...App,
minRequest
})複製程式碼在page頁面呼叫
methods: {
// 使用方法一
testRequest1 () {
this.$minApi.uniapp({wd: 'uni-app'}).then(res => {
this.res = res
console.log(res)
}).catch(err => {
console.log(err)
})
},
// 使用方式二
async testRequest2 () {
try {
const res = await this.$minApi.uniapp({wd: 'uni-app'})
console.log(res)
} catch (err) {
console.log(err)
}
}
}複製程式碼上面只是實現的簡單封裝具體呼叫參考github