在Vue中,http是常見的網絡請求方式之一。與其它的框架一樣,Vue也提供了方便的http請求工具來幫助我們實現網絡請求功能。
Vue中的http請求工具基于XMLHttpRequest實現,簡化了XMLHttpRequest的使用方式,使得我們可以更加快速地實現網絡請求。
// 使用Vue.http.get發送GET請求 Vue.http.get('/api/data') .then(response =>{ console.log(response.body); }) .catch(error =>{ console.log(error); });
上述代碼中,我們使用Vue的http工具發送了一個GET請求,并設置了接收到請求響應后的回調函數,以處理請求返回的數據或錯誤信息。這種方式非常方便,無需手動處理XMLHttpRequest請求的各種狀態碼。
除了發送GET請求之外,我們還可以使用http工具發送POST、PUT、DELETE等請求。這些請求方式也有類似的設置方式,只需要將Vue.http.get換成Vue.http.post等即可。
// 使用Vue.http.post發送POST請求 Vue.http.post('/api/user', { name: 'john', age: 25 }) .then(response =>{ console.log(response.body); }) .catch(error =>{ console.log(error); });
除了發送請求之外,我們還可以設置請求的各種參數、頭信息及攔截器等。這些設置都可以通過Vue.http.options來進行全局配置。
// 全局配置Vue.http.options Vue.http.options.root = 'http://localhost:8080'; Vue.http.options.headers = { 'Content-Type': 'application/json' }; Vue.http.interceptors.push((request, next) =>{ request.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token')); next(response =>{ if (response.status === 401) { // 處理401錯誤 } }); });
上述代碼全局配置了http請求的根路徑、頭信息及攔截器,使得發送請求時無需重復配置,也方便了全局統一處理請求的攔截邏輯。
除此之外,Vue的http工具還提供了formData、jsonp等請求方式,幫助我們更加方便地實現各種網絡請求功能。