下一个 js API 在没有发送 /api/contact 响应的情况下解析，这可能会导致请求停止

Question

在 Next.js 中的以下 API 路由上获取 API resolved without sending a response for /api/contact, this may result in stalled request。它正在使用 sendgrid 并且电子邮件已发送，但我没有收到回复，因此我可以处理错误或成功消息。

我已经用前端代码更新了下面的内容。我现在没有收到该错误，但在前端调用 'const response = await fetch('/api/contact'..' 没有返回任何内容

const sgMail = require('@sendgrid/mail');

sgMail.setApiKey(process.env.SENDGRID_APIKEY);

export default function handler(req, res) {
    if (req.method === 'POST') {
        const email = {
            from: process.env.EMAIL_FROM,
            to: process.env.EMAIL_TO,
            subject: 'Website Contact Form',
            html: `<div>
          <div><strong>Name:</strong> ${req.body.name}<br/></div>
          <div><strong>Phone:</strong> ${req.body.phone}<br/></div>
          <div><strong>Email:</strong> ${req.body.email}<br/></div>
          <div><strong>more:</strong> ${req.body.more}<br/></div>
        </div>`,
        };

        try {
            return sgMail
                .send(email)
                .then(() => {
                    console.log('res1', res);
                    //return res;
                    return res.status(200).end();
                })
                .catch((error) => {
                    console.log('error', error);
                    return res.status(500).send(error);
                });
        } catch (error) {
            console.log('error 2', error);
            res.json(error);
            return res.status(405).end();
        }
    }
}

import React from 'react';
import { Formik, Form } from 'formik';
import * as Yup from 'yup';

import TextAreaField from './textAreaField';
import TextField from './textfield';

function ContactForm() {
    return (
        <Formik
            initialValues={{
                name: '',
                phone: '',
                email: '',
                more: '',
            }}
            validationSchema={Yup.object({
                name: Yup.string().required('Required'),
                phone: Yup.string().required('Required'),
                email: Yup.string().email('Invalid email address').required('Required'),
                more: Yup.string().required('Required'),
            })}
            onSubmit={async (values, { setSubmitting }) => {
                setSubmitting(true);
                const response = await fetch('/api/contact', {
                    body: JSON.stringify({
                        name: values.name,
                        phone: values.phone,
                        email: values.email,
                        more: values.more,
                    }),
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    method: 'POST',
                });
                console.log('response', response);
                const data = await response.json();
                console.log('response 1', data);
                setSubmitting(false);
            }}
        >
            {(props) => {
                const { values, setFieldValue } = props;
                console.log('props', props);
                console.log('values', values);
                return (
                    <div className="c-contact-form">
                        <Form className="form">
                            <TextField label="Customer Name" name="name" type="text" placeholder="John" />
                            <TextField label="Phone Number" name="phone" type="text" placeholder="07909765432" />
                            <TextField label="Email Address" name="email" type="email" placeholder="John@gmail.com" />
                            <TextAreaField label="More" name="more" placeholder="More details" />
                            <button type="submit" className="c-btn">
                                Submit
                            </button>
                        </Form>
                        {values.success && (
                            <div>
                                <p>Your enquiry has been successfully submitted.</p>
                            </div>
                        )}
                        {values.nosend && (
                            <div>
                                <p>OOPS, something went wrong but we know about it. please contact us via email or phone</p>
                            </div>
                        )}
                    </div>
                );
            }}
        </Formik>
    );
}

export default ContactForm;

Answer 1

您需要像下面这样发回响应

try {
  sgMail
    .send(email)
     .then(() => {
         console.log('res', res.json);
         return res.status(200).end();
     })
      .catch((error) => {
        console.log('error', error);
        return res.status(500).send(error);
     });