vue2.x ajax,【前端学习】Vue2.x搭配Axios执行ajax请求

在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) {

// 两个请求都执行完成

}));