Exception behandeln in Axios, VueJs Projekt

[KatzOderKoder]

Hallo Zusammen,

ich kämpfe mit den ersten Vue.Js Experimental Projekt und möchte Daten aus einer MySQL DB in einer Tabelle anzeigen.
Ich verwende PHPStorm und habe damit die Projektvorlage für VUE Projekte verwendet. Das HelloWorld Beispiel hat auf Anhieb funktioniert. Ich habe es erweitert und Die Daten aus der Tabelle abrufen und anzeigen zu können.

muss ich für console.log noch etwas einbinden?
console.log gibt es nicht. Es gibt jedoch this.console.log. Beim ausführen kommt dann die Meldung "Uncaught (in promise) TypeError: Cannot read property 'console' of undefined"

Wenn ich den catch Block auskommentiere bekomme ich den eigentlichen Fehler:
"Uncaught (in promise) TypeError: response.data is not a function"

              .catch(function (error) {

                this.console.log(error.response);   <<<< ohne this.console gibt es bereits bei Starten ein Fehler.





HelloWorld.vue
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <!-- Select All records -->
    <input type="button" value="Select All users" @click="allRecords()">
    <br><br>

    <!-- Select record by ID -->
    <input type="text" placeholder="Enter adress ID" v-model="adressid">
    <input type="button" value="Select adress by ID" @click="recordByID()">

    <!-- List records -->
    <table border="1" width="80%" style="=border-collapse: collapse;">
      <tr>
        <th>AdressID</th>
        <th>AdressNr</th>
        <th>Name</th>
      </tr>

      <tr v-for="adresse in adressenliste" v-bind:key="adresse.ADRESSID">
        <td>{{ adresse.ADRESSID }}</td>
        <td>{{ adresse.ADRESSNR }}</td>
        <td>{{ adresse.NAME }}</td>

      </tr>
    </table>
  </div>
</template>


<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      adressenliste: [],
      adressid: 0
    }
  },
  methods:{
    allRecords: function () {
      this.axios.get("ajaxfile.php")
              .then(function (response) {
                this.adressenliste = response.data();  <<<<  response.data hat die Daten abgerufen, das JSON sehe ich im debugger.

              })
              .catch(function (error) {
                this.console.log(error.response);   <<<< ohne this.console gibt es bereits bei Starten ein Fehler.
              });
    },

    recordByID: function () {
      if(this.passid > 0){
        this.axios.get("ajaxfile.php",{
          params:{
            adressid: this.adressid
          }
        })

                .then(function (response) {
                  this.adressenliste = response.data;
                })
                .catch(function (error) {
                  this.console.log(error.response);
                });
      }
    }
  }
}
</script>

Hat jemand eine Idee?

 

[benneq]

Die Fehlermeldung sagt doch schon was los ist: response.data ist keine Funktion, aber du rufst es als Funktion (siehe: "()") auf.

 

[KatzOderKoder]

Bezüglich response.data hast du natürlich schon Recht. Das war ein Versuch weil weil die Tabelle nicht aufgebaut wird. Ich wollte über den Catch Block erfahren ob es weitere Probleme gibt. Doch das geht nicht.

Im Browser bekomme ich bei this.adressenliste = response.data;
TypError: Cannot not set property 'adressenliste'

Die API Afrage liefert ein JSON Object.
Die Variable adressenliste habe ich als Array angelegt adressenliste: [] und auch als String probiert adressenliste: "" Wie müsste ich bitte die Variable adressenliste typisieren damit sie das JSON aufnehmen kann?
Und was läuft beim .catch falsch?

ajaxfile.php

<?php

include "config.php";

$condition = "1";

if(isset($_GET["adressid"])){
    $condition = " ADRESSID=".$_GET["adressid"];
}

$userData = mysqli_query($con,"SELECT ADRESSID, ADRESSNR, NAME FROM mld_adressen WHERE".$condition);

$response = array();

while ($row=mysqli_fetch_assoc($userData)){
    $response[] = $row;
}

