最近公司讓用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方法 的使用心得的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。