Making sure an asyncronous GET/POST request has completed before continuing

Question

Hey guys ive been trying to solve this issue for the last few hours and decided id chuck it up here before i got to sleep, anyway the issue is that i need to make sure that the GET/POST request is 100% processed before continuing though the code, i hackly solved this with a timer from the firefox addon sdk but because this is java script it locks down the ui, so i have been searching for a solution and i stumbled across a potential solution by Felix Kling, "How do I return the response from an asynchronous call?". though i tried it with no success so i was wondering if someone can show me what ive done wrong or if i cant even use this solution for what i want done.

download_status(download_database());

function download_status(downloadStatus){
  if(downloadStatus==0){
    console.log(regexArray.length);
  }
  else{
    console.log("oh no");
  }
}

function download_database(){
  var downloadDone = 0;
  var requestDB = request.Request({
    url: "http://phyzical.pythonanywhere.com/download_db/",
    onComplete: function(response){
      console.log(response.statusText);
      if(response.json == null){
        console.log("cannot retreive json properly.")
      }
      else{
        var dbInfoLength = response.json.length;
        var idNumber = 0;
        for(var x=0;x<dbInfoLength;x++){ 
          try{
            var patt1=new RegExp(response.json[x].regex);
            idArray[idNumber] = response.json[x].id;
            regexArray[idNumber] = response.json[x].regex;
            incorrectMessageArray[idNumber] = response.json[x].incorrect_information;
            correctMessageArray[idNumber] = response.json[x].correct_information;
            idNumber++;           
          }
          catch(e){
            console.log("The annotation with the id: \""+ response.json[x].id+" " + e.message + "\" is wrong.");
          }
        }
        downloadDone = 0;
      }
    },
  }).get();
  return downloadDone;
}

sadly the regexArray.length logs "0" followed by the " OK" from the GET and then one of the catches fires so i know information is being stored into the arrays simply that the same issue i started with is still present.

any help would be appreciated.

the post you linked there - explains it everything very clearly. You need to use callback. — webduvet, Nov 20 '13 at 17:07

score 4 · Answer 1 · answered Nov 20 '13 at 17:05

4

If you need your response back before continuing, you really have two options: One is to pass the response into a callback in the AJAX response handler. The callback would be the entry point for the application to continue once the response has been received.

The other option would be to use a synchronous XHR request. The disadvantage to this approach, however, would be that your UI will become locked until the request can finish.

Cheers

answered Nov 20 '13 at 17:05

Zhube

504
2
6

this is also a valid answer, i ended up resolving my CORS issues so ajax calls could happen, see millie's answer for what i ended up using. – phyzical Nov 22 '13 at 03:08

score 1 · Answer 2 · answered Nov 20 '13 at 18:36

1

The promise module of the Addon SDK allows you to do what you want with elegance.

answered Nov 20 '13 at 18:36

paa

5,048
1
18
22

mirichan · Accepted Answer · 2013-11-21T13:36:37.707

I haven't implemented any of your logic, but I have rewritten your request code (since that's what you were having trouble with) to use jQuery's AJAX method instead of Firefox's request.

<h1>JSON Data Fetch Test</h1>
<div id="data"></div>

<script src="jquery-2.0.3.min.js"></script>
<script>
var dataBlock = document.getElementById("data");

function GetData()
{
    try
    {
        $.ajax({
            url: "http://phyzical.pythonanywhere.com/download_db/",
            crossDomain: true,
            dataType: 'text',
            context: document.body,
            error: reportError
        }).done(processResponse);
    }
    catch(e)
    {
        dataBlock.textContent = "Request Error: " + e.message;
    }
}

function reportError()
{
    dataBlock.textContent = "Some kind of problem...";
}

function processResponse(data) 
{
    dataBlock.textContent = data;
    var obj = JSON.parse(data);
    /*Do all the things you need to do with your data here.*/
}

dataBlock.textContent = "Fetching data...";
GetData();
</script>

score 0 · Answer 4 · answered Nov 20 '13 at 17:09

0

I can't answer much of code at the moment, but when I face this type of problem, I usually end up calling the "next" function (in your case download_status()) inside the onComplete of the Get, either hardcoded or as a callback. That will make sure it's called after it's finished.

answered Nov 20 '13 at 17:09

FercoCQ

139
3
14

only issue with this solution is the same problem still exists sadly, because the rest of the program NEEDS the database information to do the next line of code. thanks for trying. – phyzical Nov 21 '13 at 00:56

Making sure an asyncronous GET/POST request has completed before continuing

4 Answers4