从Javascript调用REST端点

Question

我试图像这样从Javascript调用Spotify API：

function callAPI() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', 'https://api.spotify.com/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);
}

但是，尽管请求返回200，但xhttp.responseText为空。

我可以在浏览器中看到该请求返回了预期的结果，但是以某种方式我无法从Javascript中提取它：

我尝试使用Java调用REST端点（因为我对它更熟悉），并且有效：

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

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

        URL url = null;
        try {
            url = new URL("https://api.spotify.com/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();
        }
    }

}

我是Javascript新手，所以我做错了什么？ 在此先多谢！

Answer 1

我从您的原始帖子中了解到您对Java更加熟悉，因此在您的Javascript代码中， var response = JSON.parse(xhttp.responseText); 您期望响应文本可以解析。 在Java中，代码有效是因为发送了请求，并且阻塞了其余操作，直到出现响应为止。 Javascript不遵循相同的范例，它不等待响应，并尝试在从请求返回任何内容之前解析xhttp.responseText 。

文档解释了此XMLHttpRequest.responseText

在处理异步请求时，responseText的值始终具有从服务器接收到的当前内容，即使由于尚未完全接收到数据而导致内容不完整也是如此。

当readyState的值变为XMLHttpRequest.DONE（4），状态变为200（“确定”）时，您便知道已接收到全部内容。

因为Javascript不会等待响应，所以您的代码必须等待事件以发出响应。 这是其他发布者所指的异步行为。 此处的文档描述了如何创建将侦听响应事件的代码。 使用您的代码， Boo Berr'ita提交的答案就是一个很好的例子。

Answer 2

您忘记了onreadystatechange回调函数：

只需将结果包装在此函数中：

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

Answer 3

您可以在“加载”上添加事件处理程序：

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

function callAPI() {
    var xhttp = new XMLHttpRequest();
    xhttp.open('GET', 'https://api.spotify.com/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();
}

Answer 4

非常感谢大家的答复，也感谢您让我想起了Java异步性，这是我完全忘记的。 我设法通过使用axios库使此工作得以实现，该库与我打算使用的Vue.js集成得很好。 这是为我工作的解决方案：

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