在Vue.js中,我們常常需要與后端進行數(shù)據(jù)交互。為此,Vue.js提供了幾個選項來發(fā)起HTTP請求:
new Vue({ // ... created: function () { // 發(fā)送 GET 請求 this.$http.get('/someUrl').then(response =>{ // 獲取后端返回的數(shù)據(jù) this.someData = response.body }, response =>{ console.log('請求失敗') }) } })
上面這段代碼演示了如何使用Vue.js的$http服務(wù)執(zhí)行 GET 請求。其中,then()
方法的第一個參數(shù)表示請求成功時的回調(diào)函數(shù),第二個參數(shù)則是請求失敗時的回調(diào)函數(shù)。
如果需要使用 POST 請求,則可以使用如下代碼:
this.$http.post('/someUrl', {someData: 'data'}).then(response =>{ // ... }, response =>{ // ... })
其他的請求類型,例如 PUT 和 DELETE,用法類似:
this.$http.put('/someUrl', {someData: 'data'}).then(response =>{ // ... }, response =>{ // ... }) this.$http.delete('/someUrl').then(response =>{ // ... }, response =>{ // ... })
除了以上方法,Vue.js的$http服務(wù)還可以進行一些其他的配置。例如,我們可以為所有請求設(shè)置默認的請求頭:
Vue.http.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('token')
或者,我們可以針對某個請求進行單獨的配置:
this.$http.get('/someUrl', {headers: {'X-CSRF-TOKEN': 'CSRF'}}).then(response =>{ // ... }, response =>{ // ... })
總之,Vue.js的$http服務(wù)提供了非常方便的工具來進行數(shù)據(jù)交互。使用它,我們可以輕松地發(fā)起 HTTP 請求并獲取后端返回的數(shù)據(jù)。