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使用相关推荐

vue -resource 文件提交提示process,或者拦截处理
this.$http.post('url',fd||data,{emulateJSON:true}).then(fn(res){},fn(res){}) process成功案例 _self.$http ...
vue - resource 使用过程的坑
一. get 传参的坑:加params对象传参(不能直接get(url, params)!!!) this.$http.get(url, {params: { offset: this.offset, ...
vue resource then
https://www.cnblogs.com/chenhuichao/p/8308993.html
vue 仿二手交易app_项目vue2.0仿外卖APP（七）
ratings评价列表页实现在ratings.vue组件里开发首先先引入seller数据: 书写模板结构: 由于评价页又有之前写过的star.vue组件,所以又要在ratings.vue组件引入: ...
vue.js插件使用(01) vue-resource
本文的主要内容如下: 介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于int ...
Vue.js——vue-resource全攻略
概述上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...
Vue.js使用-http请求
Vue.js使用-ajax使用 1.为什么要使用ajax 前面的例子,使用的是本地模拟数据,通过ajax请求服务器数据. 2.使用jquery的ajax库示例 new Vue({el: '#app', ...
voinc vue实现级联选择
需求: vonic中实现级联选择 <!DOCTYPE html> <html> <head><title>下拉框</title><me ...
vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项
路由vue-router介绍: // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据.// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// ...
vue概述、vue文件特点、vue核心思想、双向数据流、单文件、启动一个vue项目、声明式渲染
vue介绍: Vue:当前较火的MVVM框架,轻量.简介.高效.组件化.数据驱动,模块和渲染函数的弹性选择,简单的语法及项目创建,渲染速度极快,基于Virtual Dom,利用虚拟DOM实现快速渲染: ...

vue-resource使用

get、post、jsonp示例

全局拦截器

vue-resource使用相关推荐

最新文章

热门文章