在前端開發中,我們經常需要發送異步請求獲取數據并更新頁面展示。而vue.js提供了非常便捷的方式進行ajax請求,使得我們可以在不刷新頁面的情況下獲取數據并動態展示在頁面上。
在vue.js中,我們可以使用vue-resource插件或者axios庫進行ajax請求,這兩個工具均可以通過npm安裝。在使用之前我們需要首先進行安裝,并在需要使用的組件中引入。
npm install vue-resource 或者 npm install axios // 安裝插件或庫 import VueResource from 'vue-resource' // 引入vue-resource import axios from 'axios' // 引入axios Vue.use(VueResource) // 使用vue-resource
vue-resource是一個基于Vue.js的http請求插件,它提供了豐富的API用于發送get、post、put、delete、jsonp等類型的請求。使用vue-resource可以非常方便地進行restful API的調用。
Vue.http.get('/url').then(response =>{ console.log(response.body) }, response =>{ console.log(response.body) })
以上代碼通過GET請求獲取url地址的數據,并將響應體的內容輸出到控制臺中。另外,vue-resource還提供了Vue.http.interceptors攔截器,可以在請求發送、響應接收的過程中進行一些處理。
Vue.http.interceptors.push((request, next) =>{ // modify request request.headers.set('Authorization', 'Bearer 123456') next(response =>{ // modify response response.body = {data: response.body} }) })
上述代碼通過添加Vue.http.interceptors攔截器來設置請求頭中的Authorization信息,并對響應體的內容進行一些修改。
另外一個非常強大的ajax庫是axios,它基于Promise實現,支持瀏覽器和Node.js。axios API簡單易懂,易于使用,用法類似于vue-resource。
axios.get('/url').then(response =>{ console.log(response.data) }).catch(error =>{ console.log(error) })
以上代碼使用axios發送GET請求,axios的響應體中的數據可以通過response.data獲取。另外,axios還支持攔截器,可以在請求和響應的過程中進行一些處理。
axios.interceptors.request.use(config =>{ // modify request config.headers['Authorization'] = 'Bearer 123456' return config }) axios.interceptors.response.use(response =>{ // modify response response.data = {data: response.data} return response })
以上代碼通過添加axios的攔截器對請求和響應進行了一些處理。
總的來說,無論是vue-resource還是axios都是非常好用的ajax庫,我們可以根據實際需求選擇使用。當然,在使用之前需要進行安裝并且在需要使用的組件中進行引入。