[Vuejs]-Uncaught (in promise) SyntaxError (VueJS with OpenWeatherMap API)

by

0👍

you need to catch your errors and print it to find out exactly what is wrong.

 fetch(`${this.url_base}weather?q=${this.query}&units=metric&appid=${this.api_key}`)
.then(res=> {
          return res.json();
        })
.then(this.setResults)
.catch(error=>console.log(error))

this should get rid of the uncaught(promise) error and print the actual error

0👍

This must be from "Tyler Potts" Vue weather app tutorial on YouTube. I was stuck here too.

Your url_base needs to include http:// at the beginning:

url_base: 'http://api.openweathermap.org/data/2.5/',

Edit

I believe this is because while we may be used to our browsers including the "http://" protocol at the beginning, so that all we need to do as users is type in the hostname and domain to access a website or data we wish to retrieve, our code will not automatically do the same. So you must specify exactly and fully what the function must fetch.

Leave a comment