Avec vue-resource, nous pourrions définir l'URL racine dans main.js
comme suit:
Vue.http.options.root = 'http://localhost:3000/api'
J'ai essayé de remplacer ça par:
axios.defaults.baseURL = 'http://localhost:3000/api';
Vue.prototype.$http = axios
Cependant, mes appels à la publication ne fonctionnent pas comme prévu et Vue.http.post
génère une erreur.
Comment cela est-il réalisé?
Avec axios, on peut créer une autre instance ayant une configuration personnalisée
var my_axios = axios.create({
baseURL: 'http://localhost:3000/api',
});
À partir de là, vous pouvez utiliser my_axios
pour les opérations. Vous pouvez créer un prototype de l'instance axios personnalisée dans Vue:
Vue.prototype.$http = my_axios
import axios from 'axios';
export const HTTP = axios.create({
baseURL: `http://localhost:3000/api/`,
headers: {
Authorization: 'Bearer {token}'
}
})
Vous pouvez maintenant utiliser HTTP comme si
<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>