在Vue1.x中,官方推荐使用的ajxa库是vue-resource。到了Vue2.x,官方(尤大)推荐的ajax库改为了Axios,按照说法是因为已有一个更完备的轮子,就不需要造一个新的。
使用Axios,可以通过npm或者直接引入js的方式进行。
npm install axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
【注意】使用npm方式构建的话,要留意一点,vue-resource的使用方式通常是
import VueResource from 'vue-resource'
Vue.use(VueResource);
在Axios里,由于其只是一个第三方库,因此无法直接使用Vue.use(...),必须在使用到的地方进行import。
import Axios from ('axios')
Axios.get('...');
当然,也有一种办法,就是修改原型链
Vue.prototype.$ajax = axios;
但是修改原型链的办法也有一个缺陷,如果搭配Vuex使用时,在main.js中修改的原型链无法传达至store/index.js中。
因此最好还是老老实实用引入。
同样地,在vue-resource中支持回调方法中直接调用this返回vue对象本身
export default {
data() {
return {
users: []
}
},
methods: {
find() {
this.$http.get('/users',
function (response) {
this.users = response.body
})
}
}
}
在Axios中,直接使用this返回的是回调方法本身,需要使用以下2种办法来处理
1、使用bind(this)
this.$http.get('/users')
.then(function (response) {
console.log(this);
}.bind(this))
.catch(function (error) {
console.log(this);
})
2、【推荐】使用es6的箭头函数
this.$http.get('/users')
.then(response => {
console.log(this);
})
.catch(error => {
console.log(this);
});
Axios的一些api:
axios.request(config)
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
在使用别名方法时, url
、method
、data
这些属性都不必在配置中指定。
处理并发请求的助手函数
function getStudent() {
return axios.get('/users');
}
function getTeacher() {
return axios.get('/teachers');
}
Axios.all([getStudent(), getTeacher()])
.then(axios.spread(function (acct, perms) {
// 两个请求都执行完成
}));