給 axios 和 redux-axios-middleware 新增finally方法 的使用心得

yang_j_j發表於2017-01-20
iOSRedux

最近公司讓用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 搞完了

相關文章