我在单个请求中使用 spotify api 出现错误 429

Posted 2023-04-15

【中文标题】我在单个请求中使用 spotify api 出现错误 429

【英文标题】：I have an Error 429 with spotify api on single request

【发布时间】：2021-12-09 16:51:50

【问题描述】：

我正在制作一个网站来检索和显示我的播放列表，昨天一切正常，今天早上我没有触摸代码，每次我想在 api 上检索数据时都会出现错误 429。

我的代码：

export const getUserPlaylist=async(params=null)
   params=
      params,
      headers:'Authorization': `Bearer $AccessToken`
   
   const response=await axios.get("https://api.spotify.com/v1/me/playlists", params)
   return response.data

我尝试过使用和不使用 axios，这不是问题。

我在这里的 React 组件类中使用了这个函数：

async searchPlaylists()
    if(!this.state.allPlaylists)
        const response=await getUserPlaylist(limit:50)
        this.setState(allPlaylists:response.items)
    
    let playlists=[]
    for(let i of this.state.allPlaylists)
        if(i.name.indexOf(this.props.playlistName)===0)
            playlists.push(new Playlist(i))
            if(playlists.length===3) break
        
    
    this.setState(playlists)

async componentDidMount()
    this.searchPlaylists()

async componentDidUpdate()
    this.searchPlaylists()

【参考方案1】：

componentDidUpdate() 是一个生命周期钩子，每次组件重新渲染时都会在其中运行代码。 React 中的组件会在其状态或道具发生变化时更新。searchPlaylists() 设置状态，这会导致重新渲染。 换句话说，您创建了一个无限循环，您在每次重新渲染时更新状态，这会导致另一个重新渲染，每次都发送一个 API 请求。

For more in-depth information.

【讨论】：

谢谢！就是这样，但是现在当我的道具改变时，我的组件不会改变

您需要找到一种解决方法，例如，在componentDidUpdate() 中设置一个条件，以便仅在真正需要时调用searchPlaylists()，这取决于您要实现的目标。

另外，还有几点额外说明： 1. 在没有await 语句的函数中不需要async（在这种情况下为componentDidMount() 和componentDidUpdate()）。 2. 在searchPlaylists() 中，只要您的if 条件为true，您实质上就是连续两次设置状态。强烈建议避免这种情况。设置状态的成本很高，并且从长远来看会影响性能。更不用说它可能会产生竞争条件。

P.S. - 你还有其他问题。您正在检查allPlaylists 是否为假，在这种情况下，您将其填充到状态中并立即尝试循环遍历它。这不应该起作用，因为在 React 中设置状态基本上就像一个异步函数一样工作，所以当你尝试循环它时，在大多数情况下它应该仍然是未填充的。此外，每次设置它时，您实际上都在践踏先前的状态。也可以看看this。

我完全重做了我的组件，实际上我误解了状态的使用，现在一切正常，再次感谢您的帮助