參考網(wǎng)址

Umi + Dva + Antd的React項目實踐

umi，中文可發(fā)音為烏米，是一個可插拔的企業(yè)級 react 應用框架
dva 是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案

使用axios獲取后臺數(shù)據(jù)

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 => 
    // 在發(fā)送請求之前做些什么
    config
  , error => {
    // 對請求錯誤做些什么
    Promise.reject(error)
  })
  // 添加響應攔截器
  service.interceptors.response.use((response) => 
    // 對響應數(shù)據(jù)做點什么
    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應該放這里,
   * 這里按官方意思不應該做數(shù)據(jù)處理，只是用來return state 從而改變界面
  */
 // 與后臺交互，處理數(shù)據(jù)邏輯的地方
  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")
  }