Nicht abgefangen (im Versprechen) TypeError: X ist keine Funktion

Question

Ich versuche, eine Vue-App zu erstellen, die die API von Spotify durchsucht, um Titel zu finden. Aber ich habe eine Frage, da steht:

Uncaught (in Versprechen) TypeError: searchTracks ist keine Funktion

Immer wenn ich die searchTracks-Funktion aufrufe. Ich habe nach einer Lösung gesucht, aber scheinbar keine gefunden. Ich habe den Code für den Zugriff auf die Spotify-API in einer anderen Datei (useSpotify.js) (ich lerne noch)

import { ref } from 'vue'

const useSpotify = async () => {
    let token
    const id = 'MyId'
    const secretId = 'mySecretId'

    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'
    });

    token = await res.json();
    console.log(token);

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

        return data.value
    }

    return { searchTracks }
}

export default useSpotify

Ich rufe dies in einer Vue-Komponente auf, nur um es auszuprobieren (Login.vue). Sie können zu //searchTry gehen, um den Code für diesen abgeschlossenen Versuch zu sehen

<template>
  <form @submit.prevent="handleLoginSubmit">
    <h3>Login</h3>
    <input type="email" placeholder="Email" v-model="email" />
    <input type="password" placeholder="Password" v-model="password" />
    <div class="error" v-if="error">{{error}}</div>
    <button v-if="!isPending">Login</button>
    <button v-if="isPending" disabled>Loading..</button>
  </form>
  <input type="text" v-model="searchTerm">
  <button @click="search">search</button>
</template>

<script>
import useLogin from "@/composables/useLogin";
import { ref } from '@vue/reactivity';
import { useRouter } from 'vue-router';
// searchTry
import useSpotify from '../../composables/spotifyApi/useSpotify'
// searchTry
export default {
  setup() {
    const {error, isPending, login} = useLogin()
    const router = useRouter()

    const email = ref('')
    const password = ref('')

    const handleLoginSubmit = async () =>{
      const res = await login(email.value, password.value)
      if(!error.value){
        router.push({name: 'UserPlaylists'})
      }
    }
    // search try
    const searchTerm = ref('')
    const {searchTracks} = useSpotify()
    const search = async () =>{
      const res = searchTracks(searchTerm.value)
    }
    // search try

    return{email, password, isPending, error, handleLoginSubmit, searchTerm, search}
  },
};
</script>

<style>

Ich verstehe nicht, woher das Problem kommt. Bitte helfen Sie (ich bin immer noch nicht sehr gut in JavaScript, weisen Sie mich bitte auf die Fehler hin, die ich mache)

Answer 1

您将 useSpotify 定义为 async 函数，调用时应使用 await 或 then() 。异步函数的响应始终是承诺。 文档

useSpotify().then((result) => {
        const {searchTracks} = result
        // rest of your code
    })