余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

vue-resource轻松解决发起请求并处理响应的难题

xiyangw 2022-11-24 16:50 16 浏览 0 评论

vue-resource是一个非常轻量的用于处理HTTP请求的插件,它提供了两种方式来处理HTTP请求:

  • 使用Vue.http或this.$http

  • 使用Vue.resource或this.$resource

这两种方式本质上没有什么区别,阅读vue-resource的源码,你可以发现第2种方式是基于第1种方式实现的。

可能我们初学vuejs的时候,会将$.ajax和Vue.js结合在一起使用,但ue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必要引入jQuery。vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说,$.ajax能做的事情,vue-resource插件一样也能做到,而且vue-resource的API更为简洁。另外,vue-resource还提供了非常有用的inteceptor功能,使用inteceptor可以在请求前和请求后附加一些行为,比如使用inteceptor在ajax请求时显示loading界面。

vue-resource插件具有以下特点:

1.体积小

vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。

2. 支持主流的浏览器

和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。

3. 支持Promise API和URI Templates

Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。

URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。

4. 支持拦截器

拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。

拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式

支持的HTTP方法

vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:

  • get(url, [options])

  • head(url, [options])

  • delete(url, [options])

  • jsonp(url, [options])

  • post(url, [body], [options])

  • put(url, [body], [options])

  • patch(url, [body], [options])

除了jsonp以外,另外6种的API名称是标准的HTTP方法。当服务端使用REST API时,客户端的编码风格和服务端的编码风格近乎一致,这可以减少前端和后端开发人员的沟通成本。

emulateHTTP的作用

如果Web服务器无法处理PUT, PATCH和DELETE这种REST风格的请求,你可以启用enulateHTTP现象。启用该选项后,请求会以普通的POST方法发出,并且HTTP头信息的X-HTTP-Method-Override属性会设置为实际的HTTP方法。

emulateJSON的作用

如果Web服务器无法处理编码为application/json的请求,你可以启用emulateJSON选项。启用该选项后,请求会以application/x-www-form-urlencoded作为MIME type,就像普通的HTML表单一样

使用resource服务

vue-resource提供了另外一种方式访问HTTP——resource服务,resource服务包含以下几种默认的action:

get: {method: 'GET'},

save: {method: 'POST'},

query: {method: 'GET'},

update: {method: 'PUT'},

remove: {method: 'DELETE'},

delete: {method: 'DELETE'}

resource对象也有两种访问方式:

  • 全局访问:Vue.resource

  • 实例访问:this.$resource

resource可以结合URI Template一起使用,以下示例的apiUrl都设置为{/id}了:

apiUrl: 'http://211.149.193.19:8080/api/customers{/id}

使用inteceptor

拦截器可以在请求发送前和发送请求后做一些处理。

当用户在画面上停留时间太久时,画面数据可能已经不是最新的了,这时如果用户删除或修改某一条数据,如果这条数据已经被其他用户删除了,服务器会反馈一个404的错误,但由于我们的put和delete请求没有处理errorCallback,所以用户是不知道他的操作是成功还是失败了。

你问我为什么不在每个请求里面处理errorCallback,这是因为我比较懒。这个问题,同样也可以通过inteceptor解决。


相关推荐

JavaScript 简单使用,从入门开始(javascript可直接在电脑上使用)
JavaScript 简单使用,从入门开始(javascript可直接在电脑上使用)

HTML中的脚本必须位于<script>与</script>标签之间。脚本可被放置在HTML页面的<body>...

2023-03-21 18:32 xiyangw

初学者怎样学习 JS 更有效?六个方法供你参考
初学者怎样学习 JS 更有效?六个方法供你参考

1024程序员节,推荐一些前端开发工程师必读书籍本文已经作者DmitriPavlutin授权翻译!当你决定学习JS是有可能是因为你想成为一个前端或后端...

2023-03-21 18:32 xiyangw

初学者必看的JavaScript 七大点!(javascript入门教程)
初学者必看的JavaScript 七大点!(javascript入门教程)

这里有一些Javascript初学者应该知道的技巧和陷阱。如果你已经是专家了,顺便温习一下。Javascript也只不过是一种编程语言。怎么可能出错嘛?1....

2023-03-21 18:31 xiyangw

JS基础入门:事件捕获与事件冒泡(事件捕获 冒泡)
JS基础入门:事件捕获与事件冒泡(事件捕获 冒泡)

JS是前端很重要的一部分内容,可以说把JS的基础打好了,你才能更好的向上发展,而且现在很多大公司初试考察的就是js基础,如果你连初试都过不了,更不用说后面的复试...

2023-03-21 18:31 xiyangw

如果我重新从零开始学Javascript,我将遵循这个路线图
如果我重新从零开始学Javascript,我将遵循这个路线图

如果我要从头开始重新启动Javascript,那么我会遵循这个路线图。值得注意的是,作为这门学科的初学者,学习者的大部分兴趣掌握在导师手中。低效的导师会很快导致...

2023-03-21 18:31 xiyangw

23条JavaScript初学者应知的最佳实践方法(唱歌技巧和发声方法初学者唱歌)
23条JavaScript初学者应知的最佳实践方法(唱歌技巧和发声方法初学者唱歌)

作者:web前端开发转发链接:https://mp.weixin.qq.com/s/VpCiBMZ5fMRNpKAASUpi7w优先使用===,而不是==Jav...

2023-03-21 18:30 xiyangw

给JavaScript初学者的23条最佳实践(javascript环境配置)
给JavaScript初学者的23条最佳实践(javascript环境配置)

1.使用===代替==JavaScript使用2种不同的等值运算符:===!==和==!=,在比较操作中使用前者是最佳实践。“如果两边的操作数具有相...

2023-03-21 18:30 xiyangw

JavaScript入门学习教程(javascript零基础入门)
JavaScript入门学习教程(javascript零基础入门)

初识JavaScript(JS)1.JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。2.JavaScript通常用来操作HTML...

2023-03-21 18:30 xiyangw

javaScript入门知识点(javascript入门经典)
javaScript入门知识点(javascript入门经典)

如何在一个网站或者一个页面中去书写你的js代码:1.js的分层(功能):jquery(tool)组件(ui)应用(app),mvc(backboneJs)2...

2023-03-21 18:29 xiyangw

javascript基础入门学习第一篇(javascript基础入门书籍)
javascript基础入门学习第一篇(javascript基础入门书籍)

今天主要讲述js,在讲述今天的编程知识之前,我们要对C++做一个说明因为一些原因C的知识不做更新了,下面将讲述js的编程知识,首先需要了解的是js是一个脚本语言...

2023-03-21 18:29 xiyangw

Web前端:适合初学者的最佳 JavaScript 项目(普拉提和瑜伽哪个适合初学者)
Web前端:适合初学者的最佳 JavaScript 项目(普拉提和瑜伽哪个适合初学者)

  学习JavaScript或任何其他编程语言的关键需要投入大量时间和精力来开发大量项目,这里有一些最佳JavaScript项目。  1.计算器  这...

2023-03-21 18:28 xiyangw

js快速入门——常用的操作符总结(js ??操作符)

操作符一、递增和递减++--规则:操作数基本数据类型时,转数字后进行运算,转数字失败报NaN操作数引用数据类型时,通过原型链调用toStringvalueOf进行转换后运算,转数字失败报NaN...

JavaScript如何入门?(javascript快速入门教程)
JavaScript如何入门?(javascript快速入门教程)

1,建议阅读“javascript高级程序设计”第三版电子版。(我刚开始学习,我向表哥(软件工程师)说我想做前端,于是,他帮我买了这本书,好的书大家都会推荐,...

2023-03-21 18:28 xiyangw

JavaScript基础知识(一)JS入门(javascript单独写在js文件中)

一、JS入门(一)产生JavaScript是布兰登·艾奇(BrendanEich,1961年~),在1995年利用十天完成JavaScript设计。网景公司最初命名为LiveScript,后来在与Su...

javascript基础入门(java语言自学)

第1天,学习的是js最基本的东西(包括js的组成、数据类型、数据类型转换、NaN和isNaN、隐式类型转换、加减乘除以及取余、变量作用域、闭包简单的概念、命名规范、运算符和逻辑运算符、程序流程控制:...

取消回复欢迎 发表评论: