next.js Api 路由给我警告，如 / API 已解析，但未发送 /api/*** 的响应，这可能会导致请求停滞

Question

我正在使用带有 axios 的 next.js API 路由，我的 api 在下面给了我警告

API 已解析，但未发送 /api/authentication/login 的响应，这可能会导致请求停滞。

我找不到我做错了什么

import axios from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next'

const handler = (req: NextApiRequest, res: NextApiResponse): void => {
  axios({
    method: 'post',
    headers : { 'Content-type': 'application/json' },
    url: `${process.env.WEB_API_URL}/authentication/login`,
    data: req.body,
  })
    .then((results) => {
      res.status(results.status).json(results.data)
    })
    .catch((error) => {
      res.status(error.status).json(error.response.data)
    })
}

export default handler

Answer 1

你有一个承诺（你的axios请求），你应该返回它。发生的情况是，您的 api 函数正在被调用，一个 Promise 被启动，但是您的 api 调用的处理继续到最后（不等待 Promise 解析），并且 api 调用结束而没有响应。您可以通过以下两种方法之一解决此问题 - 返回承诺或await调用结果axios：

// Option 1 - return the promise
import axios from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next'

const handler = (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  return axios({
    method: 'post',
    headers : { 'Content-type': 'application/json' },
    url: `${process.env.WEB_API_URL}/authentication/login`,
    data: req.body,
  })
    .then((results) => {
      res.status(results.status).json(results.data)
    })
    .catch((error) => {
      res.status(error.status).json(error.response.data)
    })
}

export default handler

// Option 2 - wait for the promise to resolve
import axios from 'axios'
import type { NextApiRequest, NextApiResponse } from 'next'

const handler = async (req: NextApiRequest, res: NextApiResponse): Promise<void> => {
  try {
    const results = await axios({
      method: 'post',
      headers : { 'Content-type': 'application/json' },
      url: `${process.env.WEB_API_URL}/authentication/login`,
      data: req.body,
    })
    res.status(results.status).json(results.data)
  } catch (error) {
    res.status(error.status).json(error.response.data)
  }
}

export default handler

请注意，我Promise向您的函数添加了返回签名，但Promise<void>不正确。我对你的数据结构一无所知，所以你想更改void为实际看起来的样子。