如何从 spotify 网站提取数据 API
How to extract the data from spotify web API
我在 http 响应中找不到 JSON object
我正在尝试开发一个使用 spotify API 来获取艺术家信息的 React 应用程序。我使用 fetch
生成 GET 请求
此请求应 return 包含艺术家信息的 JSON。
但是,当我将响应打印到控制台时,我无法找到该数据的位置(在控制台中我看到 header 和两个 "blob" objects)。在开发人员工具网络选项卡中,我可以看到响应确实包含 JSON 数据,但正如我所说,我无法通过 response
变量
访问它
这是我用来生成请求和记录响应的代码
var accessToken='here I insert my token from developer.spotify.com';
fetch('https://api.spotify.com/v1/artists/21E3waRsmPlU7jZsS13rcj', {
method: 'GET',headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer '+accessToken
}
})
.then((response)=>{
console.log(response);
});
正如我所说,我得到了没有任何错误的响应,但我需要帮助来确定我的数据所在的位置
这是apihttps://developer.spotify.com/console/get-artist/
的页面
这是我想从响应中提取的数据
{
"external_urls": {
"spotify": "https://open.spotify.com/artist/0TnOYISbd1XYRBk9myaseg"
},
"followers": {...},
"genres": ["pop","latin",...],
"href": "https://api.spotify.com/v1/artists/0TnOYISbd1XYRBk9myaseg",
"id": "0TnOYISbd1XYRBk9myaseg",
"images": [
{
"height": 640,
"url": "https://i.scdn.co/image/89863fff0d540475d6fd25e7435138a4e5bd7216",
"width": 640
},
{
"height": 320,
"url": "https://i.scdn.co/image/38e8be4aed5050c7b0bcf197a86b0e7b5cbb5ddc",
"width": 320
},
{
"height": 160,
"url": "https://i.scdn.co/image/8573757d9c37eb5178ba8d34a6d6239b055fdf99",
"width": 160
}
],
"name": "Pitbull",
"popularity": 85,
"type": "artist",
"uri": "spotify:artist:0TnOYISbd1XYRBk9myaseg"
}
解决了:fetch返回的response对象不仅包含我要查找的数据(在response body中),还有其他信息(http状态码,response headers等)
为了获得我需要的数据,有必要将响应的主体解析为 JSON。
幸运的是,响应对象有一个方便的 .json()
方法可以做到这一点,返回一个我可以使用的 js 对象。
所以我把代码改成这样:
fetch('https://api.spotify.com/v1/artists/21E3waRsmPlU7jZsS13rcj', {
method: 'GET', headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + accessToken
}
})
.then((response) => {
console.log(response.json().then(
(data) => { console.log(data) }
));
});
现在我得到了想要的数据
我在 http 响应中找不到 JSON object
我正在尝试开发一个使用 spotify API 来获取艺术家信息的 React 应用程序。我使用 fetch
生成 GET 请求
此请求应 return 包含艺术家信息的 JSON。
但是,当我将响应打印到控制台时,我无法找到该数据的位置(在控制台中我看到 header 和两个 "blob" objects)。在开发人员工具网络选项卡中,我可以看到响应确实包含 JSON 数据,但正如我所说,我无法通过 response
变量
这是我用来生成请求和记录响应的代码
var accessToken='here I insert my token from developer.spotify.com';
fetch('https://api.spotify.com/v1/artists/21E3waRsmPlU7jZsS13rcj', {
method: 'GET',headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer '+accessToken
}
})
.then((response)=>{
console.log(response);
});
正如我所说,我得到了没有任何错误的响应,但我需要帮助来确定我的数据所在的位置
这是apihttps://developer.spotify.com/console/get-artist/
的页面这是我想从响应中提取的数据
{
"external_urls": {
"spotify": "https://open.spotify.com/artist/0TnOYISbd1XYRBk9myaseg"
},
"followers": {...},
"genres": ["pop","latin",...],
"href": "https://api.spotify.com/v1/artists/0TnOYISbd1XYRBk9myaseg",
"id": "0TnOYISbd1XYRBk9myaseg",
"images": [
{
"height": 640,
"url": "https://i.scdn.co/image/89863fff0d540475d6fd25e7435138a4e5bd7216",
"width": 640
},
{
"height": 320,
"url": "https://i.scdn.co/image/38e8be4aed5050c7b0bcf197a86b0e7b5cbb5ddc",
"width": 320
},
{
"height": 160,
"url": "https://i.scdn.co/image/8573757d9c37eb5178ba8d34a6d6239b055fdf99",
"width": 160
}
],
"name": "Pitbull",
"popularity": 85,
"type": "artist",
"uri": "spotify:artist:0TnOYISbd1XYRBk9myaseg"
}
解决了:fetch返回的response对象不仅包含我要查找的数据(在response body中),还有其他信息(http状态码,response headers等)
为了获得我需要的数据,有必要将响应的主体解析为 JSON。
幸运的是,响应对象有一个方便的 .json()
方法可以做到这一点,返回一个我可以使用的 js 对象。
所以我把代码改成这样:
fetch('https://api.spotify.com/v1/artists/21E3waRsmPlU7jZsS13rcj', {
method: 'GET', headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + accessToken
}
})
.then((response) => {
console.log(response.json().then(
(data) => { console.log(data) }
));
});
现在我得到了想要的数据