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

一、Ajax回顾

1、Ajax介绍

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

2、Ajax作用

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

3、异步和同步

浏览器访问服务器的方式

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

4、代码演示

  1. ajax.jsp

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    
    
       ajax
    
    
       
       
    
    
    
    
    
    
    
    
    
    
  2. 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("响应数据!");
    
       }
    }
    
    
  3. 运行tomcat,测试

    深入解析与实践:基于VUE的axios异步请求应用指南_第1张图片

二、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)
    {});
    

    深入解析与实践:基于VUE的axios异步请求应用指南_第2张图片

  • post

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

3> 和 jQuery 方式 对比

深入解析与实践:基于VUE的axios异步请求应用指南_第3张图片

4> 入门案例

  1. 接口介绍

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

    • 接口1:随机笑话

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

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

    • 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>
      
      
    • 测试结果

      深入解析与实践:基于VUE的axios异步请求应用指南_第4张图片

    • 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>
      
      
    • 测试结果

      深入解析与实践:基于VUE的axios异步请求应用指南_第5张图片

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

3、总结

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

三、获取笑话案例

1、需求

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

2、接口

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

3、代码

  1. 代码

    <!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. 测试结果

    深入解析与实践:基于VUE的axios异步请求应用指南_第6张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)