1.axios的get请求
1.1 先引入Vue 和 axios 的文件
1 <script src="./js/vue2.js"></script> 2 <!-- 引入axios --> 3 <script src="./js/axios.js"></script>
1.2 这里的实例中 是在 mounted 钩子函数中发送的get请求，意思是在页面加载的执行发送 代码如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>axios</title>
8 <!-- 引入Vue文件 -->
9 <script src="./js/vue2.js"></script>
10 <!-- 引入axios -->
11 <script src="./js/axios.js"></script>
12 </head>
13 <body>
14 <div id="app"></div>
15
16 <script>
17 var vm = new Vue({
18 el: ‘#app‘,
19 data: {
20
21 },
22 mounted() { //这里使用mounted 钩子函数 是在页面加载的时候就发送get请求
23 axios.get(‘请求的接口‘).then(res => { //.then是数据请求成功之后的回调函数
24 console.log(res); //res是返回的数据
25 console.log(res.data) //axios中我们真正需要的数据在data中
26 }).catch(error => { //.catch是请求失败的回调函数
27 console.log(error)
28 })
29 }
30 })
31 </script>
32 </body>
33 </html>
1.3 github 上的案例是这么写的，上述案例中用的是ES6的箭头函数
axios.get(‘/user?ID=12345‘) //接口
.then(function (response) { //成功的回调
console.log(response);
})
.catch(function (error) { //失败的回调
console.log(error);
})
// 也可以用以下的写法：
axios.get(‘/user‘, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
2. axios 的 post 请求
2.1 同get请求一样 先引入文件
2.2 实例代码 注意：在GitHub中 post请求的接口中 参数拼接与get不同 没有parans字样。 我自己的代码示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>axios</title>
8 <!-- 引入Vue文件 -->
9 <script src="./js/vue2.js"></script>
10 <!-- 引入axios -->
11 <script src="./js/axios.js"></script>
12 </head>
13 <body>
14 <div id="app"></div>
15 <script>
16 var vm = new Vue({
17 el: ‘#app‘,
18 data: {
19
20 },
21 mounted() { //这里使用mounted 钩子函数 是在页面加载的时候就发送get请求
22 axios.post(‘接口地址‘, { //通过对象传参
23 name: ‘hahaha‘
24 }).then(res =>{
25 console.log(res.data)
26 }).catch(error => {
27 console.log(error)
28 })
29 }
30 })
31 </script>
32 </body>
33 </html>
2.3 GitHub 上的示例
1 axios.post(‘/user‘, {
2 firstName: ‘Fred‘,
3 lastName: ‘Flintstone‘
4 })
5 .then(function (response) {
6 console.log(response);
7 })
8 .catch(function (error) {
9 console.log(error);
10 });
3. vue-resource （不推荐使用）
由于axios 不支持 jsonp 这种跨域请求的方式 所以之前一直再用 vue-resource ，但是由于官方停止维护了 ，并且推荐我们使用axios
3.1 jsonp 跨域的原理 ： 简单的一句话总结 就是动态的创建了一个 script 标签 通过src 请求
3.2 示例代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>axios</title>
8 <!-- 引入Vue文件 -->
9 <script src="./js/vue2.js"></script>
10 <!-- 引入axios -->
11 <script src="./js/axios.js"></script>
12 </head>
13 <body>
14 <div id="app"></div>
15 <script>
16 var vm = new Vue({
17 el: ‘#app‘,
18 data: {
19
20 },
21 mounted() { //这里使用mounted 钩子函数 是在页面加载的时候就发送get请求
22 //他会在Vue的 prototype 上绑定一个$http对象
23 this.$http.jsonp(‘数据接口‘).then(res => {
24 console.log(res.body); // 他的数据存放在body属性中
25 }), error => {
26 console.log(error)
27 }
28 }
29 })
30 </script>
31 </body>
32 </html>
原文地址：https://www.cnblogs.com/lirun-rainbow/p/10356046.html
时间： 2024-11-04 20:00:58