AngularJS delayed HTTP POST to PHP

Question

I'm using the http service in AngularJS to make requests to my PHP API. It's a Phonegap iOS app, using AngularJS as the main framework.

In one call, I'm using the Facebook Javascript API to get the friends list of a user, encode that and send it to my API, match the emails to a list of our app users, then send the data back to the app.

I do exactly the same thing with the contacts from the phone, which I access using Phonegap.

Using console.log() I've confirmed that loading the contacts and facebook friends data from the device take less than a second.

The problem is mapping the Facebook friends list via the API takes about 20 seconds, but contacts only takes about 2 seconds.

I've manually forced the facebook list to be empty, var friends = [], and the process is nearly instant, but if I send 1 or 300 facebook contacts it gets really slow.

I've check the code on the live server by processing it with hard coded data and it takes about 0.01 seconds (so no HTTP POST, just the php logic).

I've also placed console.log() commands before the http.post() and during the success function:

console.log('http.post started');

$http.post(
    $rootScope.api_url + '/friends/map/',
    {values: hashes.values},
).success(function(data,status,headers,config){

    console.log('http.post finished');

    // process data

}).error(function(data,status,headers,config){
    // log error
});

And in addition to that used PHP error_log to tell me when the start of the PHP processing occurs, and just before the result is returned:

<?php
// includes
require_once("../../../configs/config.".get_current_user().".php");

function process_request() {

    error_log('started processing');

    // decode POST data, work out API method etc

    $return_data = $caseObject->process_data( $method, $arr_rest_data, $arr_req_data, $extra_data );

    error_log('data processed');

    return $return_data;

}

echo GibberishAES::enc( json_encode( process_request() ), IOS_API_PASSPHRASE );

?>

So that gives me a log before the Javascript sends the data, before and after the PHP processes it and after the Javascript receives a response.

Watching the logs get output, the 20s delay is between the following:

console.log('http.post started');
error_log('started processing');

So the delay seems to be in the upload. No data has been AES decoded by that point, and I've checked and the facebook data is an encoded string about 17k characters long, and the contacts data is 22k characters long. So it's not the size of the post, at least I don't think.

To summarise, I've got an http.post request in AngualrJS that is taking about 20s, very similar to another request that takes around 2s, the PHP code itself executes in under 1 second, and the delay seems to be between the start of the javascript http.post call and the beginning of the php processing code.

Any one know how I can work out what is causing the delay? Where should I be looking to narrow this down?

Answer 1

For anyone landing here with a similar issue:

The delay seems to be related with $http's request pre-processing and internal handling.
Using "plain old" XHR (eliminating $http) could speed things up considerably (at the cost of lost functionality and Angular-integration, of course).