分析uniapp如何动态获取接口域名

 更新时间:2021年06月07日 09:10:08   作者:点几  
本文主要介绍了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动态获取接口域名的资料请关注脚本之家其它相关文章!

相关文章

  • js定时器不准确问题的解决方法

    js定时器不准确问题的解决方法

    本文主要介绍了js定时器不准确问题的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-06-06
  • js制作可以延时消失的菜单

    js制作可以延时消失的菜单

    这篇文章主要为大家详细介绍了基于JavaScript制作可以延时消失的菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 嵌入式iframe子页面与父页面js通信的方法

    嵌入式iframe子页面与父页面js通信的方法

    这篇文章主要介绍了嵌入式iframe子页面与父页面js通信的方法,实例分析了嵌入式iframe子页面与父页面js通信的常用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript中极易出错的操作符运算总结

    JavaScript中极易出错的操作符运算总结

    这篇文章主要给大家介绍了关于JavaScript中极易出错的操作符运算的相关资料,包括了算术运算符、比较运算符、逻辑运算符、赋值运算符、一元运算符以及运算优先级等问题,需要的朋友可以参考下
    2021-08-08
  • js文件中引入另一个js文件的4种方法总结

    js文件中引入另一个js文件的4种方法总结

    JavaScript文件是一个文本类型的文件,在任何文本编辑器中都可以被打开和编辑,JavaScript文件的扩展名为js,这篇文章主要给大家介绍了关于js文件中引入另一个js文件的4种方法总结,需要的朋友可以参考下
    2023-12-12
  • JS题解leetcode去掉最低工资和最高工资后的工资平均值

    JS题解leetcode去掉最低工资和最高工资后的工资平均值

    这篇文章主要为大家介绍了JS题解leetcode去掉最低工资和最高工资后的工资平均值,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 微信小程序实现上传图片功能

    微信小程序实现上传图片功能

    这篇文章主要为大家详细介绍了微信小程序实现上传图片功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05
  • js函数与php函数的区别实例浅析

    js函数与php函数的区别实例浅析

    这篇文章主要介绍了js函数与php函数的区别,以实例形式较为简单的分析了js函数与php函数语法及应用上的不同点,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • 怎样在html文档里做隔行换色的多行方法

    怎样在html文档里做隔行换色的多行方法

    怎样在html文档里做隔行换色的多行方法...
    2007-01-01
  • 深入讲解xhr(XMLHttpRequest)/jsonp请求之abort

    深入讲解xhr(XMLHttpRequest)/jsonp请求之abort

    这篇文章主要给大家深入的介绍了关于xhr(XMLHttpRequest)/jsonp请求之abort的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07

最新评论