前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端Demo|在vue里用axios发送网络请求获取异步数据|适合学习vue框架的同学

前端Demo|在vue里用axios发送网络请求获取异步数据|适合学习vue框架的同学

作者头像
微笑的小小刀
发布2022-04-12 15:37:07
1.4K0
发布2022-04-12 15:37:07
举报
文章被收录于专栏:java技术大本营

异步请求

在了解异步请求之前,我们先了解一下他的“兄弟”--同步请求。在同步请求中,浏览器是直接向服务器发送请求,并直接接收、处理服务器响应的数据的。在服务器处理响应请求期间,浏览器是无法完成其他工作的。就像我们有时候无法一心二用一样。

而异步请求则不同,它像是给我们提供了一个代理商,帮我们完成需求,在此期间,浏览器可以去做其他事情。

浏览器把请求交给代理对象—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>标签里写出一个简单的搜索框

代码语言:javascript
复制
<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属性必须是函数

代码语言:javascript
复制
data() {
    return {
      city: "",
    };
  }

但是在new Vue()的时候,data可以直接传入一个对象,像这样

代码语言:javascript
复制
data:{
      city: "",
    },

3)查询数据

代码语言:javascript
复制
<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>标签中引用

代码语言:javascript
复制
<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.页面效果

在将数据渲染到页面上之前

我们可以得到如下结果

通过

代码语言:javascript
复制
 console.log(response.data.lives);
 that.weatherList=response.data.lives

这两行

输出lives中的数据

最后通过数组传递将返回的数据显示到页面上

最后的效果如下

输入武汉市的城市编码420100

回车搜索

武汉市的天气情况就显示出来啦

官方axios文档地址:

https://github.com/axios/axios

E N D

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-03-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 java技术大本营 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 2.编写代码
  • 3.页面效果
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档