rn-fetch-blob+redux 取消请求
程序员文章站
2022-03-22 14:48:45
其实取消请求对于普通的ajax请求rn-fetch-blob写法是比较简单的 但是我们的整个应用结合了redux,不可能直接在组件中调用ajax请求,那么我们的action可能是这样的 每一个action这样干其实很恶心,都要做这样的两个操作,效率没提高,反而多了很多的冗余代码 想了想,干脆自己写个 ......
其实取消请求对于普通的ajax请求rn-fetch-blob写法是比较简单的
1 let task = rnfetchblob.fetch('get', 'http://example.com/file/1') 2 3 task.then(() => { ... }) 4 // handle request cancelled rejection 5 .catch((err) => { 6 console.log(err) 7 }) 8 // cancel the request, the callback function is optional 9 task.cancel((err) => { ... })
但是我们的整个应用结合了redux,不可能直接在组件中调用ajax请求,那么我们的action可能是这样的
1 export const login = (data) => dispatch => { 2 //ajax 是我们自己封装的方法,但是底层还是rn-fetch-blob,返回的依然是一个promise 3 let promise = ajax.post({ 4 url:"/user/login", 5 data:data 6 }); 7 //这里返回的payload是只有ajax的数据 8 promise.then(payload=>{ 9 dispatch({type:"login_success",payload}); 10 }); 11 return promise; 12 };
每一个action这样干其实很恶心,都要做这样的两个操作,效率没提高,反而多了很多的冗余代码
想了想,干脆自己写个中间件来处理这个吧
当当当当 诞生
加入fetch-blob-redux-middleware后的action写法:
1 //createaction 为第三方的小插件,使用redux-actions 或者 create-action 都可以 2 export const login = (data) => createaction("login_success",()=> ajax.post({ 3 url:"/user/login", 4 data:data 5 }));
是不是简介了很多,写代码速度估计也会快很多,当然在写fetch-blob-redux-middleware的时候我做了兼容处理,也支持以前的普通的ajax调用方法,所以大家放心的用吧
当然大家也可以根据需要自己写redux middleware,很简单的
上一篇: 检测窗口大小显示和隐藏内容
下一篇: HTML5仿微信聊天界面、微信朋友圈实例