Problem z axios

0

Witajcie Mam taki problem żę jak w wpisuje w adreses przeglądarki api wyświetla się poprawnie lecz kod js zwraca mi catch'u TypeError: Cannot set property 'zdjecia' of undefined a w consoli galeria:1 Failed to load resource: the server responded with a status of 404 (Not Found). kod js

getphoto(){
            axios.get("http://192.168.55.106/api/v1/photo.php?comand=allphoto").then(function(response){
                if(response.data.error){
                    this.errors=true;
                }
                else{
                    this.zdjecias=response.data.zdjecia;
                }

            }).catch(function(e){
                this.err=e;
                this.errors=true;
            })
            
        }
    },

a w zalączniku zrzut api

0

Wciśnij F12 w chromie, przejdź do zakładki Network, wykonaj metodę getphoto() i sprawdź, co wyświetla się w headers dla tego zapytania do api

0

tylko że pisze w vue i jak w konsoli wpisuje this.getphoto() to nic się nie dzieje tzn nw jak się dostać do funkcji zamkniętej w methods w komponencie vue.(dopiero się ucze webdeva)

0

Jeżeli zdjęcia pobierają się przy wczytywaniu strony, to odpal zakładkę network i odśwież stronę

0

taki jest heder w załączniku print screen

1

this.zdjecias - jak myślisz, czym jest this w tym kontekście oraz dlaczego?

0

this żeby się odwoływało do zmiennej zwracanej w obiekcie funkcji data (vue ma taką strukture)

1

Odpal sobie w takim razie console.log(this) w środku tej funkcji - zaskoczysz się :-)

A tak na poważnie: poczytaj sobie o różnicy między klasycznymi funkcjami (tworzonymi za pomocą słówka kluczowego function), a tzw. arrow functions.

Nie stanowi to jednak głównego problemu (jeszcze) - zrób console.log(response); w tej funkcji wewnątrz; prawdopodobnie nie zwracasz prawidłowych danych z PHPa (np. nie wysyłasz Content-Type).

0

Console.log(response) zwraca title a aktualny kod to

mport VueGallery from 'vue-gallery';
import axios from 'axios';
export default {
    components:{
        'gallery': VueGallery,
    },
    data(){
        return{
            index: null,
            errors:'false',
            err:'',
            photos: [],
        }
    },
    created(){
        this.getphoto();
    },
    methods: {
        getphoto(){
            axios.get("http://192.168.55.106/api/v1/photo.php?comand=allphoto").then(function(response){
                if(response.data.error){
                    this.errors=true;
                }
                else{
                    console.log(response);
                    this.photos=response.data.zdjecia;
                    
                }

            }).catch(e=>{
                this.err=e;
                this.errors=true;
            })
            
        }
    },
    
}
0

Hmm, teraz nie dostrzegam błędu w konsoli - czyżby zaczęło działać? :-P

0

nie nadal nie działa (walczę z tym 2 dzień)title

0

.then((response) => {

0

bez zmian ciągle ten sam błąd wyświetla catch

import VueGallery from 'vue-gallery';
import axios from 'axios';
export default {
    components:{
        'gallery': VueGallery,
    },
    data(){
        return{
            index: null,
            errors:'false',
            err:'',
            photos: [],
        }
    },
    created(){
        this.getphoto();
    },
    methods: {
        getphoto(){
            console.log(this);
            axios.get("http://192.168.55.106/api/v1/photo.php?comand=allphoto").then((response)=>{
                if(response.data.error){
                    this.errors=true;
                }
                else{
                    console.log(response);
                    this.photos=response.data.zdjecia;
                    
                }

            }).catch(e=>{
                this.err=e;
                this.errors=true;
            })
            
        }
    },
    
}

a i console.log(this) zwraca photos title

1

console.log(this) zwraca photo

Nie bez powodu wspomniałem o tym, abyś umieścił console.log(this); wewnątrz tej funkcji przekazywanej do .then() - w obecnej wersji zadziała to już prawdopodobnie poprawnie (dzięki funkcji strzałeczkowej, przekonamy się za moment), ale wróć sobie do .then(function(...) { i sprawdź, co takiego pokaże Ci console.log(this); :-)

ciągle ten sam błąd wyświetla catch

Coś tutaj mi bardzo nie pasuje - zrób console.log(response, this);.

0
Patryk27 napisał(a):

console.log(this) zwraca photo

Nie bez powodu wspomniałem o tym, abyś umieścił console.log(this); wewnątrz tej funkcji przekazywanej do .then() - w obecnej wersji zadziała to już prawdopodobnie poprawnie (dzięki funkcji strzałeczkowej, przekonamy się za moment), ale wróć sobie do .then(function(...) { i sprawdź, co takiego pokaże Ci console.log(this); :-)

ciągle ten sam błąd wyświetla catch

Coś tutaj mi bardzo nie pasuje - zrób console.log(response, this);.

Dzięki błąd znikł

0

tylko że pisze w vue

Najpierw warto poznać podstawy JavaScriptu, zanim człowiek sięgnie po jakiś większy framework / bibliotekę :)

nie nadal nie działa (walczę z tym 2 dzień)

Bo bez znajomości podstaw języka i typowych pułapek (działanie this) w rezultacie tracisz tylko czas na szukanie błędów, które byłyby oczywiste.

Dzięki błąd znikł

Czyli wszystko działa? A skąd to 404 się pojawiało? (Bo jak 404 to raczej kwestia tego, że czegoś na serwerze nie znalazł, albo że złe zapytanie robisz, więc tak jakby osobny błąd niż tamto z this).

0

Dlaczego Axios, a nie fetch?

1 użytkowników online, w tym zalogowanych: 0, gości: 1