使用vue+ts+antd+pnpm实现天气查询应用
上一篇介绍了前端工程化的一些东西，说要从vue开始学习，那么相比理论，直接进行开发实例能够更好的理解工程化带来的便利。说说今天要做的小应用，上一篇介绍了轮播图，这次就是查询天气卡片显示。
先说说实现的核心思路： 1、监听城市名 2、接口请求 3、接口数据返回 4、动态渲染页面
看看实现的完成图：
那么这个天气数据哪里来呢？就是三方的天气API接口，比如国家气象数据中心，实名注册后每天有20次调用次数，足够使用了，也可以使用第三方平台给的接口，可以自己搜索。
API地址： https://data.cma.cn/site/apidoc.html
页面代码：
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 类型定义。