vue调用和风天气api

### Vue 中调用和风天气 API 的方法

#### 准备工作
为了能够在 Vue 项目中成功调用和风天气 API，需要先获取到合法有效的 API Key。这可以通过注册成为开发者并创建应用来获得相应的密钥[^2]。

#### 安装 Axios 库
由于 HTTP 请求操作较为频繁，在此推荐使用 axios 来发起网络请求。如果尚未安装该库，则可以在命令行工具里通过 npm 或 yarn 进行安装：

npm install axios --save

或者

yarn add axios

#### 创建服务文件夹和服务模块
在 src 文件夹下新建名为 services 的目录，并在其内部建立 weatherService.js 文件用来封装具体的业务逻辑函数。以下是关于 `getWeatherData` 方法的具体实现方式：

// src/services/weatherService.js
import axios from 'axios';

const BASE_URL = 'https://devapi.qweather.com/v7/';
const KEY = ''; // 将此处替换为你自己的API Key

export default {
    async getWeatherData(cityCode){
        try{
            const response = await axios.get(`${BASE_URL}weather/now`, {
                params:{
                    key:KEY,
                    location: cityCode
                }
            });
            return response.data;
        }catch(error){
            console.error('Error fetching data:', error);
            throw new Error('Failed to fetch weather data');
        }
    },
};

请注意将上述代码中的 `KEY` 替换成自己申请得到的真实值。

#### 组件内调用 Service 获取数据
接下来就可以在组件里面引入 service 并调用其中定义好的异步方法了。下面是一个简单的例子展示如何在一个页面加载完成后自动拉取指定城市的实时天气情况：

<template>
  <div v-if="loading">Loading...</div>
  <div v-else>
      {{ weatherInfo }}
  </div>
</template>

<script>
import WeatherService from '../services/weatherService';
export default {
  name:'WeatherComponent',
  data(){
      return {
          loading:true,
          weatherInfo:{}
      };
  },
  mounted() {
      this.fetchWeather();
  },
  methods: {
      async fetchWeather(){
          let cityCode='CN101280601'; // 此处填写目标城市编码，比如深圳：CN101280601
          try{
              this.loading=true;
              this.weatherInfo=await WeatherService.getWeatherData(cityCode);
          }finally{
              this.loading=false;
          }
      }
  }
};
</script>

这段代码展示了当组件挂载完毕之后会立即执行一次 `fetchWeather()` 方法从而触发对远程服务器的数据请求过程；一旦收到响应则更新视图上的信息显示给用户知道当前所在位置最新的气温状况等细节内容。