vue项目中如何调用多个不同的ip接口

 更新时间:2022年08月09日 16:45:03   作者:曾经的你d  
这篇文章主要介绍了vue项目中如何调用多个不同的ip接口,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

如何调用多个不同的ip接口

灵感来源:

  • 项目的登录登出权限是调A的ip下面的接口,其他的功能调的接口是B的ip下面的接口

思路:

  • 其实就是多写几个request.js文件罢了,或者在一个文件里面多写几个响应拦截和请求拦截.

上代码:

第一个文件

request.js

import axios from 'axios'
import Vue from 'vue'
if(process.env.NODE_ENV == "development"){//开发环境
  axios.defaults.baseURL = 'http://xxxxxx/air/';
}else if(process.env.NODE_ENV == "production"){
  axios.defaults.baseURL = '/air/api'; // 生产环境
}
const service = axios.create({
  timeout: 20000,
})
// 请求拦截
service.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    // 请求错误处理.......
  }
)
// 响应拦截
service.interceptors.response.use(
  response =>{
    //响应结果处理.......
  },
  error => {
    // 请求错误处理.......
  }
)
export default service

第二个文件

requestSec.js

import axios from 'axios'
import Vue from 'vue'
if(process.env.NODE_ENV == "development"){//开发环境
  axios.defaults.baseURL = 'http://xxxxxx/air/';
}else if(process.env.NODE_ENV == "production"){
  axios.defaults.baseURL = '/air/api'; // 生产环境
}
const sec = axios.create({
  timeout: 20000,
})
// 请求拦截
sec.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    // 请求错误处理.......
  }
)
// 响应拦截
sec.interceptors.response.use(
  response =>{
    //响应结果处理.......
  },
  error => {
    // 请求错误处理.......
  }
)
export default sec

哎?你会发现这两个文件不是一样的吗,对,就是一样的,只不过是声明了两个请求拦截和响应拦截罢了.你也可以放到一个文件里面.都一样.

第三个文件

封装的接口文件

import axios from './request'
import sec from './requestSec'
// 登录
export function login(data) {
  return sec({
    method:'post',
    url:'system/login',
    data,
  })
}
// 分页查询所有管辖区域
export function queryWithPageAll(params) {
  return axios({
    method:'get',
    url:'area/queryAll',
    params
  })
}

到这里就可以看出不一样了,如果要调用request里面ip下面的接口就return axios 如果要调用requestSec里面ip下面的接口就return sec

其他就是正常的了,哪个页面调用就正常调用就可以了.

设置自动配置不同环境接口

1.再根目录新建一个文件夹configenv

在文件夹下新建baseServerConfig.js

module.exports = {
  // 本地环境设置 测试接口的地址
  "localhost:8010": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // 本地IP环境设置 测试接口的地址
  "10.12.5.46:8010": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // 测试环境设置 测试接口的地址
  "22.81.24.60:8080": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // UAT环境设置 UAT接口地址
  "uat.baidu.com": {
    mallUrl: 'http://uat.baidu.com',
    storeHouseUrl: 'http://uat-init.baidu.com' 
  },
    //生产环境设置 生产接口地址
  "www.baidu.com": {
    mallUrl: 'http://www.baidu.com',
    storeHouseUrl: 'http://init.baidu.com' 
  }
}

2.在main.js 入口文件中

引入baseServerConfig,用变量接收当前的环境 对应的接口地址,把这个变量放入Vue的原型的属性上

import baseServer from '../configenv/baseServerConfig'
const mallUrl= baseServer[location.host].mallUrl
const storeHouseUrl= baseServer[location.host].storeHouseUrl
Vue.prototype.mallUrl= mallUrl;//商城地址
Vue.prototype.storeHouseUrl= storeHouseUrl;//仓库地址

3.在实际Vue页面中,接口实际调用

this.$http.get(this.mallUrl+"/api/a/b/c").then(resp =>{
    // 写逻辑
})
this.$http.get(this.storeHouseUrl+"/api/abc/b/c").then(resp =>{
    // 写逻辑
})

小结:这样就实现了当前环境 与 不同环境接口相互绑定,避免人员重复的切换接口环境。

从而实现了npm run build 一个包既可以放在测试环境、UAT环境和生产环境 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element-ui tree结构实现增删改自定义功能代码

    element-ui tree结构实现增删改自定义功能代码

    这篇文章主要介绍了element-ui tree结构实现增删改自定义功能代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue组合式API浅显入门示例详解

    vue组合式API浅显入门示例详解

    这篇文章主要为大家介绍了vue组合式API浅显入门示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • 浅谈vue中computed属性对data属性赋值为undefined的原因

    浅谈vue中computed属性对data属性赋值为undefined的原因

    本文主要介绍了浅谈vue中computed属性对data属性赋值为undefined的原因,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Vue状态管理库Vuex的入门使用教程

    Vue状态管理库Vuex的入门使用教程

    Vuex是一个专门为Vue.js应用程序开发的状态管理库。它采用了一个集中式的架构,将应用程序的所有组件的状态存储在一个单独的地方。这使得状态的管理和维护变得更加容易
    2023-03-03
  • Vue slot用法(小结)

    Vue slot用法(小结)

    这篇文章主要介绍了Vue slot用法(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • VsCode里的Vue模板的实现

    VsCode里的Vue模板的实现

    这篇文章主要介绍了VsCode里的Vue模板的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • vue、uniapp中动态添加绑定style、class 9种实现方法

    vue、uniapp中动态添加绑定style、class 9种实现方法

    这篇文章主要介绍了vue、uniapp中动态添加绑定style、class 9种方法实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • 使用v-memo缓存模板子树提高应用性能详解

    使用v-memo缓存模板子树提高应用性能详解

    这篇文章主要为大家介绍了使用v-memo缓存模板子树提高应用性能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • vue-ls vue本地储存的实例讲解

    vue-ls vue本地储存的实例讲解

    这篇文章主要介绍了vue-ls vue本地储存的实例讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 详解如何使用Vue2做服务端渲染

    详解如何使用Vue2做服务端渲染

    本篇文章主要介绍了如何使用Vue2做服务端渲染 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03

最新评论