zoukankan      html  css  js  c++  java
  • rn-fetch-blob+redux 取消请求

    其实取消请求对于普通的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 诞生

    加入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,很简单的

  • 相关阅读:
    【Elasticsearch学习】DSL搜索大全
    【Elasticsearch学习】文档搜索全过程
    【Elasticsearch学习】之基础概念
    【Elasticsearch学习】之一图读懂文档索引全过程
    echarts自定义tooltip显示
    最小生成树之克鲁斯卡尔算法
    最小生成树之prime算法
    spring security learning(spring in action)
    Radix_Sort
    Python一键获取日漫Top100榜单电影信息
  • 原文地址:https://www.cnblogs.com/wang4517/p/9673013.html
Copyright © 2011-2022 走看看