大多數現代web應用程序使用Ajax來從服務端獲取數據。 前后端分離的應用程序,客戶端和服務器通過API進行通信。 在通信過程中,服務器端生成的數據通常是JSON格式的數據。在客戶端(如瀏覽器)中,我們可以使用JavaScript將這些JSON格式的數據解析出來,以便在網頁上展示。
在Vue中,我們可以使用axios來進行http請求。axios是一個基于Promise的HTTP客戶端,用于在瀏覽器和Node.js中進行請求。 它提供了許多高級功能,例如攔截請求、動態參數等
// 引入axios import axios from 'axios' export default { data () { return { users: [] } }, mounted () { axios.get('http://jsonplaceholder.typicode.com/users') .then(response =>{ this.users = response.data }) .catch(error =>{ console.log(error) }) } }
在上面的例子中,我們使用axios發送了一個GET請求,獲取了“http://jsonplaceholder.typicode.com/users”的數據。在回調函數中,我們把response數據里邊的user賦值給了Vue組件的data對象中的users屬性,則Vue模板中就可以使用類似:{{$data.users}}或者v-for循環來展示請求到的數據。
我們還可以使用Vue提供的axios插件——VueAxios。VueAxios將axios封裝到Vue中,使我們能夠在Vue的實例中使用其所有功能。下面是VueAxios的基本用法:
// 引入VueAxios import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios) // 使用VueAxios Vue.axios.get('http://jsonplaceholder.typicode.com/users') .then((response) =>{ console.log(response) }) Vue.axios.post('/api/users', {}) .then((response) =>{ console.log(response) })
在上面的例子中,我們使用axios執行了一個GET請求和一個POST請求。在Vue的組件或者實例中,我們可以使用Vue.axios.post或者Vue.axios.get方法來執行http請求。
總之,在Vue中,我們可以使用axios處理HTTP請求和響應。nameVue內置一些函數(prepareRequest、handleResponse),并且可以使用VueAxios將axios封裝到Vue中。