kszitt / next-initial-request

next.js框架服务端数据请求、客户端获取数据插件

语言

English

描述

next.js框架数据请求、获取插件。

安装

npm install next-initial-request --save-dev

创建http请求（举例）

async function GetActivityById(id){
  let response = await axios.get(`/api/v1/activity/info/${id}`);

  return response.data;
}
async function getActivity(params){
  let response = await axios.get(`/api/v1/activity/all`, {params});

  return response.data;
}

引入

import NextHttp from "next-initial-request"
// or
const NextHttp = require("next-initial-request");

服务端请求数据

static async getInitialProps ({req, pathname, query}) {
  let props = {};

  if(req){
    // 并发
    let results = await Promise.all([
      getActivityById(query.id),
      getActivity(),
    ]);
    /* // 同步请求（根据接口的数据请求接口时，可以用这种方式）
    let results = [];
    results[0] = await getActivityById(query.id);
    results[2] = await getActivity(); */

    props.initProps = NextHttp.initProps(results, ["activity", "activityAll"]);
  }

  return props;
}

客户端获取数据

async getActivity(){
    let params = {
        page: 1,
        perpage: 5
      },
      // NextHttp.getProps()只会在服务端渲染一次，客户端直接请求
      data = NextHttp.getProps(this, "activityAll") || await getActivity(params),
      activityAll = [];

    if(data.code === 200){
      activityAll = data.items;
    }

    this.setState({
      activityAll
    })
  }

.initProps(results, keys)

服务端请求数据保存到props中

• results{ array|object } 要保存的数据，必须
• keys{ string:array | string } 数据绑定的key值，必须

.getProps(this, key)

从props中获取数据（只会在服务端请求一次）

• this{ object } 传入当前组件的this，必须
• key{ string:array | string } 从props中根据key提取数据，必须