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

Question

所以首先我是 ajax 和 JSON http get 请求等的新手。我尝试使用新的 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
    }
});

数据：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);

看这个代码片段，第一个 $.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

The output shows me that there is data but somehow I can't access it and I don't know why

根据 OP 声明：

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

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

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

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

HTTP GET/POST Request with Twitch API and JSON.parse

javascript

jquery

json

xmlhttprequest

twitch

Twitch `/users` 端点

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

HTTP GET/POST Request with Twitch API and JSON.parse

javascript

jquery

json

xmlhttprequest

twitch

Twitch /users 端点

Twitch `/users` 端点