XMLHttp-запрос .upload.onprogress срабатывает, когда сервер отвечает 500 ошибка

Question

Я использую XMLHttp Request для загрузки файла.Если сервер отвечает сообщением об ошибке 500, я пытаюсь обработать сообщение об ошибке до события onprogress.

XMLHttpRequest

const xhr = new XMLHttpRequest();

      xhr.onreadystatechange = function (oEvent) {
        if (xhr.readyState === 4) {
            if (xhr.status === 500) {
              console.log('error2');
            }
        }
    };

    xhr.onload = function() {
      if (this.status == 200) {
        console.log('success');
      }
    };

      xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
          var percentComplete = (e.loaded / e.total) * 100;
          console.log(percentComplete);
        }
      };

      xhr.open("POST", "http://127.0.0.1:1337/upload-file", true);
      var formData = new FormData();
      formData.append("file", e.file);
      xhr.send(formData);

Я специально отправляю сообщение об ошибке на сервер:

const Koa = require('koa');
const Router = require('koa-router');
const cors = require('@koa/cors');
const serve = require('koa-static');
const path = require('path');
const koaBodyMultipart = require('koa-body')({ multipart: true });

const app = new Koa();
app.use(cors());
app.use(serve(path.join(process.env.PWD, '/dist')));

const router = new Router();

router
  .post('/upload-file', koaBodyMultipart, (ctx, next) => {
    const { file } = ctx.request.files;
    // if (file) {
    //     ctx.response.body = 'ok';
    // } else {
    //     ctx.throw(500,'Error Message');
    // }
    ctx.throw(500,'Error Message');
  });

app.use(router.routes()).use(router.allowedMethods());

// don't listen to this port if the app is required from a test script
if (!module.parent) {
  var server = app.listen(process.env.PORT || 1337);
  var port = server.address().port;
  console.log('running at port:' + port)
}

Почему upload.onprogress срабатывает до xhr.onreadystatechange и xhr.onload?Как отобразить сообщение об ошибке перед отображением процесса загрузки?

Answer 1

Я написал простой скрипт для проверки порядка событий.Порядок событий всегда происходит следующим образом:

readystateChange: 1
loadstart
XHR OPTIONS http://127.0.0.1:1337/upload-file [HTTP/1.1 204 No Content 24ms]
XHR POST http://127.0.0.1:1337/upload-file [HTTP/1.1 500 Internal Server Error 20ms]
progress
load
loadend
readystateChange: 2
readystateChange: 3
readystateChange: 4

Progress событие всегда инициируется перед событиями load.

Поскольку прогресс обновляется до отображения вашего сообщения об ошибке, вы можете обновить прогресс до определенного процента, например 95%.Затем обработайте остаток обновления в событиях loadend или readyStateChange.Например:

xhr.upload.onprogress = function(e) {
    if (e.lengthComputable) {
        var percentComplete = (e.loaded - e.total*0.05 / e.total) * 100;
        percentComplete = percentComplete < 0? 0: percentComplete;
        console.log(percentComplete);
    }
};

xhr.onreadystatechange = function (oEvent) {
    if (xhr.readyState === 4) {
        if (xhr.status === 500) {
            // Handle error case
        } else if (xhr.status === 200){
            percentComplete = 100;
        }
    }
};

Answer 2

В соответствии с XMLHttpRequest Level 2 - определяет, завершена ли загрузка

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