Czym jest resolve / promise ?

Question

Hej

Mam taki kawałek kodu ale nie rozumiem za bardzo o co w nim chodzi

    return new Promise(resolve => {
      ApiService.post("login", credentials)
        .then(({ data }) => {
          context.commit(SET_AUTH, data);
          resolve(data);
        })
        .catch(({ response }) => {
          context.commit(SET_ERROR, response.data.errors);
        });
    });

Zrozumiałem to, że ApiService wysyła za pomocą post dane do logowania. Następnie loguje użytkownika. Nie rozumiem na jakie zasadzie działa promise i do czego służy resolve(data).

Jakby ktoś mi mógł wytłumaczyć, to byłby wdzięczny

Comments

to fragment reacta?

---

na to mi wygląda, a dobre pytanie bo też miewam z tym problemymy w reakcie  też takie coś jest w Angular.js

---

Przepraszam, zapomniałem doprecyzować. Jest to fragment Vuejs, a dokładniej system logowania z Metronic

---

Spoko to nie ma znaczenia czy react czy vue w tym przypadku.

Answer 1

https://www.youtube.com/watch?v=cpTfChthaS4

Comments

Dziękuje. W zasadzie to mogłem najpierw poszukać a potem pytać ^^

Answer 2

Promise jest obiektem, który przechowuje stan operacji asynchronicznej. Taka operacja może zakończyć się ewentualnym sukcesem (resolve) lub porażką (reject). Metoda resolve służy do rozwiązania Promisa (oznaczenia stanu tej operacji jako pomyślnie zakończona) z możliwością przekazania wartości, która będzie mogła zostać odczytana w callbacku przekazanym do metody then.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

W przypadku Twojego kodu, gdy metoda ApiService.post zakończy się sukcesem, to zwrócony przez nią Promise zostanie rozwiązany i do callbacka w metodzie then (linia 3) będzie przekazany obiekt z property data. Ten callback z kolei rozwiązuje Promise, który owija całe wywołanie do metody ApiService.post. Dzięki temu można podpiąć się pod ten zewnętrzny Promise i w callbacku otrzymać wartość data.

Comments

Dzięki za kompletną odpowiedź. Wiesz może jak podmienić to pod axios z response? Tzn nie wiem co zrobić z {data} ponieważ w tym miejscu powinno być response axiosa. Męczę się z tym od godziny i dalej nie ogarniam za bardzo

---

Doprecyzuj, co masz na myśli przez "podmianę to pod axios z response"? Response z axiosa ma formę obiektu, który posiada property data. https://github.com/axios/axios#response-schema

Więc jeśli metoda ApiService.post korzysta z axiosa, to przy rozpakowaniu .then(({ data })) pod zmienną data powinieneś mieć dane z responsa. Co teraz znajduje się w tej zmiennej?

---

Aktualnie dashboard korzysta z mockService i próbuję metodą prób i błędów przenieść na logowanie JWT. Po stronie Laravela udało mi się zrobić JWT generujące token a teraz próbuję zrobić axios.post'a który będzie wysyłał dane i odbierał token (Wszystko jest gotowe, tylko właśnie trzeba zrobić odbieranie i wysyłanie requestów). Aktualnie udało się zrobić to za pomocą Axios'a, ale chciałbym to zrobić tak jak jest w dashboard (Przy użyciu promise)

Mock service zwraca

__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
email: "admin@demo.com"
password: "demo"
token: "mgfi5juf74j"

 

---

 Aktualnie udało się zrobić to za pomocą Axios'a, ale chciałbym to zrobić tak jak jest w dashboard (Przy użyciu promise)

Biblioteka axios jest oparta na Promise, więc nie rozumiem problemu. ;)

Mock service zwraca

To jest zawartość rozpakowanej zmiennej data?

---

Więc tak:

To jest przygotowany kod przez Metronic który korzysta z mockServices

    return new Promise(resolve => {
      ApiService.post("login", credentials)
        .then(({ data }) => {
          context.commit(SET_AUTH, data);
          resolve(data);
        })
        .catch(({ response }) => {
            context.commit(SET_ERROR, response.data.errors);
          });
      });

console.log umieszczone przed resolve(data) zwraca:

__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
email: "admin@demo.com"
password: "demo"
token: "mgfi5juf74j"

A to jest kod który ja wydłubałem:

      axios.post('auth/login', credentials).then(response =>{
        let data = {
          email: response.data.email,
          password: response.data.password,
          token: response.data.token,
        }
        context.commit(SET_AUTH, data);
      }).catch(error =>{
        context.commit(SET_ERROR, error.response);
    });

Axios post loguje użytkownika bez problemu ale wydaje mi się, że to nie jest poprawnie napisany kod

---

Wywołanie ApiService.post("login", credentials) zastąpiłeś axios.post('auth/login', credentials) ?

Nie pokazałeś implementacji metody ApiService.post, więc nie wiadomo w jaki sposób tam jest wykonywany request ani, czy coś dzieje się oprócz tego. Jeśli masz service odpowiedzialny za komunikację HTTP, to jednak metody axios'owe bym trzymał tam, a na zewnątrz nadal używał ApiService.post - tym sposobem implementację możesz pod spodem zmieniać na dowolną, która zwraca Promisa, dopóki będą przyjmowane takie same argumenty. Zastąpienie wywołania "abstrakcyjnej" (z punktu widzenia wołania) metody ApiService.post bezpośrednim wywołaniem axios.post troszkę tę abstrakcję zaburza - ale to tylko taka luźna sugestia, bo nie wiem jak to wygląda pod spodem.