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项目中使用mqtt)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- yii与uniapp交互(Yii框架的路由配置方法分析)
- 微信小程序可以用百度的echarts吗(uniapp在微信小程序中使用ECharts的方法)
- uni app 小程序全局样式没法用(uniapp封装小程序雷达图组件的完整代码)
- uniapp 动态表单(详解uniapp无痛刷新token方法)
- uni-app项目开发教程学习(分析uniapp如何动态获取接口域名)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
热门推荐
- 腾讯云服务器怎么重装系统(腾讯云服务器如何重装系统)
- sql server中随机函数(SQL SERVER 2012新增函数之逻辑函数IIF)
- 登录宝塔面板无法显示网站(宝塔bt面板如何设置自定义404错误页面)
- vue自定义组件定义事件(基于Vue实现自定义组件的方式引入图标)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- centosdocker镜像安装mysql(linux下利用Docker安装mysql的步骤)
- nginx 使用手册(nginx服务器的下载安装与使用详解)
- 停止mysql服务命令(windows下实现定时重启Apache与MySQL方法)
- mysql删除数据库的命令(MySQL 线上数据库清理数据的方法)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)