Zwrócenie wartości z API do zmiennej (fetch)

Question

Robię sobie apkę z API po stronie Laravela, wydawało się że pójdzie jak po maśle, obieram już dane z API ale... nic poza odbiorem nie udaje mi się uzyskać. Tutaj zapodam star wars api:

let postac;
       fetch('https://swapi.co/api/people/1')
      .then(function(response) {
        return response.json();
    }).then(function(resp){
            console.log(resp.name) //Luke Skywalker;
            postac = resp.name;
    })
console.log(postac) //undefined;

Jak mogę tą wartość odpowiedzi zapisać do zmiennej do wykorzystania w aplikacji?

EDIT chyba skumałem, chodzi o to że ten promise zachodzi asynchronicznie? Możecie mi to przybliżyć własnymi słowami, dalej myślę jak tą zmienną przekazać do całego kodu

Comments

Pokaż resztę kodu - gdzie chcesz tą zmienną wykorzystać?

---

To ma aż takie znaczenie?  Po prostu chciałbym żeby ona się zapisała do zmiennej globalnej którą definiuję na początku.Miałem taki absurdalny sposób - setTimeout, heh

Da się to zapytanie wykonać synchronicznie, albo inaczej - generować zmienną globalną postac po tym jak pobiorą się dane z api

Jak korzystam z Vue.js to śmiga, ale trochę na zasadzie działa nie ruszaj. Może znów się dowiem coś ciekawego z js'a jeśli bylibyście uprzejmi coś naprowadzić4

P.S sorry, jednak nie śmiga NIE-KUMAM

<div id="app">{{dupa}}</div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

<script>
var App = new Vue({
    el:"#app",
    data:{
        dupa:'fsdfdas'
    },
    watch:{

    },
    methods:{
        getSome:function(){
            fetch('http://localhost:8000/api/show/769')
              .then(function(response) {

                return response.json();
            }).then(function(resp){
                console.log(this.dupa); //undefined;
                console.log(resp.answer); //pokazuje odpowiednią odpowiedź z api
                     this.dupa = resp.answer; // nie zadziała do dupa jest undefined
            })
        },
        dupaa(){
            console.log(this.dupa) //fsdfdsas; tutaj działa
        }
    }
});
App.getSome(); //połączy się z api ale zadziała tylko wewnątrz promisa, nie zapisze się nic do zmiennej w data {}

 

---

Sorry, nie znam (jeszcze) Vue, więc nie wiem jak działa od środka. Zobacz w konsoli, albo w debuggerze, co siedzi w obiekcie App, czy i gdzie znajduje się tam obiekt data z polem dupa - wtedy będziesz wiedział, jak się do niego odnieść. W 21 linijce loguje undefined, bo zapewne this wskazuje na obiekt window - jeśli chcesz odnieść się do this parenta metody getSome, to użyj Arrow function w 20 linijce, albo przypisz this do zmiennej (o nazwie np. self) na początku metody getSome i w konsoli wypisz self.dupa. Ewentualnie zbinduj sobie tego callbacka ("najbrzydsza" opcja).

---

A nie możesz mu tych danych wstrzyknąć z controlera? Po co wydłużać jeszcze czas ładowania? Bo jak zgaduje używasz laverela.

Psss... zalacam przejście na vue-loadera z webpackiem bo się zajedziesz w zależnościach.

Answer 1

Po prostu chciałbym żeby ona się zapisała do zmiennej globalnej którą definiuję na początku

Ona się zapisuje do zmiennej globalnej. Z tym, że console.log wykonuje się zanim Promise zostanie rozwiązany. Polecam obejrzeć tą prezentację o asynchroniczności i tę szerzej obrazującą kolejkowanie. A dla lepszego poznania tematu przeczytaj tą książkę - jest tego sporo, ale naprawdę warto.

Da się to zapytanie wykonać synchronicznie

Tak, ale nie jest to zalecana praktyka.

, albo inaczej - generować zmienną globalną postac po tym jak pobiorą się dane z api

To nie zmieni sytuacji, bo czy zadeklarujesz zmienną globalną na początku, czy w callbacku do Promise - i tak wartość będziesz mieć dopiero po zwrotce danych.

Wykorzystaj dane otrzymane z Promise właśnie tam, gdzie przypisujesz je do zmiennej, albo przekaż je jako parametr do innej funkcji, która te dane obrobi.