異步請求是指在程序執(zhí)行期間，不需要等待其中某個操作完成后再進行下一個操作，而是直接執(zhí)行下一個操作，等待該操作完成后再回調(diào)處理。Vue中使用異步請求可以讓前端頁面和后臺數(shù)據(jù)庫之間進行快速數(shù)據(jù)傳輸與處理。

Vue中發(fā)送異步請求需要借助axios插件，在組件中通過axios進行http請求，獲取后臺數(shù)據(jù)。axios是一款基于Promise的HTTP庫，可以較為方便地進行異步數(shù)據(jù)請求。

//安裝axios插件
npm install axios

在vue的組件中需要先引入axios庫，然后再使用該庫進行后臺數(shù)據(jù)的請求。axios的使用方法如下所示：

import axios from 'axios'
export default {
data () {
return {
dataList: []
}
},
mounted () {
this.getInfo()
},
methods: {
getInfo () {
axios.get('http://localhost:8080/info') //這里獲取的是http://localhost:8080/info路徑的數(shù)據(jù)
.then(function (response) {
this.dataList = response.data
})
.catch(function (error) {
console.log(error)
})
}
}
}

在vue組件中使用axios發(fā)送http Get請求，獲取后臺數(shù)據(jù)，從而實現(xiàn)前端與后臺數(shù)據(jù)的通信，axios的使用也很方便。

//使用axios發(fā)送http Get請求
this.axios.get('/userInfo').then((res) =>{
console.log(res)
})

在實際使用中需要根據(jù)后臺接口的具體情況進行設(shè)置，如設(shè)置header、timeout、data等信息。在axios中可以通過配置對象的方式來進行設(shè)置，配置文件如下所示。

//配置對象
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.timeout = 60000
axios.defaults.transformRequest = function (data) {
if (!data) {
return data
}
let params = []
Object.keys(data).forEach(function (key) {
params.push(key + '=' + data[key])
})
return params.join('&')
}

在使用axios進行后臺數(shù)據(jù)請求的過程中，需要處理異常情況，防止因為網(wǎng)絡(luò)或服務(wù)器等問題引起的錯誤。axios中使用catch函數(shù)來進行異常處理，如下所示。

//對錯誤進行處理
this.axios.get('/userInfo').then((res) =>{
console.log(res)
}).catch(error =>{
console.log(error)
})

總的來說，vue中使用axios進行異步請求后臺數(shù)據(jù)，是一種非常便捷的方式。通過完善的配置實現(xiàn)與后臺數(shù)據(jù)的快速傳輸。同時使用catch函數(shù)處理異常情況，保證數(shù)據(jù)傳輸?shù)目煽啃浴?/p>