echo json_encode($response);
exit();

 

[Rayderick]

Durch den functions callback im then, verlierst du deinen scope und "this" wird leer sein, im then wie im catch fall.
Verschaff dir doch erstmal mit console.log(response) im then ohne das "this." davor klarheit wie deine response aufgebaut ist die du bekommst.

 

[Yuuri]

Das this in allRecords ist ein anderes this als im Callback. Willkommen bei JavaScript.

 

[TheCadillacMan]

Der Zugriff console.log() ist im aktuellen Standard-Template von Vue.js durch die ESLint-Konfiguration verboten.
Damit die funktioniert musst du in package.json die "no-console"-Regel deaktivieren:

"eslintConfig": {
    // ...
    "rules": {
      "no-console": 0
    },
    // ...
}

this.console gibt es bei dir überhaupt nicht, der Linter (ESLint) kann das aber nicht prüfen. Deshalb bekommst du erst zur Laufzeit einen Fehler.

 

[Bagbag]

Ich hab das hier mal zu async/await, arrow-functions und try/catch für dich umgeschrieben.

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      adressenliste: [],
      adressid: 0
    }
  },
  methods: {
    allRecords: async () => {
      try {
        const response = await this.axios.get('ajaxfile.php');
        this.adressenliste = response.data;
      }
      catch (error) {
        console.log(error.response);
      }
    },

    recordByID: async () => {
      if (this.passid == 0) {
        return;
      }

      const requestOptions = {
        params: {
          adressid: this.adressid
        }
      };

      try {
        const response = await this.axios.get('ajaxfile.php', requestOptions);
        this.adressenliste = response.data;
      }
      catch (error) {
        console.log(error.response);
      }
    }
  }
}

 

[KatzOderKoder]

Vielen herzlichen Dank Bagbag

Der Zugriff console.log() ist im aktuellen Standard-Template von Vue.js durch die ESLint-Konfiguration verboten.
Damit die funktioniert musst du in package.json die "no-console"-Regel deaktivieren:

"eslintConfig": {
    // ...
    "rules": {
      "no-console": 0
    },
    // ...
}

this.console gibt es bei dir überhaupt nicht, der Linter (ESLint) kann das aber nicht prüfen. Deshalb bekommst du erst zur Laufzeit einen Fehler.

Vielen herzlichen Dank, das hat funktioniert.

Ergänzung (28. Oktober 2019)

Auch Dir Bagbag,
ein herzliches Dankeschön. Es wird sicherlich funktionieren, aber ich habe noch weitere Fehler. Ich sehe schon das ist alles viel komplexer. Das gelernte aus den Büchern kann man nicht einfach so anwenden da die Beispiele einen einfacheren Weg gehen und nicht nach der Vue Projektvorlage arbeiten. Zumindest gehe ich davon aus dass die Vue Projektvorlage von PHPStorm so aufgebaut ist. :-(


DANKE an Alle natürlich!!!

 

[KatzOderKoder]

Hallo Zusammen,

laut Dokumentation von vue.axios muss axios so eingebunden werden:

import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

Hab ich eingebaut in main.js sieht jetzt so aus:

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

Vue.config.productionTip = false

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

Wenn ich den npm server beende und neu start und auf den Link http://localhost:8080 klicke, öffnet sich die Vue Hello World Seite im Browser. Versuche ich jetzt die Tabelle mittels axios abzurufen, kommt eine Fehlermeldung in der Browser Console:
[Vue warn]: Error in v-on handler (Promise/async): "TypeError: Cannot read property 'axios' of undefined"
fount in HelloWorld.vue ...

Also ist axios nicht richtig eingebunden. Muss ich die vue-axios.min.js auch noch einbinden?

<script src="../../node_modules/vue-axios/dist/vue-axios.min.js"></script>

 

[r15ch13]

Bezueglich des PHP Codeschnipsels werfe ich verspaetet noch die Themen SQL-Injection und PDO mit Prepared statements in den Raum.