Dear All, How can implement Axios in this small weather app? Thank you [closed]-CodePudding

// how can I implement Axios? I went through the documentation but still not clear, thank you in advance, something to do with the API request from the weather site I presume

I only included the script part I hope that would be enough. My question is not debugging but how to simply replace the request part using axios.

<script> 

export default {
  name: 'app',
  data(){
    return {
      api_key :'f401be24a6ae97c3177533197510126c',
      url_base: 'https://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;
    },
    dateCreator () {
      let dates = new Date();
      let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
      let day = days[dates.getDay()];
      let date = dates.getDate();
      let month = months[dates.getMonth()];
      let year = dates.getFullYear();
      return `${day} ${date} ${month} ${year}`;
    }
  }
}

</script>

CodePudding user response：

Try like following snippet:

new Vue({
  el: '#app',
  data(){
    return {
      api_key :'f401be24a6ae97c3177533197510126c',
      url_base: 'https://api.openweathermap.org/data/2.5/',
      query:'',
      weather:{}

    }
  },
  methods: {
  async fetchWeather () {
      //if (e.key == "Enter") {
        await axios(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
          .then(res => this.weather = res.data);
      //}
    },
    dateCreator () {
      let dates = new Date();
      let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
      let day = days[dates.getDay()];
      let date = dates.getDate();
      let month = months[dates.getMonth()];
      let year = dates.getFullYear();
      return `${day} ${date} ${month} ${year}`;
    }
  },
  mounted() {
    if(this.query) this.fetchWeather()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.22.0/axios.min.js" integrity="sha512-m2ssMAtdCEYGWXQ8hXVG4Q39uKYtbfaJL5QMTbhl2kc6vYyubrKHhr6aLLXW4ITeXSywQLn1AhsAaqrJl8Acfg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="app">
  <label>City name</label>
  <input v-model="query" />
  <button @click.prevent="fetchWeather">Show weather<button>
  <p>{{ weather }}</p>
</div>