列表页面数据请求设计

终于说到请求了。

在发送请求之前需要构建请求参数，请求完成后需要对响应结果进行处理，包括成功的响应处理和错误的处理。

请求参数

列表的分页请求参数一般包括以下参数：

参数	说明
BeginNumber	查询的起始笔数
QueryNumber	查询笔数
Sort	排序类型
Filter	过滤条件

响应参数

列表页的响应结果一般有以下字段：

字段	说明
Total	总数(可选)
List	本次查询的数据列表
Finished	是否已返回全部(可选)

创建请求方法

在vuex中使用action发请求。

const state = {
  list: [],
  total: 0,
  params: {
    BeginNumber: 0,
    QueryNumber: 10,
    Sort: 0,
    Filter: 0
  }
};

const actions = {
  queryList({ commit, state }, params) {
    // 将当前请求参数保存
    // 这样当页面刷新时可以使用当前的排序或过滤
    commit('updateParams', params);
    return API.getList(params)
      .then(rsp => {
        const { Total, List } = rsp.body;
        // 这里对数据进行处理
        const list = handleList(List);
        commit('updateTotal', Total);
        // 请求第一页
        if (params.BeginNumber === 0) {
          commit('updateList', list);
        }
        // 非第一页，则追加数据
        else {
          commit('updateList', state.list.concat(list));
        }
        // 返回是否全部加载完成
        return state.list.length >= Total;
      })
      // 将错误处理成具体的格式(给组件使用)并返回错误
      .catch(handleError);
  },
  // 请求第一页数据
  refreshPage({ dispatch }, params = {}) {
    params.BeginNumber = 0;
    return dispatch('queryList', params);
  },
  // 请求下一页
  nextPage({ state, dispatch }) {
    const BeginNumber = state.params.BeginNumber + state.queryNumber;
    return dispatch('queryList', { BeginNumber });
  },
  // 排序
  sortList({ dispatch }, sort) {
    return dispatch('refreshPage', { Sort: sort });
  },
  // 过滤|筛选
  filterList({ dispatch }, filter) {
    return dispatch('refreshPage', { Filter: filter });
  },
};

结合列表页面组件使用

1. 给列表组件的load的事件绑定nextPage的action。

<ScrollView
  ref="component"
  onLoad={this.nextPage}
  scopedSlots={{
    // 加载失败的插槽
    error(error) {
      // 需要根据error进行具体错误展示，这里只展示一种错误情况
      return (
        <div>
          数据加载失败，
          <a onClick={this.tryAgain}>点击再次加载</a>
        </div>
      );
    }
  }}
>
  {this.list.map(item => <Item item={item} />)}
</ScrollView>

tryAgain() {
  this.setComponentStatus(ComponentStatus.Loading);
  // 使用上次请求的参数，再次请求
  this.queryList()
    .then(finished => {
      this.setComponentStatus(finished ? ComponentStatus.Finished : ComponentStatus.LoadMore);
    })
    .catch(e => {
      this.setComponentStatus(ComponentStatus.Failed);
      // 根据e再做具体处理
    });
}

在actions中，结合事件通知PageListBus：

// 请求第一页数据
refreshPage({ dispatch }, params = {}) {
  params.BeginNumber = 0;
  PageListBus.dispatch('beforeRefresh');
  return dispatch('queryList', params)
    .then(finished => {
      PageListBus.dispatch('afterRefresh', finished);
    })
    .catch(error => {
      PageListBus.dispatch('afterRefresh', { error });
    });
},