Uncaught (в обещании) SyntaxError (VueJS с API OpenWeatherMap)

Question

Я пробую приложение погоды с VueJS, используя API Weathermap. Я уже получил свой ключ API, и я все еще не работаю над своим приложением. Но когда я пытаюсь использовать ссылку для API в браузере, он показывает данные в нем. Но почему это не показывает данные в моем приложении. Я проверил консоль браузера: отображается ошибка Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Вот мой код:

export default {
  name: 'App',
  data(){
    return{
      api_key: 'f9874496f4c1c5729fc7b4f546b1ebe4',
      url_base: "api.openweathermap.org/data/2.5/",
      query: '',
      weather: {}
    }
  },
  methods: {
    fetchWeather(e) {
      if(e.key == "Enter") {
        fetch(`${this.url_base}weather?q=${this.query}&units=metric&appid=${this.api_key}`)
        .then(res=> {
          return res.json();
        }).then(this.setResults);
      }
    },

    setResults (results) {
      this.weather = results;
    }
  }
}

А вот фотография ссылки API, которую я использовал в браузере. проверьте это здесь

Я надеюсь, что кто-то может помочь мне с этим. Заранее спасибо!

Answer 1

вам нужно перехватить ваши ошибки и распечатать их, чтобы точно выяснить, в чем дело.

 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))

это должно избавить от неперехваченной (обещанной) ошибки и распечатать действительную ошибку