直接上代码
index.js
process.env.VUE_APP_API_MH_URL
是一个环境变量,它应该是在 Vue.js 项目的配置文件中定义的。一般来说,这个变量用于存储与后端 API 相关的 URL 地址。
在 Vue.js 项目中,可以使用环境变量来管理不同环境下的配置,例如开发环境、测试环境和生产环境。通过配置不同的环境变量值,可以在不同的环境中使用不同的 API 地址,而无需更改代码。
具体的 API 地址取决于你的项目配置,你可以在 Vue.js 项目的根目录下找到 .env
文件或 .env.production
文件等,里面定义了该环境变量的值。在代码中使用 process.env.VUE_APP_API_MH_URL
可以获取到该环境变量的值,然后将其用于与后端进行通信。
请注意,VUE_APP_*
是一个约定的前缀,用于区分普通的环境变量和 Vue.js 特定的环境变量。确保在使用之前正确设置和配置对应的环境变量。
import axios from 'axios'
import {
Message
} from 'element-ui';
import router from '@/router/index'; // 导入Vue Router实例
// 创建 axios 实例
const service = axios.create({
// 业务系统
baseURL: process.env.VUE_APP_API_YW_URL, // 测试
timeout: 10000
})
// 请求拦截器
service.interceptors.request.use(
(config) => {
config.headers['Authorization'] = "Bearer " + sessionStorage.getItem('token') // 添加自定义请求头
return config
},
(error) => {
console.log(error)
Promise.reject(error)
}
)
service.interceptors.response.use((response) => {
if (response.request.responseType === 'blob') {
return response
}
const token = sessionStorage.getItem('token')
if (token) {
const code = response.data.code
if (code === 1011006 || code === 1011007 || code === 1011008 || code === 1011009) {
// if (code === 200) {
Message.error('登录已过期,请重新登录!')
sessionStorage.removeItem('user');
sessionStorage.removeItem('token');
sessionStorage.removeItem('hasRz');
setTimeout(() => {
router.push('/login')
}, 1000)
}
}
return response
})
// 创建不同 baseURL 的实例
const instance1 = axios.create({
// 门户接口
baseURL: process.env.VUE_APP_API_MH_URL, // 测试
timeout: 10000
})
// GET 请求封装
const get = function get(url, params, isV2 = false, responseType = 'json', ) {
const instance = isV2 ? service : instance1 // 判断是否isV2 而选择请求路径和请求头
return new Promise(resolve => {
instance.get(url, {
params,
responseType
}).then(value => {
if (value.status === 200) {
resolve(value.data);
}
})
})
}
// POST 请求封装
const post = function post(url, data, isV2 = false) {
const instance = isV2 ? service : instance1 // 判断是否isV2 而选择请求路径和请求头
return new Promise(resolve => {
instance.post(url, data).then(value => {
if (value.status === 200) {
resolve(value.data);
}
})
})
}
export default {
get,
post
}
man.js 全局注册
import http from "./components/http/index.js";
Vue.prototype.$get = http.get;
Vue.prototype.$post = http.post;
页面使用
记得用async await 修饰
// 大概意思就是 传了true 就是调用的业务系统的 不传就是门户的
// 这个是调 门户接口
// this.$get('url',params)
this.$get('/blog/api/allNewsListJson?pageNumber=1&pageSize=4&top=1')
if (res5.status == 200) {
this.piclist = res5.data.rows
}
// 这个是调的业务系统接口
this.$post("/api/projectFront/edit", params ,true);
// 还有调获取文件的接口
this.$get('/api/sysFileInfo/download', params, true, 'blob')