axios实战练习 |
您所在的位置：网站首页 › axios访问本地接口 › axios实战练习 |
axios实战练习
|
文章目录
📋前言🎯案例介绍🧩如何调用城市天气接口1️⃣创建应用生成Key2️⃣查看API文档
🧩测试接口
🎯案例编写🎯实现效果
📋前言
关于这个Vue + axios 获取接口数据的操作，这篇文章就不过多的讲解了，上一篇关于axios的文章已经介绍过了，接下来我们直接来学习和了解一下如何使用这个api接口来实现天气查询的案例。 详细看这篇文章：axios基础学习——通过 Vue + axios 获取接口数据的小demo 🎯案例介绍首先在编写代码之前，我们要知道这个城市天气的api接口怎么使用和创建。 🧩如何调用城市天气接口 1️⃣创建应用生成Key网站地址：高德开放平台 | 高德地图API 首先注册好账号，然后在导航栏找到Web服务API。
找到天气查询这个API
然后点击申请Key创建应用并且生成Key密钥
随便起一个名字，然后选择应用类型为“天气”
建好以后，添加一个Key，选择“Web服务”
提交以后，自动生成Key密钥
在使用的过程中发现，参数city的值可以为adcode（城市编码），也可以为中文名称。 主要请求头的名称以及返回数据的名称
完成以上的步骤以后，我们来试一下调用这个接口，看看返回的数据。 因为是js文件，所以运行在终端，node xxx.js。 const axios=require('axios') const params = { key: '你的Key', city: '广州', extensions: 'all' } axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; axios.get( 'https://restapi.amap.com/v3/weather/weatherInfo?parameters', { params: { key: '你的Key', city: '广州', extensions: 'all' } } ).then((res) => { console.log(res.data); console.log(res.data.forecasts[0].casts[0]); }).catch((err) => { console.log(err); })成功运行，调用接口获取到了广州的天气数据。
首先这个案例用的是Vue3+axios，页面布局很简单，表单布局加内容显示，表单布局是输入框加一个按钮，在输入框输入你想查询的城市名字（输入框通过v-model双向绑定所要查询的城市），然后点击按钮进行查询。内容显示区域分为四个部分，分别是当天的天气情况以及未来三天的天气预测。 上面的代码是用于测试的，以下代码是案例的完整代码，是写在脚手架上面的。 weather fortecast serach 城市：{{ params.area.province }}-{{ params.area.city }} 日期：{{ item.date }} 星期{{ week[item.week] }} 白天天气：{{ item.dayweather }} 晚间天气：{{ item.nightweather }} 白天温度：{{ item.daytemp }}℃ 晚间温度：{{ item.nighttemp }}℃ 风向：向{{ item.daywind }}~向{{ item.nightwind }} 风力：{{ item.daypower }}级~{{ item.nightpower }}级 import axios from 'axios' export default { data () { return { week: [ '日', '一', '二', '三', '四', '五', '六' ], params: { key: 'd540cda8c346b7efb5a558bb8b6a30a5', city: '广州', extensions: 'all', weatherList: { }, area: { } } } }, created () { this.serachWeather() }, methods: { async serachWeather () { const params = this.params axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded' axios.get( 'https://restapi.amap.com/v3/weather/weatherInfo', { params: this.params } ).then((res) => { params.weatherList = res.data.forecasts[0].casts params.area = res.data.forecasts[0] console.log(params.area) }).catch((err) => { console.log(err) }) } } } *{ margin: 0; padding: 0; } @font-face { font-family: 'ds'; src: url('../../../font/DS-DIGIB.TTF'); } .title{ text-align: center; line-height: 2em; font-size: 24px; font-family: 'ds'; } .serach{ width: 18rem; height: auto; border: 2px solid #000; border-radius: 1rem; margin: 0 auto; display: flex; justify-content: flex-end; & input{ border: none; outline: none; width: 10rem; } & input:hover{ // border-bottom:1px solid #000; // text-decoration: underline; } & button{ border: none; width: 6rem; border-radius: 1rem; margin-left: 1rem; } } .msg{ // text-align: center; width: 20rem; height: auto; border: 1px solid #000; margin: 0 auto; margin-bottom: 2rem; } .msg:nth-last-child(4){ margin-top: 1rem; & p:nth-child(1){ color: red; } } 🎯实现效果案例中接口返回的城市是广州，因此默认查询的是广州。
|
【本文地址】
今日新闻 |
推荐新闻 |