深入解析与实践：基于VUE的axios异步请求应用指南

发布时间：2024年01月24日

一、Ajax回顾

1、Ajax介绍

Ajax 是指一种创建交互式网页应用的开发技术。Ajax = 异步 JavaScript 和 XML。

2、Ajax作用

Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。

3、异步和同步

浏览器访问服务器的方式

同步访问: 客户端必须等待服务器端的响应,在等待过程中不能进行其他操作
异步访问: 客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作

4、代码演示

ajax.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>ajax</title>
</head>
<body>
   <input type="text">
   <input type="button" value="jQuery发送异步请求" οnclick="run()">

</body>

<script src="./jquery-1.8.3.min.js"></script>

<script>

   function run(){
       //ajax请求
       $.ajax({
           url:"${pageContext.request.contextPath}/ajax",
           async:true,
           data:{name:"张三"},
           type:"post",
           dataType:"text",
           success:function (res) {
               console.log(res);
               alert("响应成功,res:  " + res);
           },
           error:function () {
               alert("响应失败！")
           }
       });
   }

</script>

</html>

servlet

package com.example.ajax_demo01;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "AjaxServlet", value = "/ajax")
public class AjaxServlet extends HttpServlet {
   @Override
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       this.doPost(request, response);
   }

   @Override
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       //1、获取请求数据
       String name = request.getParameter("name");
       System.out.println("ajax发送的数据：" + name);

       //模拟延时响应
       try {
           Thread.sleep(3000);
       } catch (InterruptedException e) {
           e.printStackTrace();
       }

       //2、响应数据
       response.setContentType("html/text;charset=utf8");
       response.getWriter().write("响应数据！");

   }
}

运行tomcat，测试

二、axios

1、axios简介

axios是VUE中结合网络数据进行应用的开发，是目前十分流行网络请求库,专门用来发送请求,其内部还是ajax,进行封装之后使用更加方便。

axios作用: 在浏览器中可以帮助我们完成 ajax异步请求的发送.

2、axios入门

1> 导包

<!-- 官网提供的 axios 在线地址 -->
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2> 请求方式

get

axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
{});

在这里插入图片描述

post

axios.post(
    地址,
    {key:value,key2:value2})
    .then(
    function(response){},
    function(error){})

3> 和 jQuery 方式对比

在这里插入图片描述

4> 入门案例

接口介绍

有两个公开接口可供测试使用

接口1:随机笑话

请求地址:https://autumnfish.cn/api/joke/list
请求方法:get
请求参数:num(笑话条数,数字)
响应内容:随机笑话

接口2:用户注册

请求地址:https://autumnfish.cn/api/user/reg
请求方法:post
请求参数:username(用户名,字符串)
响应内容:注册成功或失败

测试代码

get测试

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>axios测试</title>
 </head>
 <body>
   <div id="app">
     <input type="button" value="get请求" @click="get" />
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script src="js/axios.min.js"></script>
 <script>
   var VM = new Vue({
     el: "#app",
     data: {},
     methods: {
       /*
       请求地址:https://autumnfish.cn/api/joke/list
       请求方法:get
       请求参数:num(笑话条数,数字)
       响应内容:随机笑话
       */
       get: function () {
         axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
           function (res) {
             alert("请求成功！res: " + res);
           },
           function (err) {
             alert("请求失败！err: " + err);
           }
         );
       },
     },
   });
 </script>
</html>

测试结果

post测试修改代码

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>axios测试</title>
 </head>
 <body>
   <div id="app">
     <!-- <input type="button" value="get请求" @click="get" /> -->
     <input type="button" value="post请求" @click="post" />
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script src="js/axios.min.js"></script>
 <script>
   var VM = new Vue({
     el: "#app",
     data: {},
     methods: {
       /*
       请求地址:https://autumnfish.cn/api/joke/list
       请求方法:get
       请求参数:num(笑话条数,数字)
       响应内容:随机笑话
       */
       get: function () {
         axios.get("https://autumnfish.cn/api/joke/list?num=1").then(
           function (res) {
             alert("请求成功！res: " + res);
           },
           function (err) {
             alert("请求失败！err: " + err);
           }
         );
       },
       /*
     用户注册
       请求地址:https://autumnfish.cn/api/user/reg
       请求方法:post
       请求参数:username:"用户民"
       响应内容:注册成功或失败
     */
       post: function () {
         axios
           .post("https://autumnfish.cn/api/user/reg", {
             usernmae: "你好hello",
           })
           .then(
             function (res) {
               alert("请求成功！res: " + res);
             },
             function (err) {
               alert("请求失败！err: " + err);
             }
           );
       },
     },
   });
 </script>
</html>

测试结果

注：本人测试需在edge浏览器，否则链接不上

3、总结

axios 使用get或者post方法,就可以发送请求
then方法中的回调函数,会在请求成功或者请求失败的时候触发
通过回调函数的形参可以获取响应的内容,或者错误信息

三、获取笑话案例

1、需求

通过vue+axios 完成一个获取笑话的案例.

2、接口

 请求地址:https://autumnfish.cn/api/joke
 请求方法:get
 请求参数:无
 响应内容:随机笑话

3、代码

代码

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>获取笑话</title>
 </head>
 <body>
   <div id="app">
     <input type="button" value="获取一个笑话" @click="getJoke" />
     <p>{{joke}}</p>
   </div>
 </body>

 <script src="js/vue.min.js"></script>
 <script src="js/axios.min.js"></script>
 <script>
   var Vm = new Vue({
     el: "#app",
     data: {
       joke: "",
     },
     methods: {
       getJoke: function () {
         /*
       请求地址:https://autumnfish.cn/api/joke
       请求方法:get
       请求参数:无
       响应内容:随机笑话
       */
         var tmp = this; //回调函数中不能直接获取this，需要定义变量传入
         axios.get("https://autumnfish.cn/api/joke").then(
           function (res) {
             //获取笑话,笑话在响应的data中
             tmp.joke = res.data;
           },
           function (err) {}
         );
       },
     },
   });
 </script>
</html>

注意：回调函数中不能直接获取this，需要定义变量传入

测试结果

文章来源:https://blog.csdn.net/CAUC_lin/article/details/135824785
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！