同步请求和异步请求(利用axios)

文章目录

      • 同步请求和异步请求
      • 客户端如何发出异步请求?
      • GET和POST
      • 选择
      • 利用GET方式
        • 异步请求Get
        • 运行环境环境:springboot+SpringMVC+Mybatis+vue
        • 前端
        • 后端代码
      • 利用POST方式

同步请求和异步请求

  • 同步:指单线程依次做几件事
  • 异步:指多线程同时做几件事
  • 同步请求:指客户端只有一个主线程,主线程既要负责页面展示相关,也需要负责发请求获取数据,由于只有一个线程,当获取数据时不能同时显示着内容(清空页面),当服务器把数据响应回来之后再次显示内容,这样的话稚嫩那个实现页面的整体改变(整体刷新),无法实现页面的局部刷新.
  • 异步请求:指客户端由主线程负责页面展示相关,由子线程负责发请求获取数据,这样的话主线程只负责展示页面相关,页面内容就不需要清空,子线程得到数据后可以在原页面的基础上做改动,这种就叫做页面的局部刷新.

客户端如何发出异步请求?

  • 通过Axios框架发出异步请求
  • Axios框架是一个前端js框架,使用此框架的话需要在html页面引入axios.js文件
    https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js

GET和POST

localhost:8080/helloAxios?username=tom&password=123456&nick=汤姆
  • GET:请求参数在请求地址的后面,由于参数在地址中可见,所以不能传递敏感信息,参数大小有限制只能传递几k的数据
    • 应用场景:一半情况下查询请求都是用Get请求,删除数据一般也用Get请求
  • POST:请求参数是在请求体里面,由于参数在请求体中,用户不可见,所以可以传递敏感信息,没有大小的限制

选择

  • GET请求,如果参数是写在请求地址后面,通过拼接的方式传递参数.如果参数较多推荐使用post请求,参数包含敏感信息时使用,上传文件时使用POST

利用GET方式

异步请求Get

运行环境环境:springboot+SpringMVC+Mybatis+vue

同步请求和异步请求(利用axios)_第1张图片

前端

除了vue之外需要引入

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h1>异步请求测试h1>
<div>
    <input type="text" v-model="info">
    <input type="button" value="异步Get请求" @click="f1()">
div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js">script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>
<script>
    let v=new Vue({
        el:"body>div",
        data:{
            info:""
        },
        methods:{
            f1(){
                //发出异步的get请求  response代表响应,里面装着服务器的数据
                axios.get("/helloAxios?info="+v.info).then(function (response) {
                    //服务器成功响应后会执行此处代码
                    alert(response.data);
                })
            }
        }
    })
script>
body>
html>

后端代码

@RestController
public class AxiosController {

    @RequestMapping("/helloAxios")
     public String helleAxios(String info){
        return "测试成功"+info;
    }
}

利用POST方式

你可能感兴趣的:(框架,前端)