javascript - 如何在 JavaScript 中发送多个 POST 请求

Question

我有一个 html 表单，其中包含一些字段以包含用户凭据和文件输入，如下所示:

<form action="">
    username: <input type="text" name="name" id="name"> <br/>
    secret key: <input type="password" name="key" id="key"> <br/>

    <input type="file" name="actual_upload" id="actual_upload">
</form>

我只想在验证用户凭据后将文件上传到服务器 S2，并且另一个服务器 S1 已生成唯一 token (返回 token 作为 JSON)。

我想到的一种方法是将其发布到 S1，然后将请求从 S1 转发到 S2。但是这样我必须在S1中接收完整的请求，这不必要地增加了S1的负载。

如果我将用户凭据放在请求 header 而不是请求正文中，有没有办法只将 header 发送到 S1 然后在收到 token 后，使用它来发送文件到 S2 ？或者还有其他方法吗？

Answer 1

正如其他人在评论中提到的，您可以使用 AJAX 或 Promises。一个简单的实现是使用 fetch API。

这是您可以使用的示例代码结构(我假设您的表单中确实有一个 submit 按钮):

document.getElementById('submit').addEventListener('click', uploadFile);

function uploadFile() {

    event.preventDefault();

    let name = document.getElementById('name').value;
    let key = document.getElementById('key').value;

    let S1Url = // endpoint where token will be generated 

    fetch(S1Url, {
        method: 'GET',
    }).then(function(response){
        // extract token from JSON response
        // return token
    }).then(function(token) {
        let S2Url = // endpoint where file will be uploaded

        // file that has been selected in the form
        let input = document.querySelector('input[type="file"]');

        let data = new FormData();
        data.append('file', input.files[0]);

        return fetch(S2Url, {
            method: 'POST',
            body: data
        });

    }).then(function(response){
        // do something with the response
    }).catch(function(error) {
        // handle error
    });
}

检查这个 MDN documentation其中有大量使用 fetch API 的示例。另外，看看 this answer here .