Axios 异步框架简明笔记

发表于 更新于 本文字数： 2.7k 阅读时长 ≈ 2 分钟

Axios 异步框架简介

Axios 对原生的 AJAX 进行封装，简化书写

Axios 快速入门

  1. 引入 axios 的 js 文件
  2. 使用 axios 发送请求，并获取相应结果

详细步骤如下

一、在 webapp 下新建 js 文件夹，拷贝 axios 的 js 文件
二、新建 html 文件，引入 js 文件

1
<script src="js/axios-0.18.0.js"></script>

三、创建 AxiosServlet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
public class AxiosServlet extends HttpServlet {  
    @Override  
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
        System.out.println("get...");  
        //1.接收请求参数  
        String username = request.getParameter("username");  
        System.out.println(username);  
        //2.响应数据  
        response.getWriter().write("hello Axios");  
    }  
  
    @Override  
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
        System.out.println("post...");  
        this.doGet(request, response);  
    }  
}

四、在 html 中编写 js 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="js/axios-0.18.0.js"></script>

<script>
    //1.get
    /* axios({
       method:"get",
       url:"http://localhost:8080/ajax-dmeo/axiosServlet?username=zhangsan"
     }).then(function (resp){
         alert(resp.data);
     })*/

    //2.post
    axios({
        method: "get",
        url: "http://localhost:8080/ajax-dmeo/axiosServlet",
        //data是请求参数
        data: "username=zhangsan"
    }).then(function (resp) {
        alert(resp.data);
    })


</script>

</body>
</html>

代码说明及注意事项

  1. axios 大括号中的为 Java 中的对象
  2. .then() 方法是一个回调函数，如果响应接收到了的话就自动执行
  3. data: "username=zhangsan"，data 是请求参数。这里可以传 JSON 格式的数据。除此之外，还可以传 JS 对象类型的数据（JSON 数据格式可以和 Java 中的对象数据格式通过某些方式进行转换），因为 Axios 框架会自动将这个 JS 对象转为 JSON 的数据格式
  4. Get 和 Post 两种方式传递参数的方式不一样，所以在 axios 方法中传入的对象（大括号包裹的内容）的方式不一样，一个写在 URL 中，一个写在 Data 属性中
  5. .then() 回调函数中，function 函数中的参数名可以不为 resp，随便一个都行，保持下面对象（resp.data）和这个参数名（resp）一致即可
  6. resp.data 即服务器端的 Servlet 响应过来的数据 
1
2
3
4
5
6
7
8
9
10
11
flowchart RL
    b1-->|"username = &quot;zhangsan&quot;"|servlet1
    servlet1-->|data|b1
    subgraph Browsers  
    b1
    b2
    end  
    subgraph servers  
    servlet1
    servlet2
    end

简单来说，Axios 实现的功能就是：通过 get 或 post 给 Servlet 传递一个参数（username=“zhangsan”），然后 Servlet 接收到这个参数，就可以进行判断的操作，根据判断的结果在给浏览器发送一个响应。浏览器收到响应数据（date）之后，就可以做出一些操作，比如弹出窗口操作。

Axios 请求方式别名

为了方便起见，Axios 已经为所有支持的请求方法提供了别名

发送 Get 请求

1
2
3
4
//1. Get方式  
axios.get("http://localhost:8080/ajax-dmeo/axiosServlet?username=zhangsan").then(function (resp){  
    alert(resp.data);  
})

发送 Post 请求

1
2
3
axios.post("http://localhost:8080/ajax-dmeo/axiosServlet?username=zhangsan","username=zhangsan").then(function (resp){  
    alert(resp.data);  
})

原生的 Axios 书写方式 VS 别名的简化书写方式

  • 原生的书写格式：阅读性较好
  • 别名的方式：代码量少，基本上只需要填写必要的参数信息