用javascript返回HTTP响应

Question

I am using XMLHttpRequest in javascript to make HTTP request to a local server. This is the code I am using.

var xhr = new XMLHttpRequest();
xhr.open("POST", "//localhost:5000/translate", true); 
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({"sentence":str}));


xhr.onreadystatechange = processRequest;

function processRequest(e)
{
  if (xhr.readyState == 4)
  {
    console.log('trans_res set');
    trans_res = xhr.responseText; // here trans_res is a global variable
    return String(xhr.responseText);
  }
}

I want this function to return the responseText so that I can use it some where else.

For that I tried two methods, 1) I tried returning the response and printing the response in console

var temp = function(string)
console.log(temp)

but the temp variable is coming as undefined in console, mostly I think it is because before it comes to console.log it is not yet set (response not returned)

2) I put a global variable (trans_res) and set it in the function and print it

var temp = function(string)
console.log(trans_res)

however it is also coming as undefined.

How can i ensure that I return the response, It's all right if i need to halt the execution somewhere in between, but I want a valid response.

Answer 1

You need a new screwdriver. You send a request to amazon with your postbox (trans_res) where to send to. Amazon is working asynchron to you. If you look some minutes later in your postbox, you'll not find a screwdriver. An hour later, too. The problem with a "postbox" is, you don't know the time to look at.

You have to to do the work (showing, changing, informing), when readyState gets 4.

Answer 2

I think the answer by @Holger is somewhat correct. You are checking for a return value before its actually generated by function. Sometimes there are long processes which take time to generate the value. Either you should focus on making the function faster or you should keep checking the returned value.

Use if-else statements to check the value. When its not undefined, log it. You can use a loading wheel animation on users' side if it is related to UX.