Tidak ditangkap (dalam janji) TypeError: X bukan fungsi
P粉401527045
P粉401527045 2024-03-21 18:13:44
0
1
455

Saya cuba membina apl vue yang mencari melalui API Spotify untuk mencari lagu. Tetapi saya mempunyai soalan, ia berkata:

Tidak ditangkap (dalam janji) TypeError: searchTracks bukan fungsi

Setiap kali saya memanggil fungsi searchTracks. Saya mencari penyelesaian tetapi tidak menemuinya. Saya mempunyai kod untuk mengakses Spotify API pada fail lain (useSpotify.js) (saya masih belajar)

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

Saya memanggil ini dalam komponen vue hanya untuk mencubanya (Login.vue) Anda boleh pergi ke //searchCuba lihat kod untuk percubaan ini dilakukan

<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>
Saya tidak faham dari mana datangnya masalah. Tolong bantu (saya masih kurang mahir dalam JavaScript, sila nyatakan kesilapan yang saya lakukan)

P粉401527045
P粉401527045

membalas semua(1)
P粉427877676

Anda takrifkan useSpotify sebagai async 函数,调用时应使用 awaitthen() . Respons fungsi tak segerak sentiasa janji. Dokumentasi

useSpotify().then((result) => {
        const {searchTracks} = result
        // rest of your code
    })
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan