Axios异步请求

最新推荐文章于 2023-12-13 19:54:21 发布

努力找工作的小白

最新推荐文章于 2023-12-13 19:54:21 发布

阅读量374

点赞数

文章标签：前端 servlet http

本文链接：https://blog.csdn.net/weixin_44482951/article/details/127533839

版权

axios的简单介绍

摘要由CSDN通过智能技术生成

Axios异步请求

同步请求和异步请求：

同步请求：指客户端只有一个主线程, 既要负责页面展示相关,也要负责发请求获取数据,由于只有一个线程当发请求时则不能显示页面(清空页面), 当把数据请求回来之后再把请求到的数据展示到页面中, 这样的话只能实现页面的整体改变,无法实现页面的局部改变
异步请求：指客户端主线程负责页面展示相关, 由子线程发请求获取数据, 这样页面内容就不需要清空, 子线程得到数据后可以把数据直接展示到原页面中, 这个过程称为页面的局部改变,异步请求就是用来实现页面局部刷新的

如何发出异步请求：

通过前端引入axios来发送请求：

https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js

请求中的post和get请求：

get：请求参数在请求地址的后面通过?分割 , 参数可见所以不能出现敏感信息, 参数的大小首先只能传递几k的数据，一般应用在从服务器获取数据时用Get(比如各种查询), 删除数据一般也使用Get
post：请求参数在请求体中, 没有大小限制，一般应用在给服务器传递大量数据时使用Post请求,参数中包含敏感信息时

前后端分离

为何要学习异步请求呢，因为现在大都为前后端分离的模式，相较于同步请求来说异步请求更适用
前后端不分离,指在Controller中需要处理页面相关代码,就是将前端代码和后端代码混在一起写,如果存在手机端的话后端程序员需要准备另外一个Controller只提供数据(因为手机端是不需要html页面的) 这样对于后端Java程序员而言需要准备两套实现同一业务的代码,这样工程中会有大量重复代码
前后端分离,指Controller中只提供数据, 不管前端是浏览器还是手机一视同仁只返回数据, 这样浏览器客户端需要的页面则需要另外一次请求,这样后端程序员只需要写一套Controller代码即可
由于前后端分离后, 浏览器客户端是先请求页面,然后页面加载之后再请求数据,把请求的数据在展示到页面中,这个过程是页面局部刷新的需求,所以只能通过异步请求实现,所以以后所开发的工程只要是前后端分离则请求数据只能通过异步请求.

JSON

轻量级的数据交换格式
作用: 将复杂的数据封装到字符串中,然后进行网络数据传输
客户端向服务器发请求获取数据时,如果服务器返回给客户端的内容为一个对象或者一个集合,此时SpringMVC框架会自动将对象或集合转成JSON格式的字符串,然后将字符串转成二进制数据进行网络传输, 客户端接收到数据后先将二进制数据转回JSON格式的字符串然后Axios框架再将JSON格式的字符串转成数组.

异步版的登录注册

注册登录

<!--首页代码-->
<body>
<h1>异步请求</h1>
<div>
    <h1>{
    {info}}</h1>
    <a href="reg.html">注册页面</a>
    <a href="login.html">登录页面</a>
</div>
</body>
<!--引入VUE框架-->
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!--引入Axios框架-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    let v = new Vue({
       
        el:"body>div",
        data:{
       
            info:"测试成功"
        },
        methods:{
       

            f(){