Calling REST endpoint from Javascript - Stack Overflow

admin管理员组

文章数量:1303389

I am trying to call Spotify API from Javascript like this:

function callAPI() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', ';type=track');
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.setRequestHeader('Authorization', 'Bearer <MY_ACCESS_TOKEN>');
    xhttp.send();
    var response = JSON.parse(xhttp.responseText);
}

However, xhttp.responseText is empty, although the request returns 200.

I can see in the browser that the request is returning the expected result but somehow I cannot extract it from the Javascript:

I tried calling the REST endpoint using Java (since I am more familiar with it) and that worked:

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.HttpURLConnection;
import java.URL;

public class Test {
    public static void main(String[] args) {
        System.out.println("blah");

        URL url = null;
        try {
            url = new URL(";type=track");
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setRequestMethod("GET");
            connection.setRequestProperty("Authorization", "Bearer <MY_ACCESS_TOKEN>");
            String responseMessage = connection.getResponseMessage();
            BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            StringBuffer content = new StringBuffer();

            try (reader) {
                String line;

                while ((line = reader.readLine()) != null) {
                    content.append(line);
                }
            } finally {
                reader.close();
            }
            System.out.println("Response: " + responseMessage);
            System.out.println("Content: " + content.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

I am a Javascript newbie, so what am I doing wrong? Thanks a lot in advance!

I am trying to call Spotify API from Javascript like this:

function callAPI() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', 'https://api.spotify./v1/search?q=Muse&type=track');
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.setRequestHeader('Authorization', 'Bearer <MY_ACCESS_TOKEN>');
    xhttp.send();
    var response = JSON.parse(xhttp.responseText);
}

However, xhttp.responseText is empty, although the request returns 200.

I can see in the browser that the request is returning the expected result but somehow I cannot extract it from the Javascript:

I tried calling the REST endpoint using Java (since I am more familiar with it) and that worked:

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.HttpURLConnection;
import java.URL;

public class Test {
    public static void main(String[] args) {
        System.out.println("blah");

        URL url = null;
        try {
            url = new URL("https://api.spotify./v1/search?q=Muse&type=track");
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setRequestMethod("GET");
            connection.setRequestProperty("Authorization", "Bearer <MY_ACCESS_TOKEN>");
            String responseMessage = connection.getResponseMessage();
            BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            StringBuffer content = new StringBuffer();

            try (reader) {
                String line;

                while ((line = reader.readLine()) != null) {
                    content.append(line);
                }
            } finally {
                reader.close();
            }
            System.out.println("Response: " + responseMessage);
            System.out.println("Content: " + content.toString());
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

}

I am a Javascript newbie, so what am I doing wrong? Thanks a lot in advance!

• javascript
• rest

Share Improve this question Follow asked Jun 17, 2018 at 14:05 Lucia PasarinLucia Pasarin 2,30811 gold badge2222 silver badges3939 bronze badges 5

• 2 its an async process. hook into onload and then read responseText – Daniel A. White Commented Jun 17, 2018 at 14:07
• Hi @lucia-pasarin, do NOT use XMLHttpRequest, I'd remend you use a library such as jquery to do ajax requests. See api.jquery./jquery.get – Rui Jarimba Commented Jun 17, 2018 at 14:10
• Check also api.jquery./jquery.getjson – Rui Jarimba Commented Jun 17, 2018 at 14:11
• @RuiJarimba Thanks for your suggestion. Could you please explain the advantage of using jQuery? – Lucia Pasarin Commented Jun 17, 2018 at 23:06
• 1 @lucia-pasarin because it will make your life much easier. One of the biggest advantages over plain javascript is cross-browser patibility. Check stackoverflow./questions/67045/… and codementor.io/brainyfarm/… – Rui Jarimba Commented Jun 18, 2018 at 8:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I take it from your original post, that you're more familiar with Java, and so in your Javascript code, var response = JSON.parse(xhttp.responseText); your expecting the response text to be available to parse. In Java, the code works because the request is sent and the remaining operations are blocked until there is a response. Javascript doesn't follow the same paradigm, it doesn't wait for a response, and attempts to parse xhttp.responseText before anything has been returned from the request.

The documentation explains this XMLHttpRequest.responseText

While handling an asynchronous request, the value of responseText always has the current content received from the server, even if it's inplete because the data has not been pletely received yet.

You know the entire content has been received when the value of readyState bees XMLHttpRequest.DONE (4), and status bees 200 ("OK").

Because Javascript will doesn't wait for the response, your code must wait for an event to signal that the response has been made. This is the asynchronous behavior that the others posters are referring to. The documentation here describes how to create the code that will listen for the response event. The answer submitted by Boo Berr'ita is a good example, using your code.

you forget the onreadystatechange callback function :

just wrap the result inside this fonction :

  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(this.responseText);
    }
  };

You can add event handler on "load":

function onXHRLoad() {
  console.log(this.responseText);
}

function callAPI() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', 'https://api.spotify./v1/search?q=Muse&type=track');
    xhttp.setRequestHeader('Content-Type', 'application/json');
    xhttp.setRequestHeader('Authorization', 'Bearer <MY_ACCESS_TOKEN>');
    xhttp.addEventListener('load', onXHRLoad);
    xhttp.send();
}

Thanks a lot everybody for your replies and thanks for reminding me of asynchronicity in Javascript, which I had totally forgotten about. I managed to make this work by using axios library, which I read integrates nicely with Vue.js, which I am intending to use. Here is the solution that worked for me:

<script>
import axios from "axios";
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: ''
    }
  },
  mounted() {
    axios({method: "GET", "url": "https://api.spotify./v1/search?q=Muse&type=track"}).then(result => {
      this.msg = result.data.tracks.items[0].name
  }, error => {
    console.error(error);
  });
  }
}
</script>

本文标签： Calling REST endpoint from JavascriptStack Overflow