一、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>