參考網(wǎng)址
Umi + Dva + Antd的React項(xiàng)目實(shí)踐
umi罐脊，中文可發(fā)音為烏米褐望，是一個(gè)可插拔的企業(yè)級(jí) react 應(yīng)用框架
dva 是一個(gè)基于 redux 和 redux-saga 的數(shù)據(jù)流方案
使用axios獲取后臺(tái)數(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ā)送請(qǐng)求之前做些什么
config
, error => {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
Promise.reject(error)
})
// 添加響應(yīng)攔截器
service.interceptors.response.use((response) =>
// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
response
, (error) =>
// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
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應(yīng)該放這里,
* 這里按官方意思不應(yīng)該做數(shù)據(jù)處理挣轨，只是用來return state 從而改變界面
*/
// 與后臺(tái)交互军熏，處理數(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")
}
