色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue.jsajax請求

林國瑞2年前9瀏覽0評論

在前端開發中,我們經常需要發送異步請求獲取數據并更新頁面展示。而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庫,我們可以根據實際需求選擇使用。當然,在使用之前需要進行安裝并且在需要使用的組件中進行引入。