上一篇介绍了前端工程化的一些东西，说要从vue开始学习，那么相比理论，直接进行开发实例能够更好的理解工程化带来的便利。说说今天要做的小应用，上一篇介绍了轮播图，这次就是查询天气卡片显示。
技术栈：
vue ts antd pnpm axios 三方天气API
环境依赖都是最新的（截止2023年7月5日）：
代码语言：javascript复制 "ant-design-vue": "^3.2.20",
"axios": "^1.4.0",
"vue": "^3.2.47" ,
"typescript": "^5.0.2",
"vite": "^4.3.9",
"nodejs": 18.16.0先说说实现的核心思路：
1、监听城市名
2、接口请求
3、接口数据返回
4、动态渲染页面
先看看实现的完成图：
那么这个天气数据哪里来呢？就是三方的天气API接口，比如国家气象数据中心，实名注册后每天有20次调用次数，足够使用了，也可以使用第三方平台给的接口，可以自己搜索。
API地址：
代码语言：javascript复制https://data.cma.cn/site/apidoc.html页面代码：
代码语言：javascript复制 <a-card title="天气查询" v-if="weatherData" class="weather-card">
<a-descriptions :column="1" >
<a-descriptions-item label="时间">{{ weatherData.time }}</a-descriptions-item>
<a-descriptions-item label="天气状况" >{{ weatherData.weather }}</a-descriptions-item>
<a-descriptions-item label="温度">{{ weatherData.temperature '摄氏度' }}</a-descriptions-item>
<a-descriptions-item label="湿度">{{ weatherData.humidity '%' }}</a-descriptions-item>
</a-descriptions>
</a-card>axios调用代码：
代码语言：javascript复制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官方文档：
代码语言：javascript复制https://axios-http.com/zh/docs/intro最新版本：v1.4.0（截止7月5日）
代码语言：javascript复制https://github.com/axios/axios/releases安装：
代码语言：javascript复制 npm install --save axios vue-axios
yarn add axios导入：
代码语言：javascript复制 // 导入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')使用：
代码语言：javascript复制 axios.get(url[, config])基础样例：
代码语言：javascript复制axios.get('/user?ID=12345')
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.finally(function () {
// 总是会执行
});创建实例：
代码语言：javascript复制const instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});请求配置（比较多，不贴代码）：
创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 GET 方法。
响应结构（比较少，代码如下）：
代码语言：javascript复制{
// `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的参数配置优先级
代码语言：javascript复制 axios默认 < 实例defaults参数 < 请求时的config参数配置至于ts，axios 包含 TypeScript 类型定义。
到这，通过一个简单的天气情况应用项目明白如何使用axios让vue应用具备网络功能，只要掌握了如何合理使用网络api开发vue,这样就能开发出更有价值的应用。
今天的分享就到这了，祝学习顺利！
