Код Javascript работает в Chrome, но не в других браузерах

Question

Я создал простую веб-страницу, используя реагирование и экспресс. Один модуль содержит простую форму с полем ввода текста, полем ввода электронной почты и кнопкой отправки, а при отправке он должен отправить мне письмо, содержащее данные из полей ввода. Я использовал 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руководство, которое является отличным справочным материалом для проверки того, будет ли ваш код работать в других браузерах.

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

В качестве альтернативы, вы также можете использовать собственный API выборки JavaScript.Преимущество заключается в том, что вам не нужно устанавливать какие-либо библиотеки, и его настройки для использования будут одинаковыми во всех браузерах

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