使用Twitch API和JSON.parse的HTTP GET / POST请求

Question

首先，我是ajax和JSON http获取请求的新手等。我尝试使用新的Twitch API来获取有关流式传输的信息。

var token = $.ajax({
   'url' : 'https://api.twitch.tv/kraken/oauth2/token?client_id=XXX&client_secret=XXX&grant_type=client_credentials',
   'type' : 'POST',
   'success' : function(data) {
     console.log(data.access_token);
     localStorage.setItem('token', data.access_token)
   }
});

var test = $.ajax({
    headers: {'Authorization': 'Bearer ' + localStorage.getItem('token')},
    'url' : 'https://api.twitch.tv/helix/users?login=nightbot',
    'type' : 'GET',
    'success' : function(data) {
      console.log(data); // returns an obj with an data array, length 1
      console.log(data[0]); // undefined
      console.log(data.display_name); // undefined
      console.log(JSON.parse(data)); // syntax error
      console.log(JSON.parse(data[0])); // syntax error
      //$( "#result" ).load( data.display_name ) //to do
    }
});

DATA：https://i.imgur.com/J3R7PNu.png

我认为这种方式有点搞砸了。是吗？

我的第二个问题是，我无法从GET REQUEST访问数据。输出显示我有数据，但不知何故我无法访问它，我不知道为什么。

Answer 1

您需要了解AJAX调用的工作原理，第一个$.ajax调用执行请求并立即执行$.ajax调用，localStorage内的数据将不一致。

从您的第一个$.ajax电话执行第二个流程https://api.twitch.tv/helix/users?login=nightbot。

这样您的通话就会保持一致，并会在localStorage内共享一致的数据。

Twitch /users端点

根据Twitch文档（/users端点），响应遵循以下结构：

    {
      "data": [
        {
            "_id": 45454
            "display_name": "Ele"
            .
            .
            .
            .
        }
    ]
}

因此，您必须按如下方式访问该数组：

console.log(data.data[0].display_name);

Lool此代码段，第一个$.ajax调用执行一个名为executeUserProess的函数。

var token = $.ajax({
  'url': 'https://api.twitch.tv/kraken/oauth2/token?client_id=XXX&client_secret=XXX&grant_type=client_credentials',
  'type': 'POST',
  'success': function(data) {
    console.log(data.access_token);
    localStorage.setItem('token', data.access_token);

    executeUserProess();
  }
});

var executeUserProess = function() {
  var test = $.ajax({
    headers: {
      'Authorization': 'Bearer ' + localStorage.getItem('token')
    },
    'url': 'https://api.twitch.tv/helix/users?login=nightbot',
    'type': 'GET',
    'success': function(data) {
      console.log(data); // returns an obj with an data array, length 1
      console.log(data.data[0].display_name);
      //$( "#result" ).load( data.display_name ) //to do
    }
  });
};

Answer 2

  

输出显示我有数据，但我无法访问它，我不知道为什么

根据OP声明：

console.log(data); // returns an obj with an data array, length 1

因此，要访问数组第一个元素，您应该使用下面的语句。

console.log(data.data[0]);