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

一、Ajax回顾

1、Ajax介绍

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

2、Ajax作用

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

3、异步和同步

浏览器访问服务器的方式

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

4、代码演示

  1. ajax.jsp

    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>
  2. servlet

    java 复制代码
    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("响应数据!");
    
       }
    }
  3. 运行tomcat,测试

二、axios

1、axios简介

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

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

2、axios入门

1> 导包

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

2> 请求方式

  • get

    js 复制代码
    axios.get(地址?key=value&key2=value2).then(function(response){},function(error)
    {});
  • post

    js 复制代码
    axios.post(
        地址,
        {key:value,key2:value2})
        .then(
        function(response){},
        function(error){})

3> 和 jQuery 方式 对比

4> 入门案例

  1. 接口介绍

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

    • 接口1:随机笑话

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

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

    • get测试

      js 复制代码
      <!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测试 修改代码

      js 复制代码
      <!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、接口

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

3、代码

  1. 代码

    js 复制代码
    <!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,需要定义变量传入

  2. 测试结果

相关推荐
好奇的菜鸟12 分钟前
typeof 和 as 关键字
javascript·typescript
nbsaas-boot14 分钟前
消息队列场景下的前端设计:如何优化用户体验
前端·ux
sususugaa17 分钟前
前端框架Vue3——响应式数据,v-on,v-show和v-if,v-for,v-bind
开发语言·前端·vue.js·前端框架
珹洺1 小时前
从 HTML 到 CSS:开启网页样式之旅(三)—— CSS 三大特性与 CSS 常用属性
前端·javascript·css·网络·html·tensorflow·html5
T^T尚6 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志6 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3927 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
GISer_Jing7 小时前
React渲染相关内容——渲染流程API、Fragment、渲染相关底层API
javascript·react.js·ecmascript
山猪打不过家猪7 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js
前端青山7 小时前
React事件处理机制详解
开发语言·前端·javascript·react.js