# next-initial-request

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

Latest version **0.0.2** (published 2019-10-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install next-initial-request
pnpm add next-initial-request
yarn add next-initial-request
bun add next-initial-request
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2019-10-11 |
| First published | 2019-07-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | kszitt |
| Maintainers | kszitt |
| Keywords | next, next.js, request, http, initial, init, props, ajax |

## Links

- npm: https://www.npmjs.com/package/next-initial-request
- Repository: https://github.com/kszitt/next-initial-request
- Homepage: https://github.com/kszitt/next-initial-request.git
- Issues: https://github.com/kszitt/next-initial-request/issues
- npm.io page: https://npm.io/package/next-initial-request

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2019-10-11
- 0.0.1 — 2019-07-26

## README

### 语言
[English](https://github.com/kszitt/next-initial-request/blob/master/README_EN.md)

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

### 安装
``` javascript
npm install next-initial-request --save-dev
```

### 创建http请求（举例）  
``` javascript
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;
}
```
### 引入
``` javascript
import NextHttp from "next-initial-request"
// or
const NextHttp = require("next-initial-request");
```
### 服务端请求数据
``` javascript
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;
}
```
### 客户端获取数据
``` javascript
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`提取数据，必须

---
_Source: https://npm.io/package/next-initial-request · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._