未捕获(承诺)语法错误：意外的令牌"<"，"<!DOCTYPE "...不是有效的 JSON，获取 HTML 响应而不是 JSON

Question

上下文：我一直在做一个项目(名为音乐大师(，我必须从developer.spotify.com访问艺术家的详细信息。以下是代码片段：

const BASE_URL = 'https://api.spotify.com/v1/search?';
const FETCH_URL = `${BASE_URL}q=${this.state.query}&type=artist&limit=1`;
console.log('FETCH_URL', FETCH_URL);
fetch('FETCH_URL', {
method:'GET',
headers: {
'Accept': 'application/json',
"Content-Type" : "Application/json",
"Authorization": "Bearer BQDyac2glKnbstiG79UKzKSReNbsWa_hEKlOWAZtXaFZpfx8ZibluRUmBHHO12CjLMJv3KBaKTZqUKJReA11_ItrYIkr3CmnUi6ykUD7J0gZk9pKzxjz02j4byQfSa6s7Y08OMNzugFffYc68tzZiGSDp9vB80eiiIod_igAH8ZxbPBUMsRH3pbiMY8tnJpeXmk"              }
})
.then(response => response.json())
.then(json => {
const artist = json.artists.items[0];
console.log('artist', artist);
this.setState({artist});
});

当运行代码时，我收到了上面的错误，我在互联网上研究了这个问题很长一段时间，发现我必须在fetch((中添加头部分，但即使添加了头部分，我也收到了错误。

即使在传递了令牌之后，我也无法理解为什么我得到的是HTML响应而不是JSON。

我真的是个新手，这是我的第一个项目，因此我无法理解这背后的内部功能是什么。

Answer 1

来自MDN:

fetch()承诺不会拒绝HTTP错误(404等(。

当您为json传递Accept标头时，返回HTML并不理想，但错误通常一开始就不理想。在尝试解析为JSON之前，您可能需要检查response.status是否为200。