Javascript 在Next.js中处理承诺和错误处理

Javascript 在Next.js中处理承诺和错误处理,javascript,next.js,Javascript,Next.js,我对React和Next.js不熟悉,我正试图通过sendGrid从联系人表单发送电子邮件。为了得到我想要的东西,我结合了一些教程,但我显然不理解一些东西 使用Next.js,我有一个联系人表单/pages/contact.js onSubmit calls/pages/api/sendMail,它从utils/sendMailToMe.js导入函数sendMailToMe() 代码可以工作并发送电子邮件,但我似乎无法将结果从sendMailToMe()传递回sendMail.js /utils

我对React和Next.js不熟悉,我正试图通过sendGrid从联系人表单发送电子邮件。为了得到我想要的东西,我结合了一些教程,但我显然不理解一些东西

使用Next.js,我有一个联系人表单/pages/contact.js onSubmit calls/pages/api/sendMail,它从utils/sendMailToMe.js导入函数sendMailToMe()

代码可以工作并发送电子邮件,但我似乎无法将结果从sendMailToMe()传递回sendMail.js

/utils/sendMailToMe.js
    const sendMailToMe = async (
  fullName, 
  formMessage, 
  email 
) => {

  const mail = require('@sendgrid/mail');
  mail.setApiKey(SENDGRID_API_KEY);
  
const msg = {
  to: 'mike@mydomain.com',
  from: 'mike@mydomain.com',
  templateId: 'd-3481ff06ea924128baa7c16a5a7f4840',
  dynamicTemplateData: {
    subject: 'Testing Templates',
    fullName: fullName,
    message: formMessage,
  },
};
mail.send(msg)
.then((response) => {
  console.log('in response')
  console.log(response[0].headers)
  return response[0].statusCode
 
  
})
.catch((error) => {
  console.log("there was an error")
  console.error(error)
  return 'test'+error
  
})
 
  //return response;
}

export { sendMailToMe };
import { sendMailToMe } from "../../utils/sendMailToMe";

export default async function handler(req, res) {
  if (req.method === "POST") {
      const { email, fullName, message,test } = req.body;
      if (
        typeof (email || fullName || test || message) === "undefined"
      ) {
        console.log(" ************* Invalid Data received ************ ");

        return res
          .status(400)
          .send({ error: "bad request, missing required data!" });
      } else {
        //  Data received as expected
       console.log('Calling sendMailToMe')
         const sendGridResult =  await sendMailToMe(
            fullName,
            message,
            email
          )
          .then((response)=>{console.log(response)}) //res.status(200).send({test: 'test'})})
          .catch((err) =>{ console.log(err)})//res.status(400).send({error:"Error in Sendgrid", errMsg:err})})
// API returns here regardless of outcome 
           res.status(200).send({test: 'returning here on error or success'})

      }
    }else{
        res.status(400).send({ error: "Must use POST method" });
    }
        
      

  //res.status(400).send({ error: "bad request somehow" });
  
}
这将按如下方式导入并调用到pages/api/sendMail.js

/utils/sendMailToMe.js
    const sendMailToMe = async (
  fullName, 
  formMessage, 
  email 
) => {

  const mail = require('@sendgrid/mail');
  mail.setApiKey(SENDGRID_API_KEY);
  
const msg = {
  to: 'mike@mydomain.com',
  from: 'mike@mydomain.com',
  templateId: 'd-3481ff06ea924128baa7c16a5a7f4840',
  dynamicTemplateData: {
    subject: 'Testing Templates',
    fullName: fullName,
    message: formMessage,
  },
};
mail.send(msg)
.then((response) => {
  console.log('in response')
  console.log(response[0].headers)
  return response[0].statusCode
 
  
})
.catch((error) => {
  console.log("there was an error")
  console.error(error)
  return 'test'+error
  
})
 
  //return response;
}

export { sendMailToMe };
import { sendMailToMe } from "../../utils/sendMailToMe";

export default async function handler(req, res) {
  if (req.method === "POST") {
      const { email, fullName, message,test } = req.body;
      if (
        typeof (email || fullName || test || message) === "undefined"
      ) {
        console.log(" ************* Invalid Data received ************ ");

        return res
          .status(400)
          .send({ error: "bad request, missing required data!" });
      } else {
        //  Data received as expected
       console.log('Calling sendMailToMe')
         const sendGridResult =  await sendMailToMe(
            fullName,
            message,
            email
          )
          .then((response)=>{console.log(response)}) //res.status(200).send({test: 'test'})})
          .catch((err) =>{ console.log(err)})//res.status(400).send({error:"Error in Sendgrid", errMsg:err})})
// API returns here regardless of outcome 
           res.status(200).send({test: 'returning here on error or success'})

      }
    }else{
        res.status(400).send({ error: "Must use POST method" });
    }
        
      

  //res.status(400).send({ error: "bad request somehow" });
  
}

我正在尝试将mail.send()的结果返回到api,以便返回正确的响应。现在,即使mail.send()失败,sendMail.js也会返回200。控制台将响应或错误记录在sendMailToMe()中,但我无法将响应或错误返回到sendmail.js。任何指向正确方向的指针都值得赞赏。

您的问题不在于next或react中的承诺,而在于此特定实用程序@sendgrid/mail的使用以及它是否适合react应用程序。这里最好回答:@SteveTomlin谢谢你提供的资源。我实际上更想理解异步函数的返回部分。sendgrid库工作得很好,所以我的问题更多的是想弄清楚为什么我不能“返回”响应。我确信这更多的是对异步/等待过程的理解不足,而不是对sendgrid实用程序的理解不足。我假设无论是使用@sendgrid/mail还是任何其他实用程序,我都会遇到同样的问题。你认为我的问题是针对公用事业的吗?我将尝试使用一个简单的fetch()替换sendgrid。我是新来的,非常感谢你的指导。