在Vue中使用两个不同的接口地址，并封装请求，添加请求头

Vue.js项目环境变量使用与代码示例

最新推荐文章于 2024-05-17 14:46:37 发布

原创最新推荐文章于 2024-05-17 14:46:37 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

博客介绍了Vue.js项目中环境变量index.js的使用。它一般存储后端API的URL地址，可用于管理不同环境配置。可在项目根目录相关文件中定义其值，使用时要确保正确设置和配置，还给出了man.js全局注册及页面使用代码示例。

直接上代码

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')