vue-使用axios发送ajax请求
一、简介
vue本身不支持发送ajax请求，需要使用vue-resourse（vue1.0官方推荐使用）、axios（vue2.0官方推荐使用）等插件来支持发送ajax请求。
axios是一个基于Promise的请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resourse进行更新和维护。
参考：github上搜索axios，查看API文档。https://github.com/axios/axios
二、使用axios发送ajax请求
2.1安装axios并引入
使用npm下载axios，运行cnpm install axios进行安装axios
使用npm下载axios，找到dist下的js文件。
复制axios.min.js文件，放到项目js文件夹下，便于引用。
2.2 axios的基本用法
请参考：https://github.com/axios/axios
方式1：axios(config)
1 //发送ajax请求(get)2 sendByGet(){
3 axios({
4 method:\'get\',
5 url:"../node_modules/user.json",
6 responseType: \'json\', //这句话一定要写，否则会报错
7 }).then(res=>{
8 console.log("get请求成功",res.data)
9 }).catch(err=>{
10 console.log("get请求失败",err)
11 })
12 },
1 //发送ajax请求(post)2 sendByPost(){
3 axios({
4 method:\'get\',
5 url:"../node_modules/user.json",
6 responseType:\'json\'
7 }).then(res=>{
8 console.log("post请求成功",res.data)
9 }).catch(err=>{
10 console.log("post请求失败",err)
11 })
12 },
responseType: \'json\', //这句话如果不写，就会报错如下：
方式2：axios.get(url[，config])；
传参方式：1）通过url传参，2）通过params选项传参
1 //get方式发送ajax请求(写法1)2 sendGet(){
3 axios.get(\'../node_modules/serverGet.php?name=alice&age=23\') //通过url传参
4 .then(res=>{
5 console.log(\'get方法请求成功\',res)
6 }).catch(err=>{
7 console.log(\'get方法请求失败\',err)
8 })
9 },
10 //get方式发送ajax请求(写法2)
11 sendGet(){
12 axios.get(\'../node_modules/serverGet.php\',{ //通过params选项传参
13 params:{
14 name:\'alice\',
15 age:23
16 }
17 })
18 .then(res=>{
19 console.log(\'get方法请求成功\',res)
20 }).catch(err=>{
21 console.log(\'get方法请求失败\',err)
22 })
23 },
方式3：axios.post(url，data，[options])；
axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form data格式，所以参数必须要以键值对的形式传递。不能以json的方式来传参。
传参方式：1）自己拼接为键值对 2）使用transformRequest，在请求发送前将请求数据进行转换 3）如果使用模块化开发，可以使用qs（query string）模块进行转换。
1 //post方式发送ajax请求2 sendPost(){
3 axios.post(\'../node_modules/serverPost.php\',\'name=alice&age=23\'
4 ).then(res=>{
5 console.log(\'post方法请求成功\',res)
6 }).catch(err=>{
7 console.log(\'post方法请求失败\',err)
8 })
9 },
axios本身不支持发送跨域的请求，没有提供相应的API，作者暂时没计划计划在axios添加支持发送跨域的请求，所以只能使用第三方库。
整体演示示例：
1 <!DOCTYPE html>2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>发送ajax请求</title>
6 <!-- 引入vue-->
7 <script src="../js/vue.js"></script>
8 <script src="../js/axios.min.js"></script>
9 <script>
10 window.onload=function(){
11 new Vue({
12 el:\'#hello\',
13 //data用来存储数据
14 data:{
15
16 },
17 //methods用来存储方法
18 methods:{
19 //发送ajax请求(get)
20 sendByGet(){
21 axios({
22 method:\'get\',
23 url:"../node_modules/user.json",
24 responseType: \'json\', //这句话一定要写，否则会报错
25 }).then(res=>{
26 console.log("get请求成功",res.data)
27 }).catch(err=>{
28 console.log("get请求失败",err)
29 })
30 },
31
32 //发送ajax请求(post)
33 sendByPost(){
34 axios({
35 method:\'get\',
36 url:"../node_modules/user.json",
37 responseType:\'json\'
38 }).then(res=>{
39 console.log("post请求成功",res.data)
40 }).catch(err=>{
41 console.log("post请求失败",err)
42 })
43 },
44
45 //get方式发送ajax请求(写法1)
46 sendGet(){
47 axios.get(\'../node_modules/serverGet.php?name=alice&age=23\') //通过url传参
48 .then(res=>{
49 console.log(\'get方法请求成功\',res)
50 }).catch(err=>{
51 console.log(\'get方法请求失败\',err)
52 })
53 },
54 //get方式发送ajax请求(方式2)
55 sendGet(){
56 axios.get(\'../node_modules/serverGet.php\',{ //通过params选项传参
57 params:{
58 name:\'alice\',
59 age:23
60 }
61 })
62 .then(res=>{
63 console.log(\'get方法请求成功\',res)
64 }).catch(err=>{
65 console.log(\'get方法请求失败\',err)
66 })
67 },
68
69 //post方式发送ajax请求
70 sendPost(){
71 axios.post(\'../node_modules/serverPost.php\',\'name=alice&age=23\')
72 .then(res=>{
73 console.log(\'post方法请求成功\',res)
74 })
75 .catch(err=>{
76 console.log(\'post方法请求失败\',err)
77 })
78 },
79
80 },
81 })
82 }
83 </script>
84 </head>
85 <body>
86 <div id="hello">
87 <button @click=\'sendByGet\'>发送ajax请求(get)</button>
88 <button @click=\'sendByPost\'>发送ajax请求(post)</button>
89 <button @click=\'sendGet\'>get方式发送ajax请求</button>
90 <button @click=\'sendPost\'>post方式发送ajax请求</button>
91 </div>
92 </body>
93 </html>
以上是 vue-使用axios发送ajax请求 的全部内容， 来源链接： utcz.com/z/377471.html
