fetch是一個JavaScript API,用于在web瀏覽器上異步處理HTTP請求。在Vue中,我們可以利用fetch來獲取需要的數(shù)據(jù)。
在Vue中使用fetch需要使用vue-resource或者axios插件。這兩個插件都是常用的網(wǎng)絡(luò)請求工具。
如果我們選擇使用vue-resource,那么在使用fetch時,需要先安裝vue-resource插件。我們可以使用npm或yarn安裝vue-resource:
npm install vue-resource --save 或 yarn add vue-resource
安裝完成之后,在Vue的app中,需要將vue-resource導(dǎo)入,可以在main.js文件中導(dǎo)入:
import VueResource from 'vue-resource' Vue.use(VueResource)
在這里,我們將vue-resource安裝為Vue的一個插件,并使用Vue.use()方法來將它實例化。這樣就可以在Vue的組件中使用fetch函數(shù)了。
使用fetch函數(shù),我們可以向服務(wù)端發(fā)出HTTP請求,并對請求頭進行設(shè)置。
const url = 'http://localhost:3000/data' this.$http.get(url, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', }, }).then(function(response) { console.log(response) })
在這個例子中,我們向服務(wù)端發(fā)送了一個GET請求,并設(shè)置了兩個請求頭參數(shù): X-Requested-With和Content-Type。在得到請求結(jié)果后,我們將請求結(jié)果輸出到控制臺。
fetch函數(shù)不僅可以發(fā)起GET請求,還可以發(fā)起POST、PUT、DELETE請求等。如下例子中,我們使用POST方法向服務(wù)端發(fā)送了一個請求體RequestBody:
const url = 'http://localhost:3000/data' const requestBody = { username: 'admin', password: '123456', } this.$http.post(url, requestBody, { headers: { 'Content-Type': 'application/json', }, }).then(function(response) { console.log(response) })
在Vue中使用fetch函數(shù)需要注意的是,fetch函數(shù)返回的是一個Promise對象。Promise對象可以幫助我們處理異步請求的結(jié)果。
還有一點需要注意的是,在Vue中,fetch函數(shù)需要使用this.$http來調(diào)用。這是因為我們在Vue中安裝了vue-resource插件,并將其實例化為Vue的一個插件,以便在組件中方便地使用fetch函數(shù)。
總結(jié)一下,使用Vue的vue-resource插件可以方便地使用fetch函數(shù)發(fā)起HTTP請求。fetch函數(shù)具有異步處理請求的能力,并且可以設(shè)置請求頭參數(shù)、請求方法、請求體等。在使用fetch函數(shù)時,需要注意它返回的是一個Promise對象,同時在Vue中需要使用this.$http來調(diào)用fetch函數(shù)。