其实取消请求对于普通的ajax请求rn-fetch-blob写法是比较简单的

 let task = RNFetchBlob.fetch('GET', 'http://example.com/file/1')

 task.then(() => { ... })
// handle request cancelled rejection
.catch((err) => {
console.log(err)
})
// cancel the request, the callback function is optional
task.cancel((err) => { ... })

但是我们的整个应用结合了redux,不可能直接在组件中调用ajax请求,那么我们的action可能是这样的

 export const login = (data) => dispatch => {
//ajax 是我们自己封装的方法,但是底层还是rn-fetch-blob,返回的依然是一个promise
let promise = ajax.post({
url:"/user/login",
data:data
});
//这里返回的payload是只有ajax的数据
promise.then(payload=>{
dispatch({type:"LOGIN_SUCCESS",payload});
});
return promise;
};

每一个action这样干其实很恶心,都要做这样的两个操作,效率没提高,反而多了很多的冗余代码

想了想,干脆自己写个中间件来处理这个吧

当当当当fetch-blob-redux-middleware 诞生

加入fetch-blob-redux-middleware后的action写法:

 //createAction 为第三方的小插件,使用redux-actions 或者 create-action 都可以
export const login = (data) => createAction("LOGIN_SUCCESS",()=> ajax.post({
url:"/user/login",
data:data
}));

是不是简介了很多,写代码速度估计也会快很多,当然在写fetch-blob-redux-middleware的时候我做了兼容处理,也支持以前的普通的ajax调用方法,所以大家放心的用吧

当然大家也可以根据需要自己写redux middleware,很简单的

rn-fetch-blob+redux 取消请求的更多相关文章

  1. fetch发送Form Data请求并携带cookie

    今天我们来说说如何fetch发送Form Data请求并携带cookie,直接进入正题好吧,别问我今天为啥不在开始吹两句了,累到一句牛逼不想吹...... 步骤1: 设置头部,"Conten ...

  2. axios 取消请求的方法

    开发中遇到需要取消请求的功能,,点击终止查询可以取消开始查询请求,再次点击开始查询又可以进行查询. 解决方法:axios官方文档上的CancelToken,一开始用了这个api后,可以成功取消请求,但 ...

  3. jq和axios的取消请求

    场景: 分页: 每次点击分页会发送请求,如果上一次请求还未获取到,下一次请求已经开始且先一步获取到,那么数据上会出现问题. 快速点击会发送多次请求,多次点击的时候一般的做法我们会定义一个flag,此时 ...

  4. axios 取消请求

    解决思路 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. axios官方文档取消请求说明 方法一: const CancelTok ...

  5. Android OkHttp + Retrofit 取消请求的方法

    本文链接 前言 在某一个界面,用户发起了一个网络请求,因为某种原因用户在网络请求完成前离开了当前界面,比较好的做法是取消这个网络请求.对于OkHttp来说,具体是调用Call的cancel方法. 如何 ...

  6. axios 取消请求 (如:用户登录失效,阻止其他请求)

    const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.interceptors.reque ...

  7. 学习axios必知必会(2)~axios基本使用、使用axios前必知细节、axios和实例对象区别、拦截器、取消请求

    一.axios的基本使用: ✿ 使用axios前必知细节: 1.axios 函数对象(可以作为axios(config)函数使用去发送请求,也可以作为对象调用方法axios.request(confi ...

  8. Fetch API与POST请求那些事

    简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...

  9. Volley HTTP库系列教程(2)Volley.newRequestQueue示例,发请求的流程,取消请求

    Sending a Simple Request Previous  Next This lesson teaches you to Add the INTERNET Permission Use n ...

随机推荐

  1. linux中配置yum源

    1.配置163或者阿里云yum源: 阿里云yum源地址:https://mirrors.aliyun.com/centos/6.9/os/x86_64/Packages/ 阿里云给出的解决办法:htt ...

  2. python 多线程 生产者消费者

    import threading import time import logging import random import Queue logging.basicConfig(level=log ...

  3. VERITAS NETBACKUP运维手册(自制)

    ps:本文为目录.详情请点如下目录超链接 1 VERITAS NETBACKUP介绍 1.1 NBU基本概念 1.2 配置存储单元 1.3 配置备份策略(Policy) 1.4 配置NetBackup ...

  4. Linux运维必会的实战编程笔试题(19题)

    以下Linux运维笔试面试编程题,汇总整理自老男孩.马哥等培训机构,由运维派根据实战需求,略有调整: 企业面试题1:(生产实战案例):监控MySQL主从同步是否异常,如果异常,则发送短信或者邮件给管理 ...

  5. GC Root总结

    为什么80%的码农都做不了架构师?>>> JVM根据GC Roots算法判定一个对象需要被回收,GC Roots一般在JVM的栈区域里产生. GC Roots原理 GC Roots基 ...

  6. DongDong坐飞机

    题目连接:https://ac.nowcoder.com/acm/contest/904/D 第一次研究了一下这种题型,还是比较好理解的,因为有半价次数的限制,所以要把每一中情况都写出来,dp[现在的 ...

  7. C#自增运算符(++)

    一.C#自增运算符(++) 自增运算符(++)是将操作数加1. 1. 前缀自增运算符 前缀自增运算符是“先加1,后使用”.它的运算结果是操作数加1之后的值. 例如: ++x;  // 前缀自增运算符 ...

  8. 关于小程序button控件上下边框的显示和隐藏问题

    问题: 小程序的button控件上下有一条淡灰色的边框,在空件上加上了样式 border:(none/0); 都没办法让button上下的的边框隐藏: 代码如下 <button class=&q ...

  9. 避免修改Android.mk添加cpp文件路径

    手工输入项目需要编译的cpp文件到Android.mk里的缺点 1)繁琐,如果cpp文件很多,简直无法忍受 2)手工输入过程中容易出现错误 3)如果cpp文件更改名称,需要修改android.mk文件 ...

  10. MySQL - UNION 和 UNION ALL 操作符

    UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集. 请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 SE ...