AxiosでSpotify Web APIを使うときにpostリクエストで詰まった
はじめに
こちらの記事でSpotify WEB APIにpostリクエストを行うときに少し詰まったのでメモです。
著者はReactの初学者です。
事象
axios.getメソッドで正常に作動していた下記の形式を流用しpostリクエストを行ったところ、401 Unauthorizedエラーが返ってくる。
const result = await axios.post(
`https://api.spotify.com/v1/playlists/${id}/tracks?${searchParam.toString()}`,
{
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${accessToken}`
}
}
);
原因
公式ドキュメントのわかりやすいところに書いていました。
getメソッドaxios.get(url[, config])に対してpostメソッドはaxios.post(url[, data[, config]])となっています。
現在の状態ではheadersがdataとして処理されてしまっているのでしょう。
解決
コードの変更
data引数を追加してheaderが正常に処理されるようにします。
const result = await axios.post(
`https://api.spotify.com/v1/playlists/${id}/tracks?${searchParam.toString()}`,
+ {},
{
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${accessToken}`
}
}
);
インスタンス化
さらに再発の防止とコード削減のためにheader部分をインスタンス化します。
export class ApiClient{
static createInstance = (accessToken: string) =>{
const instance = axios.create({
baseURL: 'https://api.spotify.com/v1',
headers:{
'Content-Type': 'application/json',
'Authorization': `Bearer ${accessToken}`
}
});
return instance;
}
static async get<T>(url: string, accessToken: string){
const instance = this.createInstance(accessToken);
return await instance.get(url)
.catch((e) => {
return Promise.reject(e);
});
}
static async post(url: string, accessToken: string, data?: any){
const instance = this.createInstance(accessToken);
return await instance.post(url, data)
.catch((e) => {
return Promise.reject(e);
});
}
}
const result = ApiClient.post(
`/playlists/${id}/tracks?${searchParam.toString()}`,
accessToken,
);
これで間違いなくリクエストを行うことができるようになりました。
おわりに
表題にはSpotify Web APIと書きましたが、原因はパッケージ側でした。しかし、同じような事象で詰まった人が検索で辿り着けるように表題には残しておきます。公式ドキュメントを見ることが大切なことを今回でつくづく実感しました。
今後も詰まったところは解決策を形に残すことを心がけたいと思います。
参考
何気なく使っていたaxiosを初心者向けにまとめてみる(2) ~インスタンス化して効率化~
Author And Source
この問題について(AxiosでSpotify Web APIを使うときにpostリクエストで詰まった), 我々は、より多くの情報をここで見つけました https://zenn.dev/kahra/articles/15e12abdcb0d85著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol