从 vue-resource 切换到 axios

Posted 2023-02-22

【中文标题】从 vue-resource 切换到 axios

【英文标题】：Switching from vue-resource to axios

【发布时间】：2017-06-12 07:20:41

【问题描述】：

使用 vue-resource，我们可以像这样在main.js 中设置根 url：

Vue.http.options.root = 'http://localhost:3000/api'

我尝试将其替换为：

axios.defaults.baseURL = 'http://localhost:3000/api';
Vue.prototype.$http = axios

但是，现在我的 post 调用没有按预期工作，Vue.http.post 引发错误。

这是如何实现的？

【问题讨论】：

在实例方法中不要使用绝对url路径，应该使用相对url

【参考方案1】：

使用 axios，可以创建另一个实例having a custom config

var my_axios = axios.create(
  baseURL: 'http://localhost:3000/api',
);

从这里可以使用my_axios 进行操作。您可以将自定义 axios 实例原型化为 Vue：

Vue.prototype.$http = my_axios

【参考方案2】：

import axios from 'axios';

export const HTTP = axios.create(
  baseURL: `http://localhost:3000/api/`,
  headers: 
    Authorization: 'Bearer token'
  
)

您现在可以像这样使用 HTTP

<script>
import HTTP from './http-common';

export default 
  data: () => (
    posts: [],
    errors: []
  ),

  created() 
    HTTP.get(`posts`)
    .then(response => 
      this.posts = response.data
    )
    .catch(e => 
      this.errors.push(e)
    )
  

</script>

【讨论】：

如果你想在 vue-resource 中访问 this.$http，你可以设置 Vue.prototype.$http = axios。