web-dev-qa-db-fra.com

Passerelle de vue à axios

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é?

javascriptvue.jsaxiosvue-resource
7
softcode

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
6
keksnicoh
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>
1
Emad Adly