聊聊RxJS中的错误重试

前言

最近工作中有一个需求是:如果这个请求超时,则进行重试,且重试次数可配置。

首先我们发请求使用的库为:Axios,其处理请求的位置,是在 redux-observable 中的 epic 里。

那么如果要完成重试机制的话,有两种办法:

  • 在对 Axios 封装的函数里添加重试代码
  • epic 里,使用 RxJS 操作符进行重试。

关于 Axios 重试的,其实比较麻烦的,而且需要在原有封装好的函数里,继续添加重试代码,总感觉不太好。且维护起来也不太方便。于是那就使用 RxJS 操作符进行重试吧。本文代码将不会套用项目代码,而是重新写一个 Demo,方便理解。

JavaScript集成Sentry

Sentry-JavaScript

Sentry是一套用于捕获产品错误的开源项目,其下支持很多语言、框架。

这里就只阐述在前端JavaScript方向的处理操作

在我们公司之前的应用场景里,很多项目都是使用kibana来做信息统计。但是我们无法清楚的知道应用的运行状态是怎么样的。当某个客户在使用我们开发产品时,如果报错、崩溃。用户只能向客服寻求帮助,再交接给我们的开发人员进行复现、修复。其中因为不清楚具体的数据,开发人员是在复现时会非常的耗时。

Sentry的用途就是解决这一痛点问题,让开发人员快速准确的定位到问题的根源所在,以达到快速修复,让开发人员更注重于开发新的功能上面。减少时间资源上的浪费。

JavaScript

接入

因为Sentry使用的是一种Hook错误函数的技术,来达到捕获错误的目的,所以我们基本可以无损耗的接入到现有的项目中去。

下面是ReactSentry进行结合的一些基本步骤。

分析axios源码来找出无法使用all和spread等方法的原因

前言

如果你在使用axios的时候,是使用axios.create({})方法来进行创建axios的,那么你会发现你无法使用allspreadCancelCancelTokenisCancel方法。

我上网查了相关的问题,axios维护者们都是让你重新引入axios package来进行完成任务。我不喜欢这种方法,因为重新引入的话,那我的axios配置就会丢失,需要重新配置一遍,太过麻烦。

因为我们项目很多时候,不想使用默认的配置,想使用自定义设置的axios实例。比如设置基础URL和超时时间:

基于vue-simplemde实现图片拖拽、粘贴功能的一些思考

前言

项目使用的是vue框架,需要一个markdown的编辑框,就在npm上找了一下,发现simplemde挺不错的,由于我比较懒,就顺便在npm又搜了一下,找到了vue-simplemde这个package,那就开始使用它吧。

但是这个vue-simplemde不支持图片拖拽上传、粘贴上传,也不能说是因为这个vue-simplemde,因为vue-simplemde只是对simplemde的基础上封装成一个Vue插件。所以最后还是由于simplemde没有提供相关的功能,但是为了用户体验考虑,这个功能时必要的,除非不使用markdown编辑器。而去使用富文本编辑器,那样的话,项目很多的代码都要进行更改。所以就在网上查了文章,及在github上查了一些代码。下面将进行分析

对Promise增加统一操作扩展

前言

在ES6里,增加了Promise方法。而Promise的回调函数只有thencatch两种方法。

而后,Promise又添加了两种附加方法,当然需要自己去添加进去。

可以去看一下上文的链接去了解一下,或者去下面的链接,看下官方源码是如何实现的: donefinally

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×