如果服务器断开连接，是否可以防止表单提交？

Question

假设我有一个提交到 POST 路由 /example 的表单：

<form action="/example" method="POST">
  <input type="text" name="fname"><br>
  <input type="text" name="lname"><br>
  <button type="submit">Send</button>
</form>

app.js：

app.post('/example', (req, res) => {
  ... 
});

server.js

const app = require('./app');

app.listen(3000, () => {
    console.log('server is running on port 3000');
});

如果服务器断开连接，Javascript 是否提供了一种阻止表单提交的方法，以防止网站崩溃？

我在网上搜索过，但找不到任何此类解决此问题的方法。

Answer 1

您可以这样做，但必须以编程方式完成，而不是通过action 属性隐式完成。为此，您可以使用 Promises 中的 then/catch 或使用 async/await 进行 try/catch，如下例所示：

<form>
      <input type="text" name="fname" />
      <br />

      <input type="text" name="lname" />
      <br />

      <button type="submit">Send</button>
    </form>

    <script>
      const form = document.querySelector('form');

      form.addEventListener('submit', async (event) => {
        event.preventDefault();

        const elements = event.target;
        const firstName = elements['fname'].value;
        const lastName = elements['lname'].value;
        const dataToSend = { firstName, lastName };

        try {
          const response = await fetch('/example', {
            method: 'POST',
            body: JSON.stringify(dataToSend),
            headers: { 'Content-Type': 'application/json' },
          });
          const data = await response.json();

          console.log('Data returned from the server', data);
        } catch (error) {
          console.log('Uups! Something went wrong', error);
        }
      });
    </script>