antd+umijs+dva+axios

参考网址

Umi + Dva + Antd的React项目实践

umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架
dva 是一个基于 redux 和 redux-saga 的数据流方案

使用axios获取后台数据

services层：

request.js

/*
 * @Author: Jenny 
 * @Date: 2019-06-13 15:15:34 
 * @Last Modified by: Jenny
 * @Last Modified time: 2019-06-13 17:05:52
 */

 import axios from 'axios'

 export default async function request (options) {
  const service = axios.create({
    // baseURL: 'https://api.example.com'
  });
  // request拦截器
  service.interceptors.request.use(config => 
    // 在发送请求之前做些什么
    config
  , error => {
    // 对请求错误做些什么
    Promise.reject(error)
  })
  // 添加响应拦截器
  service.interceptors.response.use((response) => 
    // 对响应数据做点什么
    response
  , (error) => 
    // 对响应错误做点什么
    Promise.reject(error)
  );
  let response
  try {
      response = await service(options)
      return response
  } catch (err) {
      return response
  }
}

api.js

import request from '@/services/request'

// 
// eslint-disable-next-line import/prefer-default-export
export function fetchData(params,data) {
  return request({
    // baseURL: 'https://www.easy-mock.com/mock/5a98c04628e12f3fbc3fd21a/xinedai',
    url: '/api/xxx/xxxxx',//接口名称
    method: 'post',
    params,
    data
  })
}

models层：

model.js

import { rtsGetCategorysList } from '@/services';
import { fetchData} from '@/services/api';

export default {
  namespace:"spending",// 命名空间名字，必填  
  state:{// state就是用来放初始值的
    payCode:"00"
  },
  /** 
   * // 能改变界面的action应该放这里,
   * 这里按官方意思不应该做数据处理，只是用来return state 从而改变界面
  */
 // 与后台交互，处理数据逻辑的地方
  effects:{
    *fetchData({ payload }, { call, put }){
      const response = yield call(fetchData, payload);
      console.log("speding",response)
    },
  },
  reducers:{
    
  }
}

components层：

index.js

componentDidMount() {
    const { dispatch } = this.props;
    console.log("componentDidMount............")
     dispatch({
       type: 'spending/fetchData',
     });
    console.log("componentDidMount............end")
  }