时间戳

首页 > 解决方案 > 亲爱的大家，这个小天气应用怎么实现Axios呢？谢谢

vue.js - 亲爱的大家，这个小天气应用怎么实现Axios呢？谢谢

问题描述

// 如何实现 Axios？我浏览了文档但仍然不清楚，提前谢谢你，我认为与天气网站的 API 请求有关

我只包括了脚本部分，我希望这就足够了。我的问题不是调试，而是如何简单地使用 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>

标签： vue.jsaxios

解决方案

试试下面的代码片段：

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>

推荐阅读