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>

 

posted @ 2021-08-25 10:14  AnnLing  阅读(256)  评论(0)    收藏  举报