内容简介:这几天没事干,就去小程序开发小团队里看看,顺便看了一下代码,在网络请求上发现了一些问题,差点没忍住破口大骂,最终想了想,他们之前没做过,都是第一次就算了(其实是安慰自己而已)。网络请求都写在page里,每个请求都要重复的写上面解决了每个请求都要重复的写
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
uni-app路由的封装
uni-app路由的封装
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 封装 axios 取消重复请求
- axios重复点击取消上一次请求封装
- 封装axios请求并对提交参数进行校验
- 封装一个原生js的ajax请求,支持IE9CORS跨域请求
- 小程序封装wx.request请求并创建接口管理文件
- 谈谈 iOS 网络层设计(SSJNetWork封装缓冲,log日志,自动网络请求)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。