使用vue+ts+antd+pnpm实现天气查询应用

  • 2023/7/5
  • 阅读时间 2 分钟

上一篇介绍了前端工程化的一些东西，说要从vue开始学习，那么相比理论，直接进行开发实例能够更好的理解工程化带来的便利。说说今天要做的小应用，上一篇介绍了轮播图，这次就是查询天气卡片显示。

先说说实现的核心思路： 1、监听城市名 2、接口请求 3、接口数据返回 4、动态渲染页面

看看实现的完成图：

那么这个天气数据哪里来呢？就是三方的天气API接口，比如国家气象数据中心，实名注册后每天有20次调用次数，足够使用了，也可以使用第三方平台给的接口，可以自己搜索。

API地址： https://data.cma.cn/site/apidoc.html

页面代码：

{{ weatherData.time }} {{ weatherData.weather }} {{ weatherData.temperature+'摄氏度’ }} {{ weatherData.humidity +’%’ }}

axios调用代码： const fetchWeatherData = async () => { try {

      const apiKey = 'yourkey';
      const apiUrl = 'yoururl';

      const response = await axios.get(apiUrl);

      weatherData.value = {
        weather: response.data.weather,
        temperature: response.data.temperature,
        humidity: response.data.humidity,
        time: response.data.reporttime,
      };

      
    } catch (error) {
      console.error('Error fetching weather data:', error);
    }
  };

这里主要就是分享axios调用的过程，可以使用axios或者vue-axios，axios是基于promise的http客户端工具，vue-axios是对axios进行了简单的包装，使得在vue中进行网络请求变得简单。

axios官方文档： https://axios-http.com/zh/docs/intro

最新版本：v1.4.0（截止7月5日） https://github.com/axios/axios/releases

安装： npm install –save axios vue-axios yarn add axios

导入： // 导入vue-axios模块 import VueAxios from ‘vue-axios’ import axios from ‘axios’; import App from ‘./App.vue’ // 挂载根组件 const app = createApp(App) // 注册axios app.use(VueAxios, axios) app.mount('#app’)

使用： axios.get(url[, config])

样例： axios.get('/user?ID=12345’) .then(function (response) { // 处理成功情况 console.log(response); }) .catch(function (error) { // 处理错误情况 console.log(error); }) .finally(function () { // 总是会执行 });

创建实例： const instance = axios.create({ baseURL: ‘https://some-domain.com/api/', timeout: 1000, headers: {‘X-Custom-Header’: ‘foobar’} });

请求配置（比较多，不贴代码）： 创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。

响应结构（比较少，代码如下）： { // data 由服务器提供的响应 data: {},

// status 来自服务器响应的 HTTP 状态码 status: 200,

// statusText 来自服务器响应的 HTTP 状态信息 statusText: ‘OK’,

// headers 是服务器响应头 // 所有的 header 名称都是小写，而且可以使用方括号语法访问 // 例如: response.headers['content-type'] headers: {},

// config 是 axios 请求的配置信息 config: {},

// request 是生成此响应的请求 // 在node.js中它是最后一个ClientRequest实例 (in redirects)， // 在浏览器中则是 XMLHttpRequest 实例 request: {} }

注意：

axios的参数配置优先级 axios默认 < 实例defaults参数 < 请求时的config参数配置

至于ts，axios 包含 TypeScript 类型定义。

前端