在前端開發(fā)中，使用ajax請求數(shù)據(jù)已經(jīng)成為一種基本的開發(fā)技能，Vue作為現(xiàn)在比較流行的前端框架，在進(jìn)行數(shù)據(jù)交互時(shí)也需要使用ajax。本篇文章將詳細(xì)介紹Vue如何調(diào)用ajax。

一般情況下，我們可以通過Vue提供的$http插件進(jìn)行ajax調(diào)用，這里使用Vue2.x版本為例。

// main.js中引入$http插件
import VueResource from 'vue-resource'
Vue.use(VueResource)

在組件中使用$http插件：

export default {
data() {
return {
userList: []
}
},
mounted() {
// 調(diào)用方法獲取數(shù)據(jù)
this.getUserList()
},
methods: {
getUserList() {
// 發(fā)送ajax請求
this.$http.get('/api/userList').then((response) =>{
this.userList = response.data
}, (response) =>{
console.log(response)
})
}
}
}

上述代碼中，我們首先在main.js中引入VueResource插件，然后在組件中使用this.$http.get('url')的方式發(fā)送get請求，url為后端api接口地址，獲取到數(shù)據(jù)之后將響應(yīng)數(shù)據(jù)賦值給組件的data中的userList。

如果要發(fā)送post請求，則需要在get()方法上進(jìn)行修改：

this.$http.post('/api/userList', {params}).then((response) =>{
this.userList = response.data
}, (response) =>{
console.log(response)
})

其中，第一個(gè)參數(shù)傳入接口地址，第二個(gè)參數(shù)為請求體參數(shù)。

如果需要發(fā)送表單數(shù)據(jù)，可以使用VueResource提供的formData()方法：

let formData = new FormData();
formData.append('name', this.name);
formData.append('age', this.age);
this.$http.post('/api/userAdd', formData).then((response) =>{
console.log(response.data)
}, (response) =>{
console.log(response)
});

如果需要設(shè)置請求頭，在請求前可以先設(shè)置：

this.$http.headers.common['Authorization'] = 'Bearer ' + token;
// 或者
this.$http.headers.put['Content-Type'] = 'application/json;charset=utf8';

以上就是Vue中調(diào)用ajax的基本用法，當(dāng)然，VueResource還提供了其他的方法，比如jsonp、jsonp Promise、resource、resource Promise等等，具體可以參考VueResource的官方文檔。