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