代码之家 › 专栏 › 技术社区 › Lucia Pasarin

从javascript调用REST端点

rest javascript

Lucia Pasarin · 技术社区 · 7 年前

我正试图从javascript调用spotify api,如下所示:

函数callapi()。{
var xhttp=new xmlhttprequest();
open('get','https://api.spotify.com/v1/search?q=muse&type=track');
xhtp.setrequestheader('content-type','application/json');
xhtp.setrequestheader('授权','承载者<我的访问标记'gt;');
xhtp.send();
var response=json.parse(xhtp.responsetext);
}
但是,xhtp.responseTextis empty,though the request returns 200.


我可以在浏览器中看到请求返回了预期的结果,但不知何故我无法从javascript中提取它:


我尝试用Java调用REST端点(因为我更熟悉它),并且工作了:

import java.io.bufferedreader;
导入java.io.ioexception;
导入java.io.inputstreamreader;
导入java.net.httpurlConnection;
导入java.net.url;

公共类测试{
公共静态void main(string[]args){
system.out.println(“blah”);

url url=null;
试试看{
url=new url(“https://api.spotify.com/v1/search”?Q=muse&type=track”);
httpurlConnection连接=(httpurlConnection)url.openConnection();
connection.setrequestmethod(“get”);
connection.setRequestProperty(“授权”,“承载者”<我的“访问令牌”>“);
string responseMessage=connection.getResponseMessage();
bufferedreader reader=new bufferedreader(new inputstreamreader(connection.getinputstream());
StringBuffer内容=new StringBuffer();

尝试(读卡器){
串线;

同时((line=reader.readline())!=空){
内容.追加(行);
}
}最后{
reader.close();
}
system.out.println(“响应:”+responseMessage);
system.out.println(“内容:”+content.toString());
}捕获(IOException E){
e.printstacktrace();
}
}
}

我是一个javascript新手,那我做错了什么?提前多谢!

然而,xhttp.responseText为空,尽管请求返回200。

我可以在浏览器中看到请求返回了预期的结果,但不知何故我无法从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新手,那我做错了什么?提前多谢!

4 回复 | 直到 7 年前

D0ubleGunz 7 年前

我从你原来的帖子中了解到,你对Java更熟悉,所以在你的JavaScript代码中, var response = JSON.parse(xhttp.responseText); 您希望响应文本可用于分析。在Java中,代码之所以生效,是因为请求被发送,其余的操作被阻塞,直到有响应。JavaScript不遵循相同的模式,它不等待响应,并尝试解析 xhttp.responseText 在请求返回任何内容之前。

文件解释了这一点 XMLHttpRequest.responseText

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

当readystate的值变为xmlhttprequest.done(4)并且status变为200(“OK”)时,您知道整个内容已经收到。

因为javascript不会等待响应,所以您的代码必须等待一个事件来发出响应已经发出的信号。这是其他海报所指的异步行为。文件 here 描述如何创建将侦听响应事件的代码。答案提交人 Boo Berr'ita 使用代码就是一个很好的例子。

Bourbia Brahim 7 年前

你忘记了 onreadystatechange 回调函数:

只需将结果包装在这个文件夹中:

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

Georgy Bunin 7 年前

您可以在“加载”时添加事件处理程序:

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();
}

Lucia Pasarin 7 年前

感谢大家的回复,感谢大家提醒我JavaScript中的异步性,我完全忘记了这一点。我通过使用 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>