分析uniapp如何動(dòng)態(tài)獲取接口域名
背景
接口域名沒(méi)有寫(xiě)死,而是動(dòng)態(tài)獲取。具體實(shí)現(xiàn)就是 通過(guò)讀取一個(gè)靜態(tài)json文件,來(lái)設(shè)置真實(shí)的接口域名。好處是原域名有可能被封,這樣可以直接后臺(tái)操作修改該配置文件即可;不然的話,h5 項(xiàng)目可能還好說(shuō),app 的話必須重新發(fā)版。
代碼
// httpService.js 對(duì) uni.request 的封裝。
在數(shù)據(jù)請(qǐng)求入口處,統(tǒng)一先進(jìn)行 域名獲取,即 執(zhí)行 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 { /** * 讀取接口數(shù)據(jù) * @param options 請(qǐng)求信息 * @param noMock 在整體使用mock數(shù)據(jù)的情形下,可 單獨(dú)設(shè)置 某個(gè)接口請(qǐng)求真實(shí)數(shù)據(jù) * @param cacheId * @returns {*} */ async requestResolve(options, urlCustom = '', noMock = false, cacheId = null) { let remoteIP = await config.requestRemoteIp(); // 動(dòng)態(tài)設(shè)置接口請(qǐng)求域名 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: '服務(wù)器錯(cuò)誤:'+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: '服務(wù)器錯(cuò)誤', icon: "none" }) } }, options) ); }) } /** * mock數(shù)據(jù)按需導(dǎo)入 * @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 測(cè)試 // 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如何動(dòng)態(tài)獲取接口域名的詳細(xì)內(nèi)容,更多關(guān)于uniapp動(dòng)態(tài)獲取接口域名的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS實(shí)現(xiàn)雙擊屏幕滾動(dòng)效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)雙擊屏幕滾動(dòng)效果代碼,涉及JavaScript鼠標(biāo)事件的響應(yīng)及頁(yè)面元素屬性的動(dòng)態(tài)變換技巧,需要的朋友可以參考下2015-10-10javascript運(yùn)算符——邏輯運(yùn)算符全面解析
下面小編就為大家?guī)?lái)一篇javascript運(yùn)算符——邏輯運(yùn)算符詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06萊鳥(niǎo)介紹javascript onclick事件
這篇文章主要介紹了萊鳥(niǎo)介紹javascript onclick事件的相關(guān)資料,需要的朋友可以參考下2016-01-01JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密示例
這篇文章主要介紹了JS加密插件CryptoJS實(shí)現(xiàn)的Base64加密,結(jié)合實(shí)例形式分析了CryptoJS進(jìn)行base64加密的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08JavaScript數(shù)組扁平轉(zhuǎn)樹(shù)形結(jié)構(gòu)數(shù)據(jù)(Tree)的實(shí)現(xiàn)
本文主要介紹了JavaScript數(shù)組扁平轉(zhuǎn)樹(shù)形結(jié)構(gòu)數(shù)據(jù)(Tree)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08微信小程序生成海報(bào)分享朋友圈的實(shí)現(xiàn)方法
利用微信強(qiáng)大的社交能力通過(guò)小程序達(dá)到裂變的目的,拉取新用戶。下面小編給大家?guī)?lái)了微信小程序生成海報(bào)分享朋友圈的實(shí)現(xiàn)方法,感興趣的朋友跟隨小編一起看看吧2019-05-05javascript稀疏數(shù)組(sparse array)和密集數(shù)組用法分析
這篇文章主要介紹了javascript稀疏數(shù)組(sparse array)和密集數(shù)組用法,分析javascript稀疏數(shù)組和密集數(shù)組的功能、定義與使用方法,需要的朋友可以參考下2016-12-12Javascript 實(shí)現(xiàn)放大鏡效果實(shí)例詳解
這篇文章主要介紹了Javascript 實(shí)現(xiàn)放大鏡效果實(shí)例詳解的相關(guān)資料,這里附有實(shí)現(xiàn)實(shí)例代碼,具有參考價(jià)值,需要的朋友可以參考下2016-12-12對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解
今天小編就為大家分享一篇對(duì)layui數(shù)據(jù)表格動(dòng)態(tài)cols(字段)動(dòng)態(tài)變化詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10