Question

我使用react和express创建了一个简单的网页。一个模块包含一个简单的表单，其中包含文本输入字段，电子邮件输入字段和提交按钮，并且在提交时应该将邮件发送给我，其中包含来自输入字段的数据。我用nodemail创建了这个发送邮件的东西！幸运的是，它可以在chrome上运行，不幸的是，它不能在其他浏览器（firefox，IE，chrome在移动设备上）上运行。

我发现问题不在于后端，而在于连接前端和后端的函数中，但是在那之后我被卡住了，不知道该怎么办：（

 onSubmit = e => {
    var newMessage = {
        msg_sender: this.state.msg_sender,
        msg_content: this.state.msg_content
        }
        axios.post("http://localhost:4000/message", newMessage)
            .then(res => console.log(res.data))
            .catch(err => console.log("Error! " + err)
            );
    };

那是连接前端和后端的部分-正如我说的，它在chrome中可以正常工作，但在其他浏览器中则不能。

Answer 1

箭头功能仍然是JavaScript中的一个相对较新的功能，不幸的是，某些浏览器仍不是最新的，并且可能永远无法支持它们（请看您的Internet Explorer）。

有两种方法可以解决此问题。

1）您可以将所有箭头功能改制成标准功能：

onSubmit = function(e){
    var newMessage = {
        msg_sender: this.state.msg_sender,
        msg_content: this.state.msg_content
        }
    var axiosSetup = axios.create({
         baseURL: "http://localhost:4000"
    })

        axiosSetup.post("/message", newMessage)
            .then(function(res){ console.log(res.data) })
            .catch(function(err){ console.log("Error! " + err) })
            );
    };

2）您可以将Babel集成到您的应用程序中，该应用程序是将您的javascript转换为适用于所有浏览器的兼容代码的编译器：

https://babeljs.io/

如果您要构建与浏览器兼容的应用程序，那么最好查看mozilla的Web开发人员指南，这对于检查您的代码是否可以在其他浏览器上运行非常有用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

或者，您也可以使用JavaScript的本机访存API。好处是您无需安装任何库，并且在所有浏览器中使用的设置都相同

onSubmit = function(e){
    var newMessage = {
        msg_sender: this.state.msg_sender,
        msg_content: this.state.msg_content
   }
    fetch('http://localhost:4000/message', {
       method: 'POST',
       body: newMessage
    })
    .then(function(res){ console.log(res.json()) })
    .catch(function(err){ console.log("Error! " + err) })

};

在此处查看文档： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Javascript代码可在Chrome中使用，但不能在其他浏览器中使用

1 个答案: