Nuxt3の記述ルール
kurumin
プログラミングのーと
すぽてぃふぁいのAPI取得
kurumin
createApp({
setup() {
const users = ref([]);
const loading = ref(false);
onMounted(async () => {
loading.value = true;
const clientId = 'XXXXXXXXX';
const clientSecret = 'XXXXXXXXX';
const playlistId = 'XXXXXXXXX';
// アクセストークン取得
const resToken = await fetch('https://accounts.spotify.com/api/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`
});
const tokenJson = await resToken.json();
const token = tokenJson.access_token;
// プレイリスト取得
const resPlaylist = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}`, {
headers: {
'Authorization': `Bearer ${token}`
}
});
const playlistJson = await resPlaylist.json();
users.value = playlistJson.tracks.items;
loading.value = false;
});
return { users, loading };
}
}).mount('#app');
ソースの内容
Vue3のモジュールをCDNから読み込む
import { createApp, ref, onMounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp：Vueアプリを作る関数
ref：リアクティブなデータを作る関数（データが変わったら画面も自動更新）
onMounted：Vueのライフサイクル。画面が表示された後に処理を実行する
createApp({
setup() {
const users = ref([]);
const loading = ref(false);
onMounted(async () => {
loading.value = true;
const clientId = 'XXXXXXXXX';
const clientSecret = 'XXXXXXXXX';
const playlistId = 'XXXXXXXXX';
// アクセストークン取得
const resToken = await fetch('https://accounts.spotify.com/api/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: `grant_type=client_credentials&client_id=${clientId}&client_secret=${clientSecret}`
});
const tokenJson = await resToken.json();
const token = tokenJson.access_token;
// プレイリスト取得
const resPlaylist = await fetch(`https://api.spotify.com/v1/playlists/${playlistId}`, {
headers: {
'Authorization': `Bearer ${token}`
}
});
const playlistJson = await resPlaylist.json();
users.value = playlistJson.tracks.items;
loading.value = false;
});
return { users, loading };
}
}).mount('#app');
ああああ
ABOUT ME
