Vue调用Spotify封装方法searchTracks报not a function错误求助

• 直接原因：你定义的useSpotify是异步函数，直接调用返回的是Promise实例，并非你预期的包含searchTracks的对象，从Promise上解构searchTracks得到的是undefined，调用时自然会报「不是函数」的错误。
• 隐藏问题1：调用token接口返回的是包含access_token字段的对象，你直接将整个返回对象赋值给token变量，后续请求头拼接后会变成Bearer [object Object]，导致授权失败。
• 隐藏问题2：搜索接口的参数拼接不规范，缺少q=参数前缀，也没有对搜索关键词做编码处理，会触发请求格式错误。

第一步：修改 useSpotify.js #

调整逻辑，移除顶层async，将token获取改为懒加载缓存逻辑，避免重复请求，修正参数和token取值问题：

import { ref } from 'vue'

const useSpotify = () => {
    // 缓存token，避免每次搜索都重新请求凭证
    let tokenCache = null
    const id = 'MyId'
    const secretId = 'mySecretId'

    // 单独封装获取token的逻辑
    const getAccessToken = async () => {
        if (tokenCache) return tokenCache
        const res = await fetch('https://accounts.spotify.com/api/token', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Basic ' + btoa(id + ':' + secretId)
            },
            body: 'grant_type=client_credentials'
        });
        const tokenResult = await res.json();
        tokenCache = tokenResult.access_token
        return tokenCache
    }

    const searchTracks = async (searchTerm) => {
        const token = await getAccessToken()
        const res = await fetch(`https://api.spotify.com/v1/search?q=${encodeURIComponent(searchTerm)}&type=track`, {
            method: 'GET',
            headers: { 'Authorization': 'Bearer ' + token }
        });
        const data = await res.json()
        return data
    }

    return { searchTracks }
}

export default useSpotify

第二步：修改 Login.vue 调用逻辑 #

给异步的searchTracks调用加上await即可：

// 原有搜索逻辑修改如下
const searchTerm = ref('')
const { searchTracks } = useSpotify()
const search = async () =>{
  // 异步方法必须加await等待执行完成
  const res = await searchTracks(searchTerm.value)
  console.log('搜索结果：', res)
}

内容的提问来源于stack exchange，提问作者madaraw