Question

我必须在nextjs项目中进行相同的更改，因为我的enpoint API不支持很多调用，并且我希望每3分钟刷新一次原始数据。

我从nextjs实现了API：我创建了一个pages/api/data，然后在内部调用端点，并在getInitialProps内对数据文件进行了索引调用。

get工作正常，但是我有两个问题：

1：我有一条警告消息：

API解析后未发送对/ api / data的响应，这可能导致请求停止。

2 ：它不会在3分钟后重新加载数据。我想这是因为Cache-Control值...

这是我的代码：

页面/ api /数据

import { getData } from "../../helper";

export default async function(req, res) {
  getData()
    .then(response => {
      res.statusCode = 200
      res.setHeader('Content-Type', 'application/json');
      res.setHeader('Cache-Control', 'max-age=180000');
      res.end(JSON.stringify(response))
    })
    .catch(error => {
      res.json(error);
      next();
    });
};

页面/索引

import React, { useState, useEffect } from "react";
import fetch from 'isomorphic-unfetch'

const Index = props => {

  return (
    <>Hello World</>
  );
};

 Index.getInitialProps = async ({ res }) => {
  const response = await fetch('http://localhost:3000/api/data')
  const users = await response.json()
  return { users }
};

export default Index;

Answer 1

You should return a Promise and resolve/reject it.

示例：

import { getData } from "../../helper";

export default async function(req, res) {
  return new Promise((resolve, reject) => {
    getData()
      .then(response => {
        res.statusCode = 200
        res.setHeader('Content-Type', 'application/json');
        res.setHeader('Cache-Control', 'max-age=180000');
        res.end(JSON.stringify(response))
        resolve();
      })
      .catch(error => {
        res.json(error);
        res.status(405).end();
        return resolve(); //in case something goes wrong in the catch block (as vijay) commented
      });
  });
};

Answer 2

import { getData } from "../../helper";

export default async function (req, res) {
  try {
    const response = await getData();
    res.statusCode = 200;
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Cache-Control', 'max-age=180000');
    res.end(JSON.stringify(response));
  }

  catch (error) {
    res.json(error);
    res.status(405).end();
  }
}

API已解决但未在Nextjs中发送响应

2 个答案: