给 axios 和 redux-axios-middleware 添加finally方法 的使用心得
最近公司让用react写一个钉钉的微应用APP 然后就只能去学了react, 之前一直用angular和vue, 所以异步请求用的都是jquery和axios, 想转来转去麻烦 就直接用了axios, 然后网上找了一下 居然有axios的redux中间件
axios 实现finally方法
实现方式1 - q.js
一开始使用axios, 因为没有finally方法,写起来总是有点别扭 所以引入了q.js 需要把请求都用Q.Promise封装一遍,像这样
//定义
export function getUserInfo() {return Q.Promise((success, error) => {axios.post('[url]').then(function (data) {if (data.code == 200) {success(data.data)} else {error()}}).catch(function (err) {error()});})
}//使用
getUserInfo().then(()=>{}).catch(()=>{}).finally(()=>{})
实现方式2 - promise.prototype.finally
最后在看 axios的issues的时候无意间看到有人提问 可以用这个库 实现对es6promise的扩展 之后就很简单了
//只要引入这个模块 使用下这个方法就搞定了
require('promise.prototype.finally').shim() //使用
axios.post('[url]').then((data)=> {}).catch((err)=> {}).finally(()=> {})
redux-axios-middleware 实现finally方法
我们做业务的时候肯定会有 loading 这个变量,在请求前需要让加载框出现,在完成后需要隐藏
不对redux-axios-middleware进行配置的话是这样的,可以看到 写了2遍state.setIn(['obj', 'loading'], false);
case 'GET_CATEGORY_LIST':return state.setIn(['obj', 'loading'], true);break;
case 'GET_CATEGORY_LIST_SUCCESS':state = state.setIn(['obj', 'list'], fromJS(aciton.payload.data))return state.setIn(['obj', 'loading'], false);break;
case 'GET_CATEGORY_LIST_FAIL':return state.setIn(['obj', 'loading'], false);break;
对redux-axios-middleware进行配置
看了下源码 他是有一个onComplete
方法可以定义的,方式如下
#axiosMiddlewareOptions.js
import { getActionTypes } from 'redux-axios-middleware/lib/getActionTypes'export const returnRejectedPromiseOnError = true;export const onComplete = ( { action, next, getState, dispatch }, actionOptions) => {const previousAction = action.meta.previousAction;const nextAction = {type: getActionTypes(previousAction, actionOptions)[0]+'_COMPLETE',meta: {previousAction: previousAction}};next(nextAction);return nextAction;
};
#store.js
import { createStore, compose, applyMiddleware } from 'redux'import axios from 'axios';
import axiosMiddleware from 'redux-axios-middleware';
import * as axiosMiddlewareOptions from './common/axiosMiddlewareOptions'const enhancers = compose(applyMiddleware(axiosMiddleware(axios, {...axiosMiddlewareOptions}), //axios 中间件),window.devToolsExtension ? window.devToolsExtension() : f=>f
);
这样配置完之后,axios中间件每次请求完 都会执行一个[type]_COMPLETE
的action,上面的reducer可以优化为(如果为错误不处理的话,一般都会在axios的interceptors里做)
case 'GET_CATEGORY_LIST':return state.setIn(['obj', 'loading'], true);break;
case 'GET_CATEGORY_LIST_SUCCESS':return state.setIn(['obj', 'list'], fromJS(aciton.payload.data))break;
case 'GET_CATEGORY_LIST_COMPLETE':return state.setIn(['obj', 'loading'], false);break;
上面还有一个配置export const returnRejectedPromiseOnError = true;
他的作用是让axios中间件请求出错的时候走catch方法,可以是代码结构更清晰。
#redux-axios-middleware 源码
return actionOptions.returnRejectedPromiseOnError ? Promise.reject(newAction) : newAction;
然后就可以使用axios中间件请求更爽的写业务代码啦,上面说的是在 redux 中的数据,下面这个是如何更好控制在state中的数据,下面的3个方法其实是axios.request()的方法,由于我们使用第2种方法给promise添加了finally方法,所以现在可以这样使用它
this.setState({ refreshing: true });
this.props.userHome().then(()=>{}).catch(()=>{}).finally(()=>{this.setState({ refreshing: false });})
ok 搞完了
给 axios 和 redux-axios-middleware 添加finally方法 的使用心得相关推荐
- Axios的Vue插件(添加全局请求/响应拦截器)
/** * @file Axios的Vue插件(添加全局请求/响应拦截器) */ // https://github.com/mzabriskie/axios import axios from ...
- Vue使用axios,设置axios请求格式为form-data
Vue使用axios,设置axios请求格式为form-data 这个老生常谈了,还是先记录一遍,方面后面自己查. !!! 设置form-data请求格式直接翻到后面看. 1. 安装axios 在项目 ...
- axios队列 vue_vue axios全攻略
不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文档本身就非常详细!!有这个还要什么自行 ...
- php使用axios发送请求,axios源码之模拟实现axios发送请求
axios内部运作流程大致如下axios入口- ->axios构造函数- ->interceptors请求拦截器- ->dispatchRequest方法- ->transfo ...
- 使用React和axios设置服务器端渲染的最简单方法
by Simone Busoli 通过西蒙娜·布索利(Simone Busoli) 使用React和axios设置服务器端渲染的最简单方法 (The easiest way to set up ser ...
- php 设置跨域axios,vue2.0中proxyTable用axios进行跨域请求的设置方法
vue2.0设置proxyTable使用axios进行跨域请求的方法 这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装ax ...
- vue2中使用axios,以及axios拦截器的配置
目录 一.vue2项目中如何实现异步请求 1.axios:是一个基于Promise的网络请求库.既可以在node.js(服务器端)使用,也可以在浏览器端使用 2.vue中的使用方法 (2)引用方法 ...
- 【axios】封装axios
一.axios简介 定义 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.(本文围绕XHR) axios提供两个http请求适配器,XHR和HTTP. ...
- 在vuejs 中使用axios不能获取属性data的解决方法
在vuejs 中使用axios不能获取属性data的解决方法 参考文章: (1)在vuejs 中使用axios不能获取属性data的解决方法 (2)https://www.cnblogs.com/lo ...
最新文章
- 面向程序员的网络基本知识 - 网络模型及网络设备
- 网页设计过程中一般命名规则
- jQuery操作元素属性
- 修改VS2010生成的dll文件中的内容
- python编写程序计算1+2+3+......+100和_Python3:计算两个列表总和为100的所有排列的最有效方法是什么?...
- 前端学习(1957)vue之电商管理系统电商系统之创建新分支
- 为什么使用Deque而不使用Stack构造栈
- 目标检测中的不平衡问题综述
- QT编程-----------------窗口部件的使用(QWidget和QDialog)
- 利用unittest+ddt进行接口测试(二):使用yaml文件管理测试数据
- Webmax简易入门操作手册(一)
- 获取火山无水印视频方法
- 专业显卡测试软件 spec,AMD Radeon Pro WX8200专业图形显卡评测 对比Quadro P5000
- 程序猿生存指南-45 迁徙的鸟
- python自加自减_自增自减运算符详解
- 原生 和html5 性能,原生开发与HTML5开发的对比
- 智能网联汽车网络安全浅析(上)
- ae教程 (七)动效插件 (三)炫彩图案
- Python中密码加密存储
- 调试路由器----恢复出厂设置、修改特权密码、备份配置文件、升级操作系统
热门文章
- Entity Framework 4.0 的一个bug :DefaultValue问题
- DataGrid 功能实现收集(转)保留做参考
- 迭代子模式(Iterator)
- windows-server-2012R2离线中文语言包安装
- mysql git下载安装_xshell、python、git、mysql安装(玩阿里云的第二天)
- python语言基本控制结构有哪些-以下不属于Python语言控制结构的是()
- php二进制加密_怎样给PHP源代码加密?PHP二进制加密与解密的解决办法
- java word在线预览_java 生成word文档并且在线预览的问题
- android byte[] 转string 好多问号_Android 仿抖音实现动态壁纸
- 栅格单元值的选取方法_ArcGIS中栅格数据重采样方法