使用redux-thunk实现异步操作的中止

前端开发中常常会有这样的需求：设计一个select组件，每做一次选择就用ajax异步加载数据到指定页面。

实现这个需求并不困难，但是仅仅是这样做，难免会出现一些不太理想的体验：如果用户迅速的切换选项，那么返回的结果不一定是用户最后选择的那个结果。

因为请求是异步的，而请求发出到获得响应的过程时间是不可估的，用户很可能临时改变主意或等不及了而去发出一个新的请求。而页面最终呈现的结果是以最后到达的请求为准，因此具有一定的随机性。

这里使用redux的中间件thunk来改进action构造函数，达到‘中断‘用户最后一次之前的所有请求，只保留最后一次的效果。

关于中断和截流，月影有一篇关于函数式编程的PPT将的特别好，推荐大家去看一下，PPT中有嵌入JSBIN，大家可以直接在PPT中调试，《函数式编程，你必须知道的那些事》

而这里要提到的方法跟上述PPT中的都不一样，而且同样巧妙。
这里预先定义三个action创造函数:

• fetchDataStarted
• fetchDataSuccess
• fetchDataFailed

顾名思义，分别返回数据发起和数据返回成功／失败的action，展示组件将根据传入的props的特定的状态渲染不同的内容（即‘数据加载中···‘，‘数据加载成功即其内容‘，‘数据加载失败及其原因‘）。那么现在就是要对每点击一次要派发的那个action对应的构造函数进行改写：

let nextSeqId = 0
export const fetchDataAction = (selectQuery) => {
    return (dispatch) {
        const apiUrl = 'data/select/${selectQuery}'
        const SeqId = ++nextSeqId
        const dispatchIfValid = action => {
            if（SeqId === nextSeqId）{
                return dispatch(action)
            }
        }
        // 将状态改为开始发起请求
        dispatchIfValid(fetchDataStarted)
        //  发起请求
        fetch(apiUrl).then((response) => {
            if(response.status !== 200) {
                throw new Error('Fail to get Data with status'+response.status)
            }
            response.json().then((responseJson) => {
                dispatchIfValid(fetchDataSuccess(responseJson.data))
            }).catch( error => {
                dispatchIfValid(fetchDataFailed(error))
            })
        }).catch( error => {
            dispatchIfValid(fetchDataFailed(error))
        })
    }
}

这里定义了一个文件模块级的变量nextSeqId, 给所有的dispatch函数加了个包装函数，在执行前先判断请求发起时定义的seqId是否和当前的nextSeqId相等，如果相等才执行。虽然不能真正的‘中止‘请求，但是可以通过这种方法让一个API请求被忽略，达到同样的效果。