第十一章：AJAX异步交互
有话说在前面
兄弟如果你看到了这里，你现在距离完全会用vue已经非常接近了。在vue中，他自己有一套专门解决跨域，和ajax的组件，名字叫做axios。
axios
你可能会问，vuecli里面其实完全可以再装一个jquery。我用惯了$.ajax，为什么还要用这个Axios。
其实你说的完全没错，因为vue本身跟react和angular的最大区别就再于，它并不是一个嵌入式框架，它对js和dom本身的管理非常宽松。你愿意再内置一个jquery，用jquery做特效，用vue管理数据。两个框架配合，那也完全没有问题。
但是你得清楚不是每个人都有能力同时掌握两种框架。本着用就用一套的强迫症心里，我推荐你还是使用axios。虽然乔丹的衣服便宜，但是我更重nike上脚以后实战。毕竟老子来打球就是为了得分。
说了半天，你还没有告诉我，到底Axios是干什么的。他其实就是用来管理接口的，你可以理解为他就是jquery中的ajax方法。
Axios本身是基于es6的。所以在他同时有.then和catch两个方法，then里面的参数是response，catch里面的参数是error。如果你对es6还不太熟悉，请查阅我的后续es6教程。
首先安装axios，你不通过npm安装直接引入也完全没问题。
开始安装
1.直接在页面引入：
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
用的时候直接按照es6那样用就行了：
.then后面就是成后后的回调方法，然后response就是返回值。
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.then(function () {
// always executed
});
实际例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>党云龙vue教程-axios</title>
</head>
<body>
<div id="app">
<div>{{message}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:3
},
methods: {
},
mounted: function() {
var that = this;
axios.get('/user?ID=12345').then(function (response) {
that.message = "ajax获取成功！"
})
}
})
</script>
</body>
</html>
到这里，你已经可以正常的获取到ajax数据了。
2.通过npm来安装
注意：如果你对npm包管理不熟悉，建议你跳过这一章，先阅读后面关于vuecli的使用方法的章节！
npm install axios -s-d
接下来在你的项目中引用 这一步是要放在main.js中的
import axios from 'axios'
Vue.prototype.axios = axios
使用的时候只需要这样调用一下即可。
this.axios({
method: 'post',
url: 'dangyunlong/find.php',
params: {
pages: 1
}
}).then(function(response) {
console.log(response);
})
修改proxyTable配置
但是注意，如果你是在vuecli中，你直接访问你的域名是不行的，会遇到跨域的问题，此时
你需要修改config下的index.js
proxyTable: {
'/dangyunlong': {
target: 'http://www.dangyunlong.com/',
changeOrigin: true,
pathRewrite: {
'^/dangyunlong': ''
}
}
},
注意这里的/dangyunlong 跟你在axios中请求的需要是一样的。
调用的时候/可以省略。
另外注意
有的时候，你再页面中直接生成了data.data中的值 这个时候会报错undefined
那是因为你这个数据，的容器上面没有v-if 就是，有数据的时候，才渲染，没有数据的时候就不应该渲染出来。
不要直接再页面上渲染一个不存在的值，例如说data.data.val 这个值是ajax取回来的，你直接{{data.data.val}}
就会报错。因为刚开始渲染的时候值还不存在呢。。
你只有一种办法就是，你先声明一个值val:1，然后再ajax的回调函数中 赋值：this.val = this.data.val
这样就不会报错了
网友评论