uni-app项目开发教程学习(分析uniapp如何动态获取接口域名)
类别:编程学习 浏览量:2474
时间:2021-11-08 16:53:29 uni-app项目开发教程学习
分析uniapp如何动态获取接口域名背景接口域名没有写死,而是动态获取。具体实现就是 通过读取一个静态json文件,来设置真实的接口域名。好处是原域名有可能被封,这样可以直接后台操作修改该配置文件即可;不然的话,h5 项目可能还好说,app 的话必须重新发版。
代码// httpService.js 对 uni.request 的封装。
在数据请求入口处,统一先进行 域名获取,即 执行 config.requestRemoteIp 方法
import config from '@/config' import Vue from 'vue' import cacheData from '@/service/cacheData.js' const MockUtil = () => import('@/libs/mockUtil.js') import Storage from '@/libs/storage.js' class HttpRequest { /** * 读取接口数据 * @param options 请求信息 * @param noMock 在整体使用mock数据的情形下,可 单独设置 某个接口请求真实数据 * @param cacheId * @returns {*} */ async requestResolve(options, urlCustom = '', noMock = false, cacheId = null) { let remoteIP = await config.requestRemoteIp(); // 动态设置接口请求域名 if (process.env.NODE_ENV === 'development' && config.isMockApi && !noMock) { return this.getMockData(options) } if (cacheId && cacheData[cacheId]) { return this.testHttp(cacheData[cacheId]) } return new Promise((resolve, reject) => { let baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro; options.url = baseUrl + options.url + `${urlCustom}`; uni.request( Object.assign({ success: (res) => { if (res.statusCode != '200'){ uni.showToast({ title: '服务器错误:'+res.statusCode, icon: "none" }) reject() } else if (res.data.code == 10001) { Storage.removeToken(); let vue = new Vue(); vue.$store.dispatch('logout') vue.$routeUtil.reLaunch('main'); } else if (res.data.code != 200) { if (res.data.message) { uni.showToast({ icon: 'none', title: res.data.message }); } reject(res.data) } else { if (cacheId) { cacheData[cacheId] = res.data.data } resolve(res.data.data) } }, fail: err => { uni.showToast({ title: '服务器错误', icon: "none" }) } }, options) ); }) } /** * mock数据按需导入 * @param options * @returns {*} */ async getMockData(options) { const Mock = await MockUtil() const MockUrl = Mock.default[options.url] if (typeof MockUrl !== 'function') { return this.testHttp(MockUrl) } if (options.method === 'post') { return this.testHttp(MockUrl(options.data, false)) } return this.testHttp(MockUrl(options.params, true)) } testHttp(data) { let pro = new Promise(function(resolve, reject) { setTimeout(function() { resolve(data) }, 50) }) return pro } } export default new HttpRequest()
// config.js
const config = { isMockApi: false, // requestUrl: 'http://qiniu.eightyin.cn/teacherpath.json?time=' + Math.random().toString(36), requestUrl: 'http://qiniu.eightyin.cn/teacherpathtest.json?time=' + Math.random().toString(36), baseUrl: { dev: '', pro: '' }, img: { ossDomain: '' }, uuid: Math.random().toString(36).substring(3, 20), requestRemoteIp: () => { console.log('config:', config) if (config.RemoteIpInited) return Promise.resolve(); return new Promise((resolve, reject) => { uni.request({ url: config.requestUrl, success: (response) => { //todo 测试 // config.baseUrl.pro = response.data.data.path; config.baseUrl.dev = 'http://bayin5.mycwgs.com/'; config.img.ossDomain = response.data.data.ossDomain; config.RemoteIpInited = true; resolve() }, fail: () => { config.RemoteIpInited = true; resolve() } }) }); } } export default config
以上就是分析uniapp如何动态获取接口域名的详细内容,更多关于uniapp动态获取接口域名的资料请关注开心学习网其它相关文章!
您可能感兴趣
- uniapp 动态表单(详解uniapp无痛刷新token方法)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- uniapp 全局变量(如何在uniapp项目中使用mqtt)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- yii与uniapp交互(Yii框架的路由配置方法分析)
- uni-app项目开发教程学习(分析uniapp如何动态获取接口域名)
- 吉林舒兰 封城 聚集性疫情传播链已延至沈阳,有一个细节让人忧心(吉林舒兰封城)
- 1天密接者猛增77人,患者轨迹透露危险信号 吉林市全面封闭管理(1天密接者猛增77人)
- 吉林舒兰 封城 15人确诊 276人隔离,出现跨省传播(吉林舒兰封城)
- 四月新番CP人气榜公布,《剃须》两度上榜,沙优不是女朋友(四月新番CP人气榜公布)
- 2019年外媒秋季新番动画角色CP排行榜,桐人和爱丽丝落榜(2019年外媒秋季新番动画角色CP排行榜)
- 新一小兰领衔 盘点动漫中的那些 远距离恋爱情侣(盘点动漫中的那些)
热门推荐
- 钉钉嵌入web端应用程序(钉钉企业内部H5微应用开发详解)
- html5代码之翻页(HTML5实现直播间评论滚动效果的代码)
- reactnative动态设置值(react native实现监控手势上下拉动效果)
- php怎么修改单独一行数据(PHP实现批量修改文件名的方法示例)
- python查找含特定字符的字符串(Python实现查找字符串数组最长公共前缀示例)
- mysql5.7.24rpm安装(MySQL系列-YUM及RPM包安装v5.7.34)
- 搭建lamp平台并测试(浅谈Web服务器的构架:LAMP LNMP以及LLMP)
- mysql自增锁(深入剖析 MySQL 自增锁)
- nginx路径匹配优先级(Nginx的location的常见规则优先级问题)
- php微信支付流程(PHP实现微信退款的方法示例)