时间戳

首页 > 解决方案 > 在 promise 调用中设置请求标头时，标头未设置为服务器

javascript - 在 promise 调用中设置请求标头时，标头未设置为服务器

问题描述

我使用过 XMLHttpRequest 和 Promise。我将在 pormise 回调函数 (then()) 中设置附加标头，该标头未设置为请求并且面向“必须打开对象的状态”。但是我在设置请求之前已经打开了。请找到代码片段供您参考。

DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': The object's state must be OPENED.


 <div class="html5_upload">
        <input type="file" id="upload" class="uploadBtn" name="UploadFiles" />

        <button class="uploadBtn" onclick="uploadFiles()">Upload File</button>
    </div>

    <script>

    function uploadFiles() {
        var xhr = new XMLHttpRequest();
        var file = document.getElementById('upload').files[0];
        var formData = new FormData();

        formData.append('UploadFiles', file); 
        xhr.open('POST', 'https://localhost:44310/api/values/save', true);

        new Promise(function (resolve, reject) {
            resolve();
        }).then(function () { 
            xhr.setRequestHeader('custom', 'new');
        });
        xhr.onerror = function (args) {
            console.log('error occurs..!');
        }
        xhr.send(formData); 
    }
    </script>

标签： javascript

解决方案

我认为你xhr.send(formData)应该在里面.then()。你能试试下面的代码，看看它是否按要求工作。

function uploadFiles() {
var xhr = new XMLHttpRequest();
var file = document.getElementById('upload').files[0];
var formData = new FormData();

formData.append('UploadFiles', file); 
xhr.open('POST', 'https://localhost:44310/api/values/save', true);

new Promise(function (resolve, reject) {
    resolve();
}).then(function () { 
    xhr.setRequestHeader('custom', 'new');
    xhr.send(formData); // Changed position from original code

});
xhr.onerror = function (args) {
    console.log('error occurs..!');
}
}

推荐阅读