alita项目中的数据流（数据定义到最终页面使用全过程）

1. 什么是数据流

数据流(data stream)是一组有序，有起点和终点的字节的数据序列。包括输入流和输出流。 百度百科

2. 我们为什么要懂这个数据流

• 在一个项目中，不同文件有不同的作用。而文件之间需要相互传递数据，整个项目才能正常运作起来。

• alita项目开发中，最主要的任务是将从服务端的数据获取并处理，最后渲染的页面中，而这一过程需要多个文件共同作用，那么开发者必须要知道这些数据的处理过程，才能准确控制每一个变量的输入与输出。

• 其实我认为：在alita框架中编程就是对数据获取、数据流向的控制、针对业务处理数据以及数据展示。

3. mock数据在项目中的使用

在谈一谈mock数据一文中有解释到为什么会有mock数据。

3.1. 数据的定义与暴露

3.1.1. 定义请求数据

3.1.1.1. 定义在mock文件中

直接在mock文件中定义一个数据对象：

export default {
  'POST /api/list': 
  [
    {
      id: '123',
      name: 'aolyu',
      age: 17,
    },
    {
      id: '456',
      name: 'azhen',
      age: 18,
    },
  ],
};

• 这里的数组对象就是mock数据（可以是其他类型的对象，不限于此方式），我们页面需要使用它。

• POST：表示的的过去这个数据的请求方式（也可以是GET）

• /api/list：在外调用的接口（后面会讲）。

3.1.1.2.（推荐）定义在json文件中

• 在开发中我会使用这个方法，因为很多时候数据是相当多的，定义在mock文件中阅读起立困难。定义在json文件中代码结构清晰，更容易阅读与维护，因为很多时候我们不用在意数据对象的具体情况。

• 使用方法(mock文件)：

import list from './json/list.json'; // 从json引入数据对象

export default {
 'POST /api/list': list
};

• 和3.1.1.1.相比，此时的代码清晰了许多。

  注意：json文件中的数据定义需要严格按照json格式，否则会报错。

3.1.2. 暴露

使用POST方式，定义list路径，表示外部可以通过list路径同时使用POST请求方式，就可以获取这里的list数据。

4. 通过接口获取数据

在前面已经定义好数据，并且提供了获数据的方式，那么这里讲解如何得到它们。
alita项目存在src/models文件，它是专门用于从服务端获取数据并且把数据推送到页面中（可以理解为中间传递者）。

4.1. 在models中调直接用api获取

通过3.1.2.提供的请求方法和路径，使用request来请求即可，如：

const data = yield request(
    '/api/list',  // 请求路径（前面已经提供出来）
    { method: 'POST' }  // 请求方式
  );

4.2.（推荐）定义统一的api存放文件：services/api.ts

• 可能在上面的请求方式中，已经很简洁了，但是对于模块化开发来说，需要统一管理，所以alita项目中推荐将所有的api请求统一定义到一个文件中，并默认定义了services/api.ts文件，这样便于维护。

• 统一定义方式：

export async function queryList(): Promise<any> {
 return request('/api/list', {
   method: 'POST',
 });
}

说明：
async：表示异步请求。
queryList：对外提供一个调用这个请求的方法（可以理解为将请求封装起来，方便使用）。

• 在models中使用这个定义好的请求方式：

const data = yield call(queryList);  // queryList需要与上一段代码对应。

5. 将获取到的数据推到页面中

现在已经获取到服务端传来的数据了，那么这里开始处理把数据送到页面。

5.1. yield put

put是将刚才获得的数据data存到state当中。（state的状态可以判断控件是否已更改，是否需要重新渲染）

yield put({
    type: 'save',
    payload: {
      lists: data,
    },
  });

在这之前需要在state提前定义lists变量，它与IndexModelState绑定，所以在页面导入IndexModelState就可以可以在页面当中获取并使用（这里未讲其中的绑定情况，具体可看真实项目中的name属性）。

5.2. reducers

固定使用方式：

reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
  },

将数据推到页面中。

6. 在页面中取得数据

通过上面所有步骤，现在已经把数据传到页面。

• 获取方式：

const { lists } = index;

当然这个数据怎么使用就需要看具体的项目了。

---

本人学历有限，有问题的地方希望诸位给出指导，谢谢

---