简单了解Vue的异步请求,axios-0.18.0.js插件实现异步

Vue的异步请求Vue 异步操作在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！使用步骤引入 axios 核心 js 文件。调用 axios 对象的方法来发起异步请求。调用 axios 对象的方法来处理响应的数据。案列结构前端代码(test.html)<!DOCTYPE html><html lang="en"><hea

努力敲代码买猪脚啃

1949人浏览 · 2020-06-30 12:31:34

努力敲代码买猪脚啃 · 2020-06-30 12:31:34 发布

Vue的异步请求

Vue 异步操作

在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！

使用步骤

引入 axios 核心 js 文件。
调用 axios 对象的方法来发起异步请求。
调用 axios 对象的方法来处理响应的数据。

案列结构

在这里插入图片描述

前端代码(test.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步操作</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="div">
        {{name}}
        <button @click="send()">发起请求</button>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"张三"
        },
        methods:{
            //上面绑定了点击事件,执行异步请求
            send(){
                // GET方式请求
                // axios.get("testServlet?name=" + this.name)
                //     .then(resp => {
                //         alert(resp.data);
                //     })
                //     .catch(error => {
                //         alert(error);
                //     })
                /*
                 在 Vue 中发送异步请求，本质上还是 AJAX。我们可以使用 axios 这个插件来简化操作！
                 使用步骤
                    1. 引入 axios 核心 js 文件。
                    2. 调用 axios 对象的方法来发起异步请求。
                    3. 调用 axios 对象的方法来处理响应的数据。

                */
                // POST方式请求,链式编程
                axios.post("testServlet","name="+this.name)
                    //请求后回调函数发起请求后,然后呢
                    //请求成功后的回调函数，通过response获取响应的数据
                    /*
                    箭头函数:
                        特点:它能够使用上下文的this
                     */
                    .then(resp => {
                        alert(resp.data);
                    })
                    //请求失败后的回调函数，通过error获取错误信息
                    .catch(error => {
                        alert(error);
                    })


				//第二种模拟详细流程使用的饿了么ui
				 //说明表单校验通过,发生异步请求
                        //对响应的结果,axios对后端返回的结果进行了封装,res.data,这个data就是返回的json数据,,,也可以从res中获取响应码等数据
                        axios.post("/checkItem/edit.do",this.formData).then((res)=>{
                            //提交后关闭编辑窗口
                            this.dialogFormVisible4Edit=false;
                            //对返回的数据进行判断是否成功
                            if(res.data.flag){
                                //说明成功
                                this.$message({
                                    message:res.data.message,
                                    type:"success"
                                })
                            }else {
                                //说明失败
                                this.$message.error(res.data.message);
                                return false;
                            }
                        }).finally(()=>{
                            //finally()方法,表示异步提交后,无论成功还是失败,都会执行的方法
                            //无论成功还是失败,都调用表单查询方法
                            this.findPage();
                        }).catch((res)=>{
                            //异步请求失败,会走到catch这个方法
                            this.$message.error("异步请求失败~~~");
                        })	
					
                //链式编程
                // axios.get("testServlet?name="+this.name).then(resp =>{alert(resp.data)}).catch(error=>{alert(error)});
            }
        }
    });
</script>
</html>

后端代码(Servlet)

package com.fs;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/testServlet")
public class TestServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求和响应的编码
        req.setCharacterEncoding("UTF-8");
        resp.setContentType("text/html;charset=UTF-8");

        //获取请求参数
        String name = req.getParameter("name");
        System.out.println(name);

        //响应客户端
        resp.getWriter().write("请求成功");
    }

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