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

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

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

看看实现的完成图:

\n

那么这个天气数据哪里来呢?就是三方的天气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: {},

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

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

注意:

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

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