axios框架入门教程

倔强的牛角
433 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情

写在前面😘

大一电子信息工程新生，请多多关照，希望能在掘金记录自己的学习历程！

一、axios框架概述

Axios 是对原生的AJAX进行封装，简化书写的一种框架。

Axios官网

二、axios基本使用

1️⃣引入 axios 的 js 文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2️⃣使用axios 发送请求，并获取响应结果

axios() 是用来发送异步请求的，小括号中使用 js 对象传递请求相关的参数

a.发送get请求

axios({
    method:"get",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
    alert(resp.data);
})

b.发送post请求

axios({
    method:"post",
    url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
    data:"username=zhangsan"
}).then(function (resp){
    alert(resp.data);
});
  • method 属性：用来设置请求方式的。取值为 get 或者 post。
  • url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url?参数名=参数值&参数名2=参数值2。
  • data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。

then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 ==回调函数==，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。

三、axios快速入门

1️⃣前端实现

  • 在webapp页面下创建axios.html文件
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

    </body>
    <!--导入Axios的js文件-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        // 1.发送GET请求
        axios({
            //发送axios请求
            method:"get",
            url:"http://localhost:8080/PracticeDemo/axios?username=bighorn"
        }).then(function (resp){
            //处理服务端响应
            alert(resp.data);
        })

        // 2.发送POST请求
        axios({
            //发送axios请求
            method:"post",
            url:"http://localhost:8080/PracticeDemo/axios",
            //post请求体
            data:"username=lzh"
        }).then(function (resp){
            //处理服务端响应
            alert(resp.data);
        })
    </script>
</html>

2️⃣后端实现

  • 创建一个接受请求的servlet，请求路径是/axios
@WebServlet(name = "AxiosServlet", value = "/axios")
public class AxiosServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 在控制台打印使用的请求方法
        System.out.println("使用的请求方法："+request.getMethod());
        //1. 接收请求参数
        String username = request.getParameter("username");
        //2. 响应数据
        response.getWriter().write("hello ,"+username);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

3️⃣演示结果

image-20220508151327633

四、 请求方法别名

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

1️⃣GET请求

  • get 请求 ： axios.get(url[,config])
axios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {
    alert(resp.data);
});

2️⃣POST请求

  • post 请求：axios.post(url[,data[,config])
axios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {
    alert(resp.data);
})

写在后面🍻

感谢观看啦✨
有什么不足，欢迎指出哦💖
掘金的运营同学审核辛苦了💗

avatar
文章
阅读
粉丝