Morioh
Login
André Schürrle

André Schürrle

1 year ago

So nutzen Sie eine REST-API mit Axios in Vue.js

In diesem Tutorial zeigen wir Ihnen, wie Sie eine REST-API mit Axios in Vue.js nutzen. REST-APIs sind eine gängige Möglichkeit für Webanwendungen, miteinander zu kommunizieren. Axios ist eine JavaScript-Bibliothek, die es einfach macht, HTTP-Anfragen an REST-APIs zu stellen.

Um die REST-API mit Axios in Vue.js zu verwenden, befolgen Sie diese Schritte

  • Schritt 1: Axios installieren und importieren
  • Schritt 2: Abrufen von Daten mithilfe einer GET-Anfrage in Vue.js mit Axios
  • Schritt 3: Senden von Daten an eine API mithilfe einer POST-Anfrage mit Axios in Vue.js
  • Schritt 4: Erstellen einer wiederverwendbaren Axios-Basisinstanz in Vue.js für effiziente API-Aufrufe

Schritt 1: Axios installieren und importieren

Sie können Axios mit npm installieren:

npm install axios --save

Oder mit Garn:

yarn add axios

Wenn Sie Axios in Ihr Vue.js-Projekt integrieren, ist es notwendig, es zu importieren.

import axios from 'axios';

Schritt 2: Abrufen von Daten mithilfe einer GET-Anfrage in Vue.js mit Axios

Abrufen von Daten in Vue.js-Komponenten mithilfe von Axios innerhalb von Methoden oder Lebenszyklus-Hooks.

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },
  created() {
    axios.get(`http://jsonplaceholder.typicode.com/posts`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Der obige Code ist ein Beispiel für die Verwendung von Axios in einer Vue.js-Komponente, um Daten von einer API abzurufen und in der Vorlage anzuzeigen.

Die Vorlage verwendet Vue-Anweisungen, um die von der API abgerufenen Daten darzustellen. Die v-ifDirektive wird verwendet, um zu prüfen, ob  postsDateneigenschaften errorsWerte haben, und wenn ja, werden die entsprechenden Elemente gerendert. Die v-forDirektive wird verwendet, um das Array zu durchlaufen postsund den Titel und den Text jedes Beitrags anzuzeigen.

Im Skriptabschnitt wird Axios importiert und die Daten der Komponente werden so definiert, dass sie ein leeres Array für postsund haben errors. Der created()Lifecycle-Hook wird verwendet, um mithilfe der Methode die GET-Anfrage an die API zu stellen axios.get()und dabei die API-Endpunkt-URL zu übergeben. Die then()Methode wird verwendet, um die erfolgreiche Antwort zu verarbeiten und die postsDateneigenschaft auf die Antwortdaten festzulegen. Die catch()Methode wird verwendet, um etwaige Fehler zu behandeln und sie an die errorsDateneigenschaft zu übertragen.

Dieses Beispiel zeigt, wie man mit Axios Daten von einer API abruft und in einer Vue.js-Komponente anzeigt. Außerdem wird gezeigt, wie Fehler behandelt und in der Vorlage angezeigt werden.

Die  async/ await die Version würde so aussehen.

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },
  async created() {
    await axios.get(`http://jsonplaceholder.typicode.com/posts`)
    .then(response => {
      // JSON responses are automatically parsed.
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Schritt 3: Senden von Daten an eine API mithilfe einer POST-Anfrage mit Axios in Vue.js

POSTMit Axios können Sie ,  PUT,  PATCHund  Anfragen senden  DELETE .

<template>
  <div>
    <input type="text" v-model="postBody" @change="postPost()" />
    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: '',
      errors: []
    }
  },

  methods: {
    // Pushes posts to the server when called.
    postPost() {
      axios.post(`http://jsonplaceholder.typicode.com/posts`, {
        body: this.postBody
      })
      .then(response => {})
      .catch(e => {
        this.errors.push(e)
      })
    }
  }
}
</script>

Die  async/ await die Version würde so aussehen:

<template>
  <div>
    <input type="text" v-model="postBody" @change="postPost()" />
    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: '',
      errors: []
    }
  },

  methods: {
    // Pushes posts to the server when called.
    async postPost() {
      await axios.post(`http://jsonplaceholder.typicode.com/posts`, {
        body: this.postBody
      })
      .then(response => {})
      .catch(e => {
        this.errors.push(e)
      })
    }
  }
}
</script>

Als nächstes erstellen wir  axios.create() eine Basisinstanz.

Schritt 4: Erstellen einer wiederverwendbaren Axios-Basisinstanz in Vue.js für effiziente API-Aufrufe

Mit Axios können Sie eine Basisinstanz erstellen, die in Ihrer gesamten Vue.js-Anwendung wiederverwendet werden kann. Dies kann nützlich sein, wenn Sie viele API-Aufrufe an denselben Server durchführen oder wenn Sie in alle Ihre Anforderungen dieselben Header, z. B. einen Autorisierungsheader, einschließen müssen. Durch das Erstellen einer Basisinstanz können Sie eine gemeinsame Basis-URL und Konfiguration festlegen, die für alle Aufrufe der Instanz verwendet wird, wodurch Ihr Code organisierter und effizienter wird.

axios.js

import axios from 'axios';

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

Sie können jetzt  HTTP in Ihrer Komponente Folgendes verwenden:

<template>
  <div>
    <ul v-if="posts && posts.length">
      <li v-for="post of posts">
        <p><strong>{{post.title}}</strong></p>
        <p>{{post.body}}</p>
      </li>
    </ul>

    <ul v-if="errors && errors.length">
      <li v-for="error of errors">
        {{error.message}}
      </li>
    </ul>
  </div>
</template>

<script>
import { HTTP } from './axios';

export default {
  data() {
    return {
      posts: [],
      errors: []
    }
  },

  created() {
    HTTP.get(`posts`)
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</script>

Abschluss

Axios ist ein leistungsstarkes Tool, das in einem Vue.js-Projekt verwendet werden kann, um Datenverwaltungsaufgaben wie das Auffüllen und Übertragen von Daten an eine REST-API effizient zu erledigen. Indem Sie Axios importieren und direkt in Ihren Komponenten verwenden, können Sie Daten einfach von einer Methode oder einem Lebenszyklus-Hook abrufen und Fehler auf saubere und organisierte Weise behandeln. Darüber hinaus können Sie durch die Erstellung einer wiederverwendbaren Basisinstanz eine gemeinsame Basis-URL und Konfiguration für alle Aufrufe der Instanz verwenden und so Ihren Code effizienter gestalten. Die Verwendung von Axios in einem Vue.js-Projekt kann die Datenverwaltung erheblich vereinfachen und Ihnen helfen, einfach und effektiv mit einer REST-API zu interagieren.

1.10 GEEK