分析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動態獲取接口域名的資料請關註WalkonNet其它相關文章！