亲爱的大家，这个小天气应用怎么实现Axios呢？谢谢[关闭]答案

【问题标题】：Dear All, How can implement Axios in this small weather app? Thank you [closed]亲爱的大家，这个小天气应用怎么实现Axios呢？谢谢[关闭]
【发布时间】：2021-10-08 08:59:58
【问题描述】：

// 如何实现 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.js axios

【解决方案1】：

尝试如下 sn-p:

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>

【讨论】：

谢谢你，这是完美的，但我需要使用 Axios 库
现在看看我更新的答案，你需要npm install axios，然后在组件中导入axios，然后调用axios