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"// orconst 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提取数据，必须

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。