我如何查看为什么 Axios POST 请求没有将负载数据发送到 Heroku 后端？

Question

目标：前端 React 应用程序可以将数据作为 POST 请求发送到 Heroku 后端。

框架：使用 Axios 做出反应

我一直在尝试在 Axios post 请求函数上设置断点，但它似乎不起作用。我已经用 .then 设置了一个承诺声明，但是没有任何响应被发送回控制台。

下面是 React 组件和 Axios POST 在提交时运行。

如有任何帮助，我们将不胜感激。

我已经测试了 POSTMAN 的 POST 请求，数据确实具有状态 200 并且确实已发送。

另外，我更新了 promise 和 try-catch。 Promise 被注释掉了，因为我无法让它与当前语法一起工作。如果你觉得最好用，请看代码，看看为什么语法问题。

import React from 'react';
 import {useState} from 'react';
 import Axios from 'axios'
 //import { response } from 'express';


 const QuoteForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [question, setQuestion] = useState("");



  /* This is the promise version however it has sytax issues : 
  the funtion containing the promise doesn't properly close so return expects } instead has ) 



   const custData =  { name:name , 
    email:email , 
    question:question} ;



   const submitQuestion =  new Promise ((resolve, reject)=>
  
    resolve(Axios.post('https://hookahsite-backend.herokuapp.com  || https://localhost:8000 ' , custData)
    .then(()=> {console.log("success, data sent")})
    .catch(()=>{console.log("error when sending")})
    )
    
  
   
 */ 

    //this uses try catch however the backend is not getting hit with any data
    //tested this same request in Postman and it works 
    function submitQuestion() { 
      try {
       Axios.post('https://hookahsite-backend.herokuapp.com ' ,
      {
        name:name , 
        email:email , 
        question:question
        
      },
      )
      }
      catch (err) {console.error(err);}
        }
         






     return(
         <React.Fragment>



     <form id="quoteForm" 
     
     >
       <h1 id="quoteTitle">Quote Help Form</h1>
       <p id="quotePar">Please provide your Name, Contact Email, and what products you would like more information about in this form :</p>

   <label id="formName" className="Form">
     Name:
     <input type="text" name="name" 

     onChange={(event) => { setName(event.target.value);}}

     />
   </label>

   <label id="formEmail" className="Form">
     Email:
     <input type="text" name="email" 
     onChange={(event) => { setEmail(event.target.value);
     }}/>
   </label>
   <br/>
   <label id="formQuestion" className="Form" >
     What products would you like to know more about:
     <input type="text" name="help" 
     onChange={(event) => { setQuestion(event.target.value);
     }}/>
   </label>

   <br/>
   <br/>

   <button id="quoteSubmit" type="submit" 

   onClick = 
   {
     submitQuestion
     
   }

   /*
   old way
      {()=>
    
    submitQuestion()
    
  }
  */

   >Submit </button>

   </form>

   ›


         </React.Fragment>

     )
 };

 export default QuoteForm;

服务器端代码：

注意前端的 Try Catch 没有接收到要抛出的错误。后端代码也应该发送控制台日志，但不是。现在，如果我通过 postman 发送它，就会有一个控制台日志，它的状态为 200

app.post('/' , (req,res) => {
    const {email, name, question} = req.body;
    res.header("Access-Control-Allow-Origin", "*");
    console.log(`Your Email is ${email} and your name is ${name} and your ${question}`);



//MYSQL updating table

pool.query("INSERT INTO customer_questions (name, email, question) VALUES (?,?,?)",
    [name, email, question], (err,res)=> {
        if (err) {
            console.log(err)
        }else {
            res.send('data sent')
        }
        
    }
    );


});

Answer 1

这里有两个选项：

承诺或async/await。

它们有不同的优点和缺点我建议你研究它们（阅读文档或观看关于它们的视频）它们基本上做同样的事情，但方式不同。

此代码未经测试，如有任何语法错误，敬请谅解。

// Promise option 
const funcWithPromise = () => {  
 Axios.post('https://hookahsite-backend.herokuapp.com  || https://localhost:8000 ' , custData)
 .then( (axiosResponse)=> { 
                  // here you can use the data 
                  const submitQuestions = axiosResponse.data;
                  console.log(submitQuestions);
                  })
                  
 .catch((e)=> {console.log(e)})
 
 }
 
 // or using async/await
 const funcWithAsync = async () => {
    try {
        const submitQuestions = await Axios.post('https://hookahsite-backend.herokuapp.com  || https://localhost:8000 ' , custData);
        console.log(submitQuestions);
    }
    catch (e) {
      console.log(e);    
    }
 }

我如何查看为什么 Axios POST 请求没有将负载数据发送到 Heroku 后端？

How do I see why Axios POST request is not sending payload data to Heroku Backend?

post

reactjs

axios