On gists

Debounced method in Vue (settimeout), fetch with cors mode

JavaScript Vue.js

example.js Raw #

  methods: {
    search() {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.findSong()
      }, 500)
    },

    async findSong() {
      let headers = new Headers()
      headers.append('Content-Type', 'application/json')
      headers.append('Accept', 'application/json')
      headers.append('Origin', 'http://vue3.rjwebdesign.cz')
      headers.append('GET', 'POST', 'OPTIONS')

      let q = encodeURI(this.q)
      if (!this.q) {
        return
      }

      //console.log(q)
      // return

      const response = await fetch(`https://itunes.apple.com/search?term=${q}&limit=50`, {
        mode: 'cors',
        method: 'POST',
        headers: headers
      }).catch(err => console.log(err))

      const data = await response.json()
      this.songs = data.results.filter(item => item.kind == 'song')
      console.log(this.songs)
    },