Атрибуты XMLHttpRequest пусты при непосредственном вызове - PullRequest
Новая
       29

Атрибуты XMLHttpRequest пусты при непосредственном вызове

0 голосов
/ 17 октября 2018

Я загружаю файлы через форму и запрос XMLHttpRequest на мой сервер.Соответствующий код, который я использую для этого, выглядит следующим образом. 

async function POST_upload (html_form_id, url) {
    const form = document.getElementById(html_form_id);
    const multiple_files = form.querySelector("input[type=file]");

    if (multiple_files.files.length) {
        const request = new XMLHttpRequest();

        const formData = Array.prototype.reduce.call(
            multiple_files.files,
            function (formData, file) {
                formData.append(multiple_files.name, file);
                return formData;
            },
            new FormData()
        );

        request.open("POST", url);
        request.setRequestHeader("X-Requested-With", "XMLHttpRequest");

        request.upload.addEventListener(
        "progress",
        function(event) {
            /* Progress happened. */
        },
        false);

        request.upload.addEventListener(
        "load",
        function(event) {
            /*
                Upload completed successfully.
            */

            console.log(request);
            console.log(request.readyState);
            console.log(request.response);
            console.log(request.responseText);
        },
        false);

        request.upload.addEventListener(
        "loadend",
        function(event) {
            /*
                Upload completed.
                Alway triggers, no matter if the upload was successful or not.
            */
        },
        false);

        request.upload.addEventListener(
        "abort",
        function(event) {
            /*
                Upload was aborted by user.
            */
        },
        false);

        request.upload.addEventListener(
        "error",
        function(event) {
            /*
                Upload was aborted by an error.
            */
        },
        false);

        request.send(formData);
    }
};

document.getElementById("upload_form").addEventListener("change", function(event) {
    POST_upload("upload_form", "/weather/ajax/upload/");
});

Загрузка работает нормально, и я получаю ответ в виде строки в формате JSON с подробной информацией о файле, который я только что загрузил.

enter image description here

Когда я сейчас пытаюсь прочитать объект request в событии load и распечатать его на консоли,все показывает, как ожидалось.Как видно из зеленого поля , все атрибуты заполнены правильной информацией.

Однако, если я попытаюсь напечатать readyState , response или responseText этого объекта запроса к консоли ( красные поля ), readyState неожиданно изменился с 4 на 1, и response, и responseText пусты.

enter image description here

У меня было подозрение, что, возможно, содержимое объекта как-то меняется между мной, читающим объект и его атрибутами, поэтому я добавил еще один console.log(запрос) после console.log (request.responseText) , но там снова были атрибуты.

Итак, мой вопрос ... почему я не могуполучить доступ к атрибутам объекта запроса здесь?Это кажется странным.

1 Ответ

0 голосов
/ 17 октября 2018

Я решил проблему.Проблема заключалась в том, что конец загрузки не является концом запроса.Я прослушал неверное событие.

Изменение запроса. загрузка .addEventListener ("load", ...) в request.addEventListener ("load", ...) исправил проблему.

...