首页 > 语言 > JavaScript > 正文

vue发送ajax请求详解

2024-05-06 15:29:00
字体:
来源:转载
供稿:网友

vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现

axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护

本文为大家介绍vue使用axios发送AJAX请求

首页安装并引入axios

1、npm install axios -S        #直接下载axios组件,下载完毕后axios.js就存放在node_modules/axios/dist中

2、网上直接下载axios.min.js文件

3、通过script src的方式进行文件的引入<script src="js/axios.min.js"></script>

axios基本使用方法

发送get请求

1、基本使用格式

格式1:axios([options]) #这种格式直接将所有数据写在options里,options其实是个字典

格式2:axios.get(url[,options]);

2、传参方式:

通过url传参

通过params选项传参

下面我们来看一个vue发送ajax get请求实例代码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>发送AJAX请求</title>  <script src="js/vue.js"></script>  <script src="js/axios.min.js"></script>  <script>    window.onload=function(){      new Vue({        el:'#itany',        data:{          user:{            name:'alice',            age:19          },        },        methods:{          send(){            axios({              method:'get',              url:'http://www.baidu.com?name=tom&age=23'            }).then(function(resp){              console.log(resp.data);            }).catch(resp => {              console.log('请求失败:'+resp.status+','+resp.statusText);            });          },          sendGet(){            axios.get('server.php',{              params:{                name:'alice',                age:19              }            })            .then(resp => {              console.log(resp.data);            }).catch(err => {       //              console.log('请求失败:'+err.status+','+err.statusText);            });          },        }      });    }  </script></head><body>  <div id="itany">    <button @click="send">发送AJAX请求</button>    <button @click="sendGet">GET方式发送AJAX请求</button>  </div></body></html>

发送post请求(push,delete的非get方式的请求都一样)

1、基本使用格式

格式:axios.post(url,data,[options]);

2、传参方式

1、自己拼接为键值对

2、使用transformRequest,在请求发送前将请求数据进行转换

3、如果使用模块化开发,可以使用qs模块进行转换

4、注释:axios默认发送post数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选