Vue入门（四）Vue异步操作_vue 异步方法-CSDN博客

本文链接：https://blog.csdn.net/kong7906928/article/details/141113921

一、Vue异步操作

二、Vue异步操作 Axios示例

一、Vue异步操作

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

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

- axios常用方法

get：发起Get方式请求

post：发起Post方式请求

then：请求成功后的回调函数，通过response获取相应数据

catch：请求失败后的回调函数，通过error获取错误信息

二、Vue异步操作 Axios示例

Axios发送异步get/Post请求示例代码：

<!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);
                //     })

                // POST方式请求
                axios.post("testServlet","name="+this.name)
                    .then(resp => {
                        alert(resp.data);
                    })
                    .catch(error => {
                        alert(error);
                    })
            }
        }
    });
</script>
</html>