React 这一框架相对于原生框架及VUE框架来讲相对于要严谨一些，在使用这一框架得过程中，页面得接口调用是我认为与其他框架区别较为不同得，因为它得逻辑存在于三个文件之间，下面就以我自己得实践过程来梳理一下接口调用得过程。
1. 了解接口调用得目录结构
目录结构：
- -services 文件夹
--- getFirstData.js- -models 文件夹
--- getFirstData.js- -pages 文件夹
--- index.js
首先在我们的意识中要知道接口调用所要涉及的目录包括哪几个，services 文件夹对应的js文件是用来创建接口，models 文件夹对应的js文件是用来请求接口，并对数据进行处理推给页面，pages 文件夹对应的页面来使用数据对页面进行渲染。
我们对每个对应的文件夹的用途有了大体的了解，下面就该对每一个文件夹进行细致的了解，从语法到使用来进行学习。
2. 如何调用接口数据渲染页面
首先我们获得了一个后端给我们的接口，例如：/xx/app/data/list 的接口，第一步我们需要在services 文件夹对应的js文件创建该接口，也就是我们例子中的services/getFirstData.js文件内创建。
2.1 services 文件夹进行接口创建
import request from "@/utils/request";
export async function getDouBanChannels(params) {
return request('/xx/app/data/list', {
method: 'get',
data: params,
})
}
这个文件中只需要写这些代码，其中可以更改的地方只有三处： getDouBanChannels 函数名 /xx/app/data/list 接口地址 get获取数据方式。
创建好了接口，就要对接口进行一些数据的请求，这一过程就交给models文件中对应的js文件了，services/getFirstData.js文件与models/getFirstData.js文件用创建的函数名称getDouBanChannels关联，下面就来看一下models 文件夹中对应的js文件做了哪些工作吧。
2.2 models 文件夹进行接口请求
//引入创建好的接口
import { getDouBanChannels } from '@/services/getFirstData';
//声明变量
const GetFirstData = {
//namespace:model数据层的命名，与view视图层作为连接
namespace: 'getFirstDataHome',
state: {
initData: [],
},
//异步操作
effects: {
*fetchInitData(payload, { call, put }) {
const response = yield call(getDouBanChannels, payload);
yield put({
type: 'saveInitData',
payload: response,
});
},
//需要直接处理数据后，抛出数据
*getAreaTreeData ({ payload, callback }, { call }) {
const response = yield call(fetchReginTree, payload);
if (response.code === 200) {
if (callback && typeof callback === 'function') {
let treeResult = response.data
callback(treeResult)
}
}
},
//同步操作
reducers: {
saveInitData(state, { payload }) {
return {
...state,
initData: payload,
}
}
},
};
//将变量抛出
export default GetFirstData;
Model 对象的属性：
- namespace: 当前 Model 的名称。整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成
- state: 该 Model 当前的状态。数据保存在这里，直接决定了视图层的输出
- reducers: Action 处理器，处理同步动作，用来算出最新的 State
- effects：Action 处理器，处理异步动作
- call：执行异步函数
- put：发出一个 Action，类似于 dispatch
在上面的例子中，import引入创建好的接口，export抛出包裹着对请求到的接口数据的处理，namespace是用来与view视图做连接的
2.3 pages 文件夹进行页面渲染
// 引入框架API
import { connect } from 'umi';
// 将getFirstDataHome的数据和本页面的initData创建连接
@connect(({ getFirstDataHome}) => ({
initData: getFirstDataHome.initData
}))
// type: 'getFirstData/getFirstDataHome'
// 这一行指的是调用getFirstData.js中的getFirstDataHome方法
class FirstPage extends React.Component {
// 页面加载完成前请求接口
componentDidMount() {
//执行函数
this.getInitData();
const { dispatch } = this.props;
if (dispatch) {
//dispatch 是一个函数方法，用来将 Action 发送给 State。
dispatch({
type: 'getFirstData/getFirstDataHome',
});
}
}
//接收传来的处理过的数据
getInitData = () => {
const { dispatch } = this.props;
let params = {};
if (dispatch) {
dispatch({
//serviceCenterSetting：models中namespace，
//getAreaTreeData：models中effects:中的函数
type: 'serviceCenterSetting/getAreaTreeData',
payload: params,
callback: (res) => {
this.setState({
searchOptions: res,
});
},
});
}
};
render() {
// 通过props引入数据
const {
initData
} = this.props;
// 在页面中使用数据
return (
<div>
{initData}
</div>
)
}
}
