谁能解释为什么我的程序没有显示正确的警报？

Question

我写了这个功能，允许用户将图像添加到服务器。但是，我的警报似乎不起作用。我试过 console.log 警报消息而不是将它们作为警报，但这似乎也不起作用。任何提示都会很棒。 client.js

async function picsub(event){
    event.preventDefault();
    var image=document.getElementById('imageFile');
    const formData = new FormData();;
    formData.append('image',image.files[0]);
    let i={
        method:'POST',
        body:formData,

    }
    fetch('http://127.0.0.1:8090/pics', i).then((response) => {
        return response.text();
    }).then((response) => {
        if (response === 'success') {
            alert('pic added');
        } else {
            alert('An error has occurred');
        }
    }).catch((e) => {
        alert('An error has occurred');
    
    form.reset();

}

const form = document.getElementById("form");
form.addEventListener("submit", picsub);

server.js

const app = express();
const port = 8090;

let pictures=[];

app.post('/pics', (req, res) => {
    const pic = req.body;
    console.log(pic);
    pictures.push(pic);
    res.status(201);
});

Answer 1

这里尽量不要使用async。另外，尝试 console.log() 函数内的一些东西，尤其是 alert() 附近。这样，您就知道它甚至可以到达 alert()

Answer 2

在您的快递中，您只设置了状态，但没有从服务器发送任何消息。因此，您的 then 或 catch 中的 fetch 将被执行。

then 将在您收到服务器响应时执行。
catch客户端与服务器连接失败时执行

在你的情况下，你没有从服务器发送任何响应，fetch函数将等待响应直到超时。但是，您没有设置任何超时。这意味着没有来自服务器的响应或任何失败的连接。所以，你在 fetch 中的 then 或 catch 将不会被执行。除非，你关闭了服务器。但是，浏览器会帮助您设置默认超时，例如 Chrome。它使用 300 秒作为超时。

因此，您需要使用 res.end("success") 发送消息，如下所示。

app.get('/pics', function (req, res) {
    const pic = req.body;
    console.log(pic);
    pictures.push(pic);
    res.status(201).end("success");
})

并且在您的 client.js 中，您应该完成 fetch 函数中的括号。

fetch('http://127.0.0.1:8090/pics', i).then((response) => {
    return response.text();
}).then((response) => {
    if (response === 'success') {
        alert('pic added');
    } else {
        alert('An error has occurred');
    }
}).catch((e) => {
    alert('An error has occurred');
}) // ===> here

谁能解释为什么我的程序没有显示正确的警报？

Can anyone explain why my program is not showing the correct alert?

javascript

json

client-server

fetch

node.js