我们如何将 ajax GET 请求转换为 fetch API？

Question

function myFunction(username, mess_id) {
        mess = document.getElementById(mess_id);
        mess.innerText = "Sending...";
        $.ajax({
                type: 'GET',
                url: '/user/resend',
                data: {usr:username},
                success: function(data){
                        mess.innerText = data;
                }
        })
}

在 fetch API 中我写成：

message = document.getElementById('mess_id');
message.innerText = 'Sending...';
fetch(url)
.then(data => data.text())
.then(mess => message.innerText = mess)

但是，ajax 函数的 data 属性呢。

Answer 1

您正在尝试发送 GET 请求，该请求应仅在查询字符串中保存数据，而不是在请求负载中。

因此，您可以使用它来发送用户：

function myFunction(username, mess_id) {
        mess = document.getElementById(mess_id);
        mess.innerText = "Sending...";
        $.ajax({
                type: 'GET',
                url: '/user/resend?usr=' + username,
                success: function(data){
                        mess.innerText = data;
                }
        })
}

但是，如果您仍想在请求正文中发送data: {usr:username}，您可以使用fetch 发送这样的POST 请求：

async function postData(url = '', data = {}) {
  // Default options are marked with *
  const response = await fetch(url, {
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    headers: {
      'Content-Type': 'application/json'
      // 'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: JSON.stringify(data) // body data type must match "Content-Type" header
  });
  return response.text();  JavaScript objects
}

postData('/user/resend', {usr:username})
  .then(data => {
    console.log(data);
  });