store => next => action =>{}
这就是一个中间件的声明方式

下面就是一个简单的中间件，什么功能也没有

export default store => next => action => {

    console.log('自定义中间件-action:',action);

     return next(action);
}

这种只要dispatch(action)，都会走这个方法。

现在我想dispatch(httpAction)，然后进行网络请求，所以要改造一下这个函数。

import {
    ACTION_MIDDLEWARE_HTTP
} from '../constance/actionType';
export default store => next => action => {

    console.log('自定义中间件-action:',action);

    // 如果不是网络请求的action，就继续往下走
    if(action.type !== ACTION_MIDDLEWARE_HTTP)
        return next(action);

    // 下面就是网络请求的代码
    console.log('网络请求中间件的参数:',action.payload);


}

action.js

export const ACTION_MIDDLEWARE_HTTP = createAction(Action.ACTION_MIDDLEWARE_HTTP);

home.js

<TouchableOpacity style={styles.button} onPress={()=>{
               this.props.httpMiddleWare('进行网络请求');
            }}>
                <Text style={styles.buttonText}>点击发送Action，进行中间件（网络请求）</Text>
            </TouchableOpacity>

 httpMiddleWare:(value)=>{
            dispatch(ACTION_MIDDLEWARE_HTTP(value));
        }

完整的中间件代码

/**
 * Created by chj on 2018/5/7.
 */
import {
    ACTION_MIDDLEWARE_HTTP
} from '../constance/actionType';

const headers = {
    "Accept": "application/json",
    "Content-Type": "application/json",
};

const imageHeaders = {
    "Content-Type": "multipart/form-data",
};
export default store => next => action => {

    console.log('自定义中间件-action:',action);

    if(action.type !== ACTION_MIDDLEWARE_HTTP)
        return next(action);


    console.log('网络请求中间件的参数:',action.payload);

    const {
        url,
        method = 'POST', // 如果没有传，则默认是 POST 方式
        params = {},     // 默认 空
        loading,         // 回调函数，网络请求开始
        success,         // 回调函数，网络请求成功
        fail,            // 回调函数，网络请求失败
        complete         // 回调函数，网络请求结束
    } = action.payload;

    loading();

    fetch(url,
        {
            method: method,
            headers,
            body: params,
        })
        .then(response=>{
            return response.json()
        })
        .then(responseData=>{
            success(responseData)
        })
        .catch(error=>{
            fail(error)
        })
        .finally(()=>{
            complete();
        })

}

home.js

this.props.httpMiddleWare({
                   url: 'url',
                   params: {keu1:'1',key2: '2'},
                   loading: this.loading,
                   success: this.success,
                   fail: this.fail,
                   complete: this.complete
               });

 // 网络开始请求
    loading() {
        // 在此处可以进行网络请求前的操作，比如显示loading...
        console.log('网络开始请求...转圈圈');
    }
    success(responseData) {
        // 网络请求成功返回数据
        console.log('网络请求成功:', responseData);
    }
    fail(error) {
        // 网络请求失败返回数据 error
        console.log('网络请求错误:', error);

    }
    complete() {
        // 网络请求完成处理，比如取消loading...
        console.log('网络请求结束...不转圈圈');
    }

image.png

axios进行网络请求中间件代码

/**
 * Created by chj on 2018/5/7.
 */
import {
    ACTION_MIDDLEWARE_HTTP
} from '../constance/actionType';
import axios from 'axios'

const timeout = 60000;

const headers = {
    "Accept": "application/json",
    "Content-Type": "application/json",
};

const imageHeaders = {
    "Content-Type": "multipart/form-data",
};
export default store => next => action => {

    console.log('自定义中间件-action:',action);

    if(action.type !== ACTION_MIDDLEWARE_HTTP)
        return next(action);


    console.log('网络请求中间件的参数:',action.payload);

    const {
        url,
        method = 'POST', // 如果没有传，则默认是 POST 方式
        params = {}, // 默认 空
        loading,
        success,
        fail,
        complete
    } = action.payload;

    loading();

    // 设置url
    axios.defaults.baseURL = 'https://api.example.com';

    // 设置默认的header
    //axios.defaults.headers.DeviceId = ''

    // 设置数据类型
    //axios.defaults.headers.post['Content-Type'] = 'application/json';

    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
        // 在发送请求之前做些什么
        return config;
    }, function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
        // 对响应数据做点什么
        return response;
    }, function (error) {
        // 对响应错误做点什么
        return Promise.reject(error);
    });

    // 发送请求
    axios({
        url: url,
        method: method,
        headers: headers,
        data: params,
        timeout: timeout,
        responseType: 'json',
        onUploadProgress: (progressEvent)=>{
            console.log('progressEvent:', progressEvent);
        },
        onDownloadProgress: (downloadEvent)=>{
            console.log('downloadEvent:', downloadEvent);
        }
    }).then(response =>{
        success(response);
    }).catch(error =>{
        fail(error);
    }).finally(()=>{
        complete();
    })
}