前言
在前端开发中，经常需要与后端 API 进行交互。而对于音乐类应用，大部分都需要使用 Spotify 的 API 进行数据获取和处理。但是，使用原生的浏览器 API 进行操作会有很多麻烦，例如认证、跨域等等。因此，本文介绍了一个 npm 包 plnh-spotify-wrapper，用于简化与 Spotify API 的交互。
安装
在命令行中执行以下命令安装 plnh-spotify-wrapper：
npm install plnh-spotify-wrapper --save
用途
plnh-spotify-wrapper 提供了以下功能：
- 获取 Spotify 用户信息；
- 获取 Spotify 歌曲信息和歌曲封面图像；
- 获取 Spotify 歌曲播放链接；
- 获取 Spotify 歌单信息和歌单封面图像；
- 获取 Spotify 歌手信息和歌手图片；
- 获取 Spotify 专辑信息和专辑封面图像。
使用方法
认证
在使用前，需要进行认证。首先，需要在 Spotify Developer Dashboard 中创建一个应用程序。创建完成后，会得到一个 Client ID 和一个 Client Secret。
在认证之前，需要先配置一下 Redirect URI。在这里，建议使用 http://localhost:3000 作为 Redirect URI。具体的步骤如下：
- 在应用程序页面中，点击 “Edit Settings” 按钮；
- 在 “Redirect URIs” 中添加 http://localhost:3000；
- 点击 “Save” 按钮。
大多数情况下，我们都是进行客户端认证，即使用 Implicit Grant Flow 进行认证。代码如下：
-- -------------------- ---- ------- ------ - --------- - ---- ----------------------- -- ------ ----- ----- - - -------------------- ------------------ ------------------------ ------------------------- -------------------------- ------------------- -- -- ---- ----------- ---------- ----------------- ------------- ------------------------ ----- ---------- -- - --------------------- ----------- -- - --------------------- ---
在调用 authorize 函数时，需要传入 client_id、redirect_uri 和 scope 参数。
获取用户信息
要获取用户信息，可以使用 getUser 函数。代码如下：
import { getUser } from 'plnh-spotify-wrapper';
getUser().then(user => {
console.log(user);
}).catch(e => {
console.log(e);
});获取歌曲信息和歌曲封面图像
要获取歌曲信息和歌曲封面图像，可以使用 getTrack 函数。代码如下：
import { getTrack } from 'plnh-spotify-wrapper';
getTrack('6rqhFgbbKwnb9MLmUQDhG6').then(track => {
console.log(track);
}).catch(e => {
console.log(e);
});获取歌曲播放链接
要获取歌曲播放链接，可以使用 getTrackUrl 函数。代码如下：
import { getTrackUrl } from 'plnh-spotify-wrapper';
getTrackUrl('6rqhFgbbKwnb9MLmUQDhG6').then(url => {
console.log(url);
}).catch(e => {
console.log(e);
});获取歌单信息和歌单封面图像
要获取歌单信息和歌单封面图像，可以使用 getPlaylist 函数。代码如下：
import { getPlaylist } from 'plnh-spotify-wrapper';
getPlaylist('37i9dQZF1DWZeKCadgRdKQ').then(playlist => {
console.log(playlist);
}).catch(e => {
console.log(e);
});获取歌手信息和歌手图片
要获取歌手信息和歌手图片，可以使用 getArtist 函数。代码如下：
import { getArtist } from 'plnh-spotify-wrapper';
getArtist('0OdUWJ0sBjDrqHygGUXeCF').then(artist => {
console.log(artist);
}).catch(e => {
console.log(e);
});获取专辑信息和专辑封面图像
要获取专辑信息和专辑封面图像，可以使用 getAlbum 函数。代码如下：
import { getAlbum } from 'plnh-spotify-wrapper';
getAlbum('6i6folBtxKV28WX3msQ84x').then(album => {
console.log(album);
}).catch(e => {
console.log(e);
});总结
plnh-spotify-wrapper 提供了一种简单的方式来与 Spotify API 进行交互。通过本文的介绍，读者可以了解到如何使用该库来获取 Spotify 中的信息。同时，本文也解决了与 Spotify API 连接时的认证和跨域问题，避免了这些问题带来的麻烦。
示例代码
本文示例代码可以在 Github Repo 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b47c6eb7e50355dbf1a