## 使用`axios`和`middleware`优化`API`请求
先安装下[axios](https://github.com/mzabriskie/axios)
`npm install --save axios`
既然用到了`redux`，配合中间件优化`API`请求，`actions`创建函数时这样的（比我们现在写的`fetch`简单多了）：
~~~
export function getUserInfo() {
return (
types: [GET_USER_INFO_REQUEST, GET_USER_INFO_SUCCESS, GET_USER_INFO_FAIL],
promise: client => client.get('http://10.10.100.217:10088/api/userInfo.json'),
afterSuccess: (dispatch, getState, response) => {
/*请求成功后执行的函数*/
},
otherDate: otherData
)
}
~~~
[中间件的教程](http://cn.redux.js.org/docs/advanced/Middleware.html)
然后再`dispatch(getUserInfo())`后，通过`redux`中间件来处理请求逻辑：
接下来分析一下中间件所需要的逻辑
1. 请求之前需要执行`dispatch` 的 `REQUEST`请求。
2. 成功后就需要执行`dispatch` 的 `SUCCESS`请求。（如果定义了`afterSuccess()`函数就调用它。）
3. 如果失败了就需要执行`dispatch` 的 `FAIL`请求。
Show Me The Code：
~~~
cd src/redux
mkdir middleware
cd middleware
touch promiseMiddleware.js
~~~
`src/redux/middleware/promiseMiddleware.js`
~~~
import axios from 'axios'
export default store => next => action => {
const {dispatch, getState} = store
/* 如果dispatch来的是一个function，此处不做处理，直接进入下一级 */
if (typeof action === 'function') {
action(dispatch, getState)
return
}
/* 解析action */
const {
promise,
types,
afterSuccess,
...rest
} = action
/* 没有promise，证明不是想要发送ajax请求的，就直接进入下一步啦！ */
if (!action.promise) {
return next(action)
}
/* 解析types */
const
}
~~~
