在 vuejs 组件中获取 axios base url 的值

Posted 2023-02-22

【中文标题】在 vuejs 组件中获取 axios base url 的值

【英文标题】：Fetch the value of axios base url in a vuejs component

【发布时间】：2018-05-04 01:32:44

【问题描述】：

我已经像这样在 vuejs 全局配置中设置了我的 axios 配置

const axiosConfig = 
baseURL: 'http://127.0.0.1:8000/api',
timeout: 30000, 
 ;
Vue.prototype.$axios =  axios.create(axiosConfig);

现在我想在组件中检索 basEuRL 的值

<script>
  data:()=>(
     apiurl:this.$axios.baseURL
   )
<script>

但以上不起作用。我希望属性 apiurl 有

http://127.0.0.1:8000/api

【问题讨论】：

axios.defaults.baseURL = 'http://127.0.0.1:8000/api' 在 main.js 中，带有单个文件组件设置。然后在别处使用/something 得到http://127.0.0.1:8000/api/something。 github.com/axios/axios#config-defaults

【参考方案1】：

不知道为什么需要在数据组件中调用baseURL，但我找到了一种使用axios baseURL 的常用方法，例如Vue.js REST API Consumption with Axios：

// http-common.js
import axios from 'axios';

export const HTTP = axios.create(
  baseURL: `http://jsonplaceholder.typicode.com/`,
  headers: 
    Authorization: 'Bearer token'
  
)

然后

import HTTP from './http-common';
HTTP.get(`posts`)
    .then(response => 
      this.posts = response.data
    )
    .catch(e => 
      this.errors.push(e)
    )