Uncaught (in promise) TypeError: X is not a function
P粉401527045
P粉401527045 2024-03-21 18:13:44
0
1
456

I'm trying to build a vue app that searches through Spotify's API to find tracks. But I have a question, it says:

Uncaught (in promise) TypeError: searchTracks is not a function

Whenever I call the searchTracks function. I searched for a solution but can't seem to find one. I have the code to access the Spotify API on a different file (useSpotify.js) (I'm still learning)

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

I'm calling this in a vue component just to try it out (Login.vue) You can go to //searchTry to see the code this attempt is done

<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>
I don't understand where the problem comes from. Please help (I'm still not very good at JavaScript, please point out the mistakes I'm making)

P粉401527045
P粉401527045

reply all(1)
P粉427877676

You define useSpotify as an async function, which should be called using await or then(). The response of an async function is always a promise. document

useSpotify().then((result) => {
        const {searchTracks} = result
        // rest of your code
    })
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template