CODEWITHSUNDEEP
typescriptionic-frameworkpromise
user3001046
user3001046

Reputation: 245

ionic 3 promise not working

i tried to use ionic with my new application. But i have some issue when i user 'promise' package

login.ts

var isAuthenticated = this.auth.login(form.value);
    console.log(isAuthenticated)

auth.ts

var AuthApiPromise = new Promise((resolve, reject) => {
      this.http.post(this.baseUrl, data, options)
      .toPromise()
      .then((response) =>
      {
        console.log('API Response : ', response.json());
        resolve(response.json());
      })
      .catch((error) =>
      {
        console.error('API Error : ', error.status);
        console.error('API Error : ', JSON.stringify(error));
        reject(error.json());
      });
    });

    return AuthApiPromise;

Output

enter image description here if i'm understand this package correct, second highlight need to be first. but why, please help.

Upvotes: 0

Views: 2402

Answers (2)

Zrelli Majdi
Zrelli Majdi

Reputation: 1260

Change all "response.json()" to "JSON.parse(response)". this a bug from angular 5 httpClient.

Upvotes: 0

Greg Rozmarynowycz
Greg Rozmarynowycz

Reputation: 2085

Certain operations, like AJAX requests, are asynchronous, meaning they do not occur immediately; they resolve eventually. Promises are constructs used to simplify complex asynchronous code. You can read about promises on MDN, which I would strongly encourage. async and await are ES6 syntax that can make promise-based code easier to read (if you understand both the syntax and promises).

In your particular code: 

var isAuthenticated = this.auth.login(form.value);
console.log(isAuthenticated); // this code is executing immediately

The first line is initiating an asynchronous operation that will eventually complete. isAuthenticated does not contain your authentication response, but a promise that is a handle to the resolved value. The second line is immediately executing before your auth operation completes, because JavaScript is non-blocking.

this.auth.login(form.value).then((isAuthenticated) => {
  console.log(isAuthenticated); // this will print after auth completes
});

Note if you need another function to execute, you need to chain it to the login promise:

this.auth.login(form.value).then((isAuthenticated) => {
  console.log(isAuthenticated); // this will print after auth completes
}).then(() => doSomethingElse());

Otherwise it will execute incorrectly like your console statement.

Your authentication method does not need to wrap the HTTP request in a promise constructor; it already returns a promise, via the toPromise method.

// return AuthApiPromise
return this.http.post(this.baseUrl, data, options)
  .toPromise()
  .then((response) => {
    console.log('API Response : ', response.json());
    return response.json();
  })
  .catch((error) => {
    console.error('API Error : ', error.status);
    console.error('API Error : ', JSON.stringify(error));
    return false; // authentication failed
  });

Upvotes: 1

Related Questions