如何将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;
}
})
}

在获取API时，我将其写成：

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

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

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);
});