时间戳

首页 > 解决方案 > 谁能解释为什么我的程序没有显示正确的警报？

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

问题描述

我已经编写了这个函数，它允许用户将图像添加到服务器。但是，我的警报似乎不起作用。我试图 console.log 警报消息，而不是将它们作为警报，但这似乎也不起作用。任何提示都会很棒。 客户端.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);

服务器.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);
});

标签： javascriptnode.jsjsonfetchclient-server

解决方案

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

then当您收到服务器的响应时将执行。
catch当客户端和服务器之间的连接失败时将执行。

在您的情况下，您没有从服务器发送任何响应，fetch函数将等待响应直到超时。但是，您没有设置任何超时。这意味着服务器没有响应或任何失败的连接。因此，您的thenor catchin fetch 将不会被执行。除非，您关闭服务器。但是，浏览器会帮助您设置默认超时，例如 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

推荐阅读