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使用vue写页面(分析uniapp入门之nvue爬坑记)
- yii与uniapp交互(Yii框架的路由配置方法分析)
- uni-app项目开发教程学习(分析uniapp如何动态获取接口域名)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- uniapp 全局变量(如何在uniapp项目中使用mqtt)
- uniapp 动态表单(详解uniapp无痛刷新token方法)
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- 2020年大众7.5代高尔夫R终结特别版 最后的呐喊(2020年大众7.5代高尔夫R终结特别版)
- 七年前的这部剧有毒,全剧只有女主红到发紫,男主至今无人认识(七年前的这部剧有毒)
- 宋轶除了演过于曼丽,原来还演过一个青楼女子(宋轶除了演过于曼丽)
- 赵丽颖第一部当女主的戏,主角配角个个都是实力演员(赵丽颖第一部当女主的戏)
- 乾隆为何这么喜爱白塔原因是什么(乾隆为何这么喜爱白塔原因是什么)
- 逐渐消失的东北八大怪现象,进步的社会里我们遗失的是什么(逐渐消失的东北八大怪现象)
热门推荐
- extjs 日期控件
- canvas两种绘图方法(canvas 基础之图像处理的使用)
- linux中基本操作系统有什么(Linux操作系统的概述与简介)
- css特效边框流线动画(CSS 动画实现动态气泡背景的方法)
- php列表怎么用(PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能)
- phpredis使用场景(php和redis实现秒杀活动的流程)
- jquery实现在光标位置插入内容
- linux nginx搭建(Ubuntu使用nginx搭建webdav文件服务器的详细过程)
- php 与asp对比(asp.net和php的区别点总结)
- python中如何清空列表数据(Python批量删除只保留最近几天table的代码实例)