前端Demo|在vue里用axios发送网络请求获取异步数据|适合学习vue框架的同学
前端Demo|在vue里用axios发送网络请求获取异步数据|适合学习vue框架的同学
异步请求
在了解异步请求之前，我们先了解一下他的“兄弟”--同步请求。在同步请求中，浏览器是直接向服务器发送请求，并直接接收、处理服务器响应的数据的。在服务器处理响应请求期间，浏览器是无法完成其他工作的。就像我们有时候无法一心二用一样。
而异步请求则不同，它像是给我们提供了一个代理商，帮我们完成需求，在此期间，浏览器可以去做其他事情。
浏览器把请求交给代理对象—XMLHttpRequest（绝大多数浏览器都内置了这个对象），由代理对象向服务器发起请求，接收、解析服务器响应的数据，并把数据更新到浏览器指定的控件上，从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求，不用重新加载整个页面来展示服务器响应的数据，在异步请求发送的过程中浏览器还能进行其它的操作。
异步请求的执行流程图
图片来自简书APP
安装axios
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，网络请求框架。
支持以下浏览器
打开vscode（安装教程见往期）
建立website文件
（详见上期前端Demo结尾）
命令行输入cd website打开文件
再输入npm install axios --save
安装完成后你就可以在
package.json -->dependencies
里面看到我们加入的网络请求库：axios
axios的使用
以天气查询系统为例
1.申请免费api
在这里附上几个网址
聚合数据：https://www.juhe.cn/
百度API集市：https://apis.baidu.com/
易源数据：https://www.showapi.com/api/apiList
JSON API免费接口：https://www.bejson.com/knownjson/webInterface/
高德开发平台：https://lbs.amap.com/api/webservice/guide/api/weatherinfo/
接下来小编以高德的api申请为例
在“我的应用”中创建新应用，再获取key
之后我们就得到了自己的api
如下
https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=<用户key>
2.编写代码
代码的编写可分为4步
1）输入搜索内容
我们先在APP.vue中的<template>标签里写出一个简单的搜索框
<div style="text-align: center">
<div class="div_text" style="display: inline-block">
<input
v-model="city"
@keyup.enter="getweather"//表示回车时执行getweather函数
placeholder="搜索天气"
type="text"
style="width: 380px; height: 35px; border: 6px #f1f1f1 solid"
/>
</div>
</div>2）传递搜索内容
在<input>标签中加入v-model="city"拿到输入的内容
在data中定义city参数，这样我们就可以在getweather中直接引用this.city
这里要注意组件的data属性必须是函数
data() {
return {
city: "",
};
}但是在new Vue()的时候，data可以直接传入一个对象，像这样
data:{
city: "",
},3）查询数据
<script>
import axios from "axios";//引入axios
export default {
el: "#app",
data() {
return {
city: "",
weatherList:[]
};
},
methods: {
getweather: function () {
console.log("天气查询");//控制台打印“天气查询”，确定搜索框与getweather绑定
console.log(this.city);//打印city，确定参数是否正确
var that=this;//用that存储this的值
// 调用接口
axios
.get(
"https://restapi.amap.com/v3/weather/weatherInfo?key=你获得的key&city="+this.city
)
.then(function (response) {
// console.log(response);
console.log(response.data.lives);
that.weatherList=response.data.lives
})
.catch(function (err) {err});
},
},
};
</script>4）渲染数据
在data中定义weatherList:[]数组来存我们得到的天气数据，在<template>标签中引用
<ul class="weather-list">
<li v-for="item in weatherList" :key="item.weather">
<div>城市：{{item.province}}{{item.city}}</div>
</li>
<li v-for="item in weatherList" :key="item.weather">
<div>天气：{{item.weather}}</div>
</li>
<li v-for="item in weatherList" :key="item.temperature">
<div>气温：{{item.temperature}}</div>
</li>
<li v-for="item in weatherList" :key="item.humidity">
<div>空气湿度：{{item.humidity}}</div>
</li>
<li v-for="item in weatherList" :key="item.winddirection">
<div>风向：{{item.winddirection}}</div>
</li>
<li v-for="item in weatherList" :key="item.windpower">
<div>风力：{{item.windpower}}</div>
</li>
</ul>3.页面效果
在将数据渲染到页面上之前
我们可以得到如下结果
通过
console.log(response.data.lives);
that.weatherList=response.data.lives这两行
输出lives中的数据
最后通过数组传递将返回的数据显示到页面上
最后的效果如下
输入武汉市的城市编码420100
回车搜索
武汉市的天气情况就显示出来啦
官方axios文档地址：
https://github.com/axios/axios
E N D