vue-resource是一個http請求插件，遵循promise，類似jquery中ajax操作。 vue-resource已不被官方推薦，官方推薦axios插件來操作http協議。

vue-resource中提供的方法
get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])
github源地址:https://github.com/pagekit/vue-resource/blob/master/README.md

安裝vue-resource

npm i vue-resource -S

vue-resource是發布后也需要使用的，安裝時要保存到dependencies中。
vue-resource引入
main.js中

import Vue from 'vue' import App from './App' import router from './router' import VueResource from 'vue-resource'Vue.config.productionTip = false Vue.use(VueResource)/* eslint-disable no-new */ new Vue({el: '#app',router,template: '<App/>',components: { App } })

vue-resource使用
熟悉promise語法的話，使用vue-resource挺簡單的，實際上任何不明確的地方看vue-resource文檔即可，列一下最常用的get、post、jsonp以及全局攔截器的示例，方便查看。

get、post、jsonp示例

export default {name: 'app',data () {return {addr: '/data.json'}},methods: {dataGet () {console.info('get')this.$http.get(this.addr, {params: {name: '1'},headers: {token: 'a'}}).then(res => {console.info(res.data)}, error => {console.info(error)})},dataPost () {console.info('post')this.$http.post(this.addr, {name: '1'}, {headers: {token: 'a'}}).then(res => {console.info(res.data)}, error => {console.info(error)})},dataJsonP () {console.info('jsonp')this.$http.jsonp(this.addr, {params: {name: '1'}}).then(res => {console.info(res.data)}, error => {console.info(error)})}} }

全局攔截器

main.js中

Vue.http.interceptors.push(function (request, next) {console.info('resquest 開始，這里可以寫一些請求之前的預處理')next(function (response) {console.info('response 開始，所有http請求前都會調用此方法')return response}) })

vue-resource總結的很全面的幾篇文章：
https://www.cnblogs.com/axl234/p/5899137.html
http://blog.csdn.net/wcslb/article/details/55057010
https://segmentfault.com/a/1190000007087934

總結

以上是生活随笔為你收集整理的vue-resource使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。