Vue 能夠請求 Servlet,是因為它內置了一些可以用來發送 HTTP 請求的庫,例如 Axios 和 Fetch。這些庫可以向服務器發送 GET、POST、PUT、DELETE 等請求,并且可以傳遞參數和請求頭。
要發送一個 HTTP 請求,首先需要創建一個 Axios 或 Fetch 的實例。對于 Axios,可以使用它的 create 方法:
const axiosInstance = axios.create({ baseURL: 'http://localhost:8080/myapp' });
這個實例可以設置一些默認參數,例如 baseURL 和 headers。接下來,用這個實例來發送請求。對于 GET 請求,可以直接使用實例的 get 方法:
axiosInstance.get('/users').then(response =>{ console.log(response.data); }).catch(error =>{ console.error(error); });
這個例子向 /users 路徑發送了一個 GET 請求,并且在請求成功后在控制臺輸出響應數據。如果請求失敗,會輸出錯誤信息。
對于 POST 和 PUT 請求,需要在請求中傳遞數據??梢詫祿鳛榈诙€參數傳遞給 Axios 實例的 post 或者 put 方法:
axiosInstance.post('/users', { name: '張三', age: 20 }).then(response =>{ console.log(response.data); }).catch(error =>{ console.error(error); });
這個例子向 /users 路徑發送了一個 POST 請求,并且在請求成功后在控制臺輸出響應數據。請求中傳遞的數據是一個對象,這個對象會被轉換成 JSON 格式發送到服務器。
用 Axios 或 Fetch 發送 HTTP 請求時,還可以設置請求頭和請求參數。請求頭可以通過 headers 屬性設置,例如:
axiosInstance.get('/users', { headers: { Authorization: 'Bearer ' + token } });
這個例子設置了一個 Authorization 請求頭,值為一個字符串。請求參數可以通過 params 屬性設置,例如:
axiosInstance.get('/users', { params: { name: '張三', age: 20 } });
這個例子設置了兩個請求參數,分別是 name 和 age。這些參數會被轉換成查詢字符串,然后添加到請求 URL 后面。
以上是 Vue 請求 Servlet 的簡介,Axios 或 Fetch 的用法也只是其中一部分,它們還有很多高級用法,例如請求攔截器、響應攔截器、并發請求等。如果需要深入了解,可以參考官方文檔。