axios+redux请求响应更新

1. 安装axios模块

cnpm install axios --save

2. 配置本地调试请求环境：

 

在package.json中添加字段 : "proxy": "http://localhost:xxxx" 

3. axios请求响应拦截 （请求响应loading加载交互）

import axios from 'axios';
import { Toast } from 'antd-mobile';

console.log( Toast );

//拦截请求
axios.interceptors.request.use(function(config){
    Toast.loading('加载中',0);
    return config;
});


//拦截响应
axios.interceptors.response.use(function(config){
    Toast.hide();
    return config;
});

export default axios;

4.   axios和redux结合使用，异步请求更新数据

（1）Auth.redux.js ：

export function getUserData(){
    return dispatch=>{
        axios.get('/data').then((res)=>{
            let data = JSON.parse(res.request.responseText);
            dispatch(userData(data));
        })
    }
}

export function userData(data){
    return {type: USER_DATA, payload:data }
}

（2）Auth.js :

...
import { login, getUserData } from './Auth.redux.js';
@connect(
    state=>state.auth,
    { login, getUserData }
)
...
componentDidMount() {
    this.props.getUserData()
}

走自己的路，让别人说去吧 ~