如何在Vue.js项目中使用Axios替换原生fetch实现天气接口请求

前置准备 #

• 先在项目中安装Axios依赖：
  执行命令：npm install axios 或 yarn add axios
• 在当前组件的script开头引入Axios：

  import axios from 'axios'
  

替换请求逻辑 #

你只需要修改fetchWeather方法内的请求部分即可，其余代码完全不用动。Axios会自动完成JSON响应解析，不需要手动调用res.json()，响应内容存放在返回对象的data属性中。

修改后的完整script代码如下： #

<script>
import axios from 'axios'
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") {
        // 以下两种写法选其一即可
        // 写法1：直接拼接URL，和原有fetch用法逻辑一致
        axios.get(`${this.url_base}weather?q=${this.query}&units=metric&APPID=${this.api_key}`)
          .then(res => {
            this.setResults(res.data)
          })
          // 可按需添加错误捕获逻辑
          // .catch(err => console.log('请求出错：', err))
        
        // 写法2：用params传参，避免手动拼接字符串的编码问题，更推荐
        /*
        axios.get(`${this.url_base}weather`, {
          params: {
            q: this.query,
            units: 'metric',
            APPID: this.api_key
          }
        }).then(res => {
          this.setResults(res.data)
        })
        */
      }
    },
    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>

内容的提问来源于stack exchange，提问作者Balazs Kelemen