使用 XMLHttp 和 Eventlistener 将代码重构为 fetch()

Question

我有一个模态 window 的工作代码，用户在其中输入 phone 号码，点击后在本地服务器上处理请求，这取决于请求代码, 应该给些信息。

无法理解此记录类型如何转换为 fetch()。我尝试重做 MDN 代码，但在两种情况下出现错误 - 初始化发送 (json) 时，由于某种原因无法将此处理程序挂在 addEventListener('readystatechange') 上

form.addEventListener('submit', function(event){
    event.preventDefault(); 
    form.appendChild(statusMessage);

    let request = new XMLHttpRequest();

    request.open('GET', 'server.php');
    request.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

    let formData = new FormData(form); 
    let obj = {};
    formData.forEach(function(value, key){ 
        obj[key] = value;
    });

    let json = JSON.stringify(obj); 

    request.send(json);


    request.addEventListener('readystatechange', function(){ 
        if (request.readyState < 4){
            statusMessage.innerHTML = message.loading;
        } else if(request.readyState == 4 && request.status == 200){
            statusMessage.innerHTML = message.success;
        } else {
            statusMessage.innerHTML = message.failure;
        };
    });
});

是否有将此类代码重构为当今标准的建议？

下面是我得到的代码

form.addEventListener('submit', function(event){
    event.preventDefault(); 
    form.appendChild(statusMessage);

    let formData = new FormData(form); 
    let obj = {};
    formData.forEach(function(value, key){ 
        obj[key] = value;
    });
        let response = fetch('/server.php', {
            method: 'GET',
            headers: {'Content-Type': 'application/json; charset=utf-8'},
            body: JSON.stringify(obj)
        })



    response.then(() => {
                if (response.readyState < 4){
                    statusMessage.innerHTML = message.loading;
                }
            })
            .then(() => {if(response.readyState == 4 && request.status == 200){
                statusMessage.innerHTML = message.success;
            }})
            .catch(()=>statusMessage.innerHTML = message.failure );
});

Answer 1

readyState 未在 fetch() 中使用。相反，您可以使用 .done() 提供在返回状态为成功时执行的回调（例如 200、201），并使用 .catch() 在状态为失败时提供回调（例如4xx，500）。

转换的基础应该如下：

form.addEventListener('submit', function(event){
  event.preventDefault(); 
  form.appendChild(statusMessage);

  let formData = new FormData(form); 
  let obj = {};
  formData.forEach(function(value, key){ 
    obj[key] = value;
  });

  let response = fetch('server.php', {
     method: 'GET',
     headers: {'Content-Type': 'application/json; charset=utf-8'},
     body: JSON.stringify(obj)
  });

  response.done(function(responseData) {
    statusMessage.innerHTML = message.success;
  })
  .catch(function(errorData) { 
    statusMessage.innerHTML = message.failure; 
  });
});

使用 XMLHttp 和 Eventlistener 将代码重构为 fetch()

Refactoring code with XMLHttp and Eventlistener to fetch()

javascript

promise

es6-promise