Javascript 页面在fetch（）之后保持刷新。然后（）承诺（例如设置了preventDefault（））

您好，我正在使用ytdl和express构建一个简单的API，正在讨论的路由将下载一个文件

app.post('/audio', (req, res) => {
    console.log(`Downloading audio from ${req.body.url}`);
    downloadAudio(req.body.url)
        .then(i => res.send())
        .catch(e => console.log(e));

    // setTimeout(() => {
    //     res.send();
    // }, 3000);
    // console.log('Audio');
    // console.log(req.body.url, ' - ', req.body.format);
});

这是下载音频功能

const downloadAudio = url => {
    return new Promise((resolve, reject) => {
        ytdl.getInfo(url)
            .then(({ title }) => {
                const stream = ytdl(url);
                const proc = new ffmpeg({ source: stream });
                proc.save(`./public/downloads/${title}.mp3`);
                resolve();
                console.log(title);
            })
            .catch(error => {
                console.log('Custom error');
                reject(error);
            });
    });
};

问题出在这个取回上

// 'http://localhost:5000/audio' is the first fetch argument
fetch(`${API_URL}/${format}`, {
        method: 'POST',
        body: jsonVideo,
        header: {
            'content-type': 'application/json',
        },
    })
        .then(res => {
            $button.textContent = 'Download';
            $button.removeAttribute('disabled');
            console.log('Done', res);
        })
        .catch(e => console.log(e));

得到响应后，页面在完成then（）中的操作后重新加载 在上面的路由中，如果我使用setTimeout进行测试，它会等待3秒钟，然后发送响应，程序会按照预期工作，而不会刷新页面，但是如果我使用Promissions，它会在devtools中显示响应一秒钟，但会重新加载页面
请记住，我在事件侦听器的第一行有

e.preventDefault（）

，其中包含该提取。

谢谢

编辑

---

这是可行的，但如果我取消对downloadAudio的注释并删除第一个send，它将在fetch中的响应到达控制台（devtools）后再次开始刷新，您必须添加两个。然后，一个用于将返回的承诺转换为文本或json，另一个用于实际结果

因此，应通过以下操作来解决上述问题：

fetch(`${API_URL}/${format}`, {
        method: 'POST',
        body: jsonVideo,
        header: {
            'content-type': 'application/json',
        },
    })
    .then(res=>res.json())
        .then(res => {
            $button.textContent = 'Download';
            $button.removeAttribute('disabled');
            console.log('Done', res);
        })
        .catch(e => console.log(e));

编辑

如果这不起作用，您可以始终使用Blob URL创建一个内联iframe，获取iframe中的数据，然后将其回发到大型机（并隐藏iframe以防查看），这样，如果页面刷新，用户将永远不会知道。例如：

功能c（s）{
返回s.split（“”）。join（“”）。split（&；“”）。join（&）
}
var asdf=document.createElement（“iframe”）；
asdf.src=URL.createObjectURL（新Blob（[c（tt.innerHTML）]{
键入：“text/html”
}))
asdf.addEventListener（“加载”，（）=>{
asdf.contentWindow.postMessage（23，“*”）
});
文件.正文.附件（asdf）；
addEventListener（“message”，e=>/*对获取的数据进行处理*/console.log（e.data））

asdf
文件编写（2134）；
window.addEventListener（“消息”，e=>{
gf.innerHTML=Date.now（）；
fetch（`${API\u URL}/${format}`{
标题：{
“内容类型”：“应用程序/json”
},
方法：“张贴”，
正文：jsonVideo
})。然后（r=>r.text（））。然后（r=>{
e、 来源：邮政信息（r）；
});
})

你能分享html代码吗

我在fetchapi方面也有类似的问题。在我的例子中，我是在登录表单中登录按钮上的点击事件之后使用fetchapi的。

登录表单HTML代码：

电邮：
密码：
登录

请包含其余的代码。我添加了github repo链接，src/utils/download.js很混乱，因为我尝试了不同的方法。我尝试将下载中的函数更改为使用回调（因为setTimeout不会刷新页面），但每当我使用实际函数downloadVideo（）

e.preventDefault（）

应防止默认重新加载。我想不出

fetch（）

本身会导致重新加载的任何方式。我使用的是live server，它正在监视公用文件夹的更改，以便在每次更改文件时重新启动。下载正在将a文件夹保存在public中，这使其刷新，因为它是一个更改。就这么简单。改变了下载位置，它工作了。这不会改变程序的任何行为，页面仍会刷新，输出也不会被使用。@JoãoBordalo和顺便说一句，即使输出不是usd，也可能只用于知道它何时完成，或者是否有错误（这可能会显示在JSON文本本身中）这个bug完全不相关，但无论如何，谢谢你的回答，干杯

fetch(`${API_URL}/${format}`, {
        method: 'POST',
        body: jsonVideo,
        header: {
            'content-type': 'application/json',
        },
    })
    .then(res=>res.json())
        .then(res => {
            $button.textContent = 'Download';
            $button.removeAttribute('disabled');
            console.log('Done', res);
        })
        .catch(e => console.log(e));