VUE3-Erste-Schritte-Tutorial: Verwenden des Vue.js-Plug-Ins zum Kapseln von API-Schnittstellenanforderungen

Vue.js ist derzeit eines der beliebtesten Front-End-Frameworks. Vue3 ist die neueste Version von Vue.js, die eine einfachere Syntax und eine bessere Leistung bietet. Bei der Entwicklung von Vue.js sind Datenanfragen ein wesentlicher Bestandteil und auch API-Schnittstellenanfragen gehören zu den üblichen Aufgaben von Programmierern. In diesem Tutorial wird ausführlich erläutert, wie Sie das Vue.js-Plug-In zum Kapseln von API-Schnittstellenanforderungen verwenden.

Was ist ein Vue.js-Plugin?

In Vue.js ist ein Plug-in ein Funktionsmodul, das Funktionen auf globaler Ebene für Vue.js-Anwendungen bereitstellen kann. Wir können Funktionen in Plugins kapseln und Eigenschaften, Anweisungen, Komponenten und mehr in Vue.js-Anwendungen einfügen. Vue.js stellt uns offiziell einige gängige Plug-Ins zur Verfügung, z. B. Vue Router und Vuex. Natürlich können wir auch unsere eigenen Plug-Ins schreiben, um die von uns benötigten Funktionen zu erreichen.

1. Plug-Ins erstellen

Wir können einfache Plug-Ins erstellen, indem wir globale Funktionen oder Eigenschaften definieren. In diesem Tutorial stellen wir jedoch vor, wie API-Schnittstellenanforderungen in einem Plug-In gekapselt werden. Zuerst müssen wir axios installieren, eine beliebte JavaScript-Bibliothek zur Verarbeitung von HTTP-Anfragen.

npm install axios --save

Dann erstellen wir ein API-Plugin wie folgt:

axios aus 'axios' importieren

const ApiPlugin = {
install(Vue) {

Vue.prototype.$api = {
  get(url) {
    return axios.get(url)
  },
  post(url, data) {
    return axios.post(url, data)
  }
}

}
}

export default ApiPlugin

Im obigen Code definieren wir ein ApiPlugin-Plugin, das eine install()-Methode enthält, die den Vue-Konstruktor als Parameter akzeptiert. In der install()-Methode wird ein $api-Attribut definiert und ein Objekt mit zwei Methoden (get und post) wird an Vue.prototype angehängt.

2. Plugins verwenden

Da wir nun ein API-Plugin erstellt haben, müssen wir es in unserer Vue.js-Anwendung verwenden. Wir können den folgenden Code verwenden, um das Plugin in die Vue.js-Anwendung einzuführen:

Vue aus „vue“ importieren
App aus „./App.vue“ importieren
ApiPlugin aus „./api-plugin“ importieren

Vue . use(ApiPlugin)

new Vue({
render: h => h(App),
}).$mount('#app')

Im obigen Code führen wir ApiPlugin zunächst über die Importanweisung ein Anwendung und verwenden Sie dann die Methode Vue.use(), um das Plugin zu installieren. Schließlich erstellen wir eine Vue-Instanz und mounten sie auf dem #app-Element. Jetzt können wir das Attribut $api verwenden, um API-Anfragen in unserer Anwendung zu stellen.

3. API-Anfrage senden

Angenommen, wir möchten eine GET-Anfrage senden und die Daten zurückerhalten. Wir können die Methode $api.get() in der Vue-Komponente verwenden, um Folgendes zu erreichen:

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ message }}</h1>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
name: 'App',
data() {

return {
  message: '',
}

},
async Mounted() {

const response = await this.$api.get('http://localhost:3000')
this.message = response.data.message

}
}
2cacc6d41bbb37262a98f745aa00fbf0

Im obigen Code befinden wir uns im mount Hook-Funktion Verwenden Sie die Methode $api.get(), um eine GET-Anfrage an http://localhost:3000 zu senden, und weisen Sie nach Abschluss der Anfrage die zurückgegebenen Daten dem Nachrichtenattribut zu, um sie in der Vorlage anzuzeigen.

4. Senden Sie eine POST-Anfrage

Das Senden einer POST-Anfrage ähnelt dem Senden einer GET-Anfrage. Übergeben Sie einfach die Daten als zweiten Parameter der $api.post()-Methode:

async subscribe() {
const data = { Name: 'John', Alter: 30 }
const Antwort = warte auf dies.$api.post('http://localhost:3000', data)
console.log(response.data)
}

in Im obigen Code erstellen wir ein Datenobjekt mit zwei Eigenschaften in der Methode „submit()“ und übergeben es als zweiten Parameter, wenn wir die Methode „$api.post()“ aufrufen. Wir geben die zurückgegebenen Daten auf der Konsole aus.

Zusammenfassung

Durch das Studium dieses Tutorials sollten Sie nun verstehen, wie Sie das Vue.js-Plug-in zum Kapseln von API-Schnittstellenanforderungen verwenden. In der tatsächlichen Entwicklung werden API-Anfragen normalerweise zusammen mit anderen Funktionen, Komponenten usw. verwendet. Durch die Erstellung geeigneter Plug-Ins können wir Code besser organisieren und wiederverwenden. Ich hoffe, dass dieses Tutorial Ihnen bei Ihrer Vue.js-Entwicklungsarbeit helfen kann.

Das obige ist der detaillierte Inhalt vonVUE3-Erste-Schritte-Tutorial: Verwenden des Vue.js-Plug-Ins zum Kapseln von API-Schnittstellenanforderungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!