"The process of logging in to Facebook on Ionic app speeds up by bypassing

I'm facing a minor issue with Facebook login in Ionic. I've tried using Async - Await and various other methods to make it wait for the response, but nothing seems to work. The login function is working fine, but it's not pausing for me to process the response.

Any suggestions on how I can add a delay here? I understand that this might be considered callback hell, but all I need is to fetch some basic information.

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';

 constructor(public navCtrl: NavController,
          public navParams: NavParams,
          public fb: Facebook) {

            doFacebookLogin(){
                let env = this;
                this.fb.login(permissions)
                  .then(function(response){

                        env.fb.api("/me?fields=name", params)
                          .then(function(user) {
                            //
                            // process user data here
                            //
                          })

                  }, function(error){
                    console.log(error);
                  });  
              }

Thanks! Phil

Answer №1

It is essential to utilize the fat arrow function for improved code readability and to avoid callback hell, as demonstrated below.

performLogin(){
            let self = this;
            this.socialPlatform.login(authPermissions)
              .then((response)=>{

                    self.socialPlatform.api("/user/profile", requestParams)
                      .then((userData)=> {
                          // process user data here
                       })  
              }, (error)=>{
                console.log(error);
              });
          } 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"What could be causing my React Native app to build without any issues even though the TypeScript compiler is throwing

Recently, I decided to explore TypeScript in combination with Expo. I took the time to set up linter and formatter integrations like typescript-eslint to help me catch errors while coding. Periodically, I run npx tsc to ensure my code compiles correctly an ...

Exploring Angular 4: Understanding the nuances between search and params when using http get with parameters

When working with Angular 4's HTTP package ('@angular/http'), there is an option to pass a URLSearchParams object in the get request. What sets apart using search versus params when assigning the parameters object in the request method? For ...

Using RXJS within the pipe operator to make numerous HTTP requests

In my project, I have set up 3 API endpoints - candidates, vacancies, and interviews. { "candidates": [ { "id": 1, "name": "Serj" }, { "id": 2, "name": "Alex" } ], " ...

declare wrong TypeScript type in external library

I am currently using winston 3.0 in combination with the @types/winston types. Unfortunately, it seems that these types are not completely compatible, leading to an error in the types that I am unsure how to rectify. Below is the code snippet in question: ...

Search for specific item within an array of objects

Working on an Angular project, I am attempting to remove an object from an array. To achieve this, I need to filter the array and then update the storage (specifically, capacitor/storage) with the modified array. Here is my function: deleteArticle(id: str ...

It seems like the recent upgrade to yarn 2 has caused issues with typescript types, whereas the installation of the same project with yarn 1 was

Recently, I've been attempting to update a typescript monorepo to utilize yarn 2, but I've encountered an issue where typescript is struggling to recognize certain react props. This functionality was working fine in yarn 1.x, leading me to believ ...

Luxon DateTime TS Error: The 'DateTime' namespace cannot be used as a type in this context

I have encountered an issue while trying to set the type of a luxon 'DateTime' object in TypeScript. The error message DateTime: Cannot use namespace 'DateTime' as a type appears every time I attempt to assign DateTime as a type. Below ...

I'm perplexed as to why my array remains empty despite assigning a value to it in my controller. (Just to clarify, I am working with AngularJS, not Angular)

I spent a whole day debugging this issue without any luck. Issue: this.gridOptions.data = this.allTemplatesFromClassificationRepo ; **this.allTemplatesFromClassificationRepo ** remains an empty array. I have already called the activate() function to assig ...

Challenge encountered when setting new values to an object depending on its existing values

I am facing an issue with a data object that stores values and their previous values. The keys for the previous values are suffixed with ":previous" e.g. foo and foo:previous. However, I encountered a type error when trying to assign values to the previous ...

Utilizing BehaviorSubject to dynamically display components based on conditions

I have a basic Service that looks like this: import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs'; @Injectable() export class HighlightsService { private _highlightedTab: string = ''; highli ...

Exploring Improved Methods for Implementing Nested Subscriptions in Typescript

In my Typescript code for Angular 11, I am working with two observables. The first one, getSelfPurchases(), returns data objects containing information like id, user_id, script_id, and pp_id. On the other hand, the second observable, getScriptDetails(32), ...

I am able to successfully implement CORS in my .Net 6 and Angular application on my local machine, but unfortunately, the functionality

After struggling for 2 days to make CORS work with my Angular frontend and .Net Core backend, I finally cracked... I set up a basic Angular application with a simple "get" request hitting my backend API. In the backend API, I created a straightforward pro ...

Display a second dialog to the left of the first dialog at the same level using Angular Material

Scenario: I have a customer record and would like to show additional read-only information in a separate dialog. This requires some selections. In Angular Material, I already have one modal dialog open and find it relatively easy to open a second one. Che ...

Encountered an issue in React Native/Typescript where the module 'react-native' does not export the member 'Pressable'.ts(2305)

I have been struggling to get rid of this persistent error message and I'm not sure where it originates from. Pressable is functioning correctly, but for some reason, there is something in my code that doesn't recognize that. How can I identify t ...

Navigating through documents in Jhipster (Angular + Springboot)

After successfully developing a controller and service in the backend using Spring, I have managed to implement file upload functionality on the server. To determine the upload location, I utilized System.getProperty("user.dir") to retrieve the current pr ...

The specified '<<custom component name>>' argument does not match the 'Type<<custom component name>>' parameter

I'm currently facing an error that indicates a type parameters mismatch, but I can't pinpoint where in the process it's happening. Argument of type 'ModalUserInfoComponent' is not assignable to parameter of type 'Type<Mo ...

Creating a delayed queue using RxJS Observables can provide a powerful and

Imagine we have a line of true or false statements (we're not using a complicated data structure because we only want to store the order). Statements can be added to the line at any time and pace. An observer will remove items from this line and make ...

Steps to modify the CSS of a custom component in Angular 8

I have been attempting to override the css of a custom component selector, however, my attempts have been unsuccessful. I have tried using ":ng-deep" but it hasn't worked. How can I go about finding a solution for this issue? app.component.html: < ...

Is it Feasible to Use Component Interface in Angular 5/6?

My main goal is to create a component that can wrap around MatStepper and accept 2..n steps, each with their own components. In other languages, I would typically create an interface with common behavior, implement it in different components, and then use ...

Creating a dynamic table in HTML and Angular is a simple process that involves utilizing the

How can I create an HTML table dynamically without knowing the template of each row in advance? Sometimes it may have 2 columns, sometimes 4... I am looking for something like this: <div> <h1>Angular HTML Table Example</h1> < ...