使用 fetch 发出 POST 请求

Question

如果不使用 vanilla js，我总是使用 jQuery 来发出 AJAX 请求。现在，由于 React 已经接管，要发出 AJAX 请求，不需要使用整个 jQuery 库来发出这些请求，因此我们鼓励使用内置的 js 中的任何一个 fetch方法、axios 或许多其他方法。

我一直在尝试使用 fetch 发出 POST 请求。我可以使用 axis 但不能获取。

axios.post('https://reqres.in/api/login', {
    "email": "peter@klaven",
    "password": "cityslicka"
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

axios 代码看起来像这样，但是当我使用 fetch 尝试我认为是同一件事时，它不起作用。谁能看到我错过了什么？正在发布值，但 API 返回错误，所以我一定是做错了什么。

var data = {
    "email": "peter@klaven",
    "password": "cityslicka"
}

fetch("https://reqres.in/api/login", {
    method: "POST",
    body:  JSON.stringify(data)
})
.then(function(response){ 
    return response.json(); 
})
.then(function(data){ 
    console.log(data)
});

Answer 1

 var headers = {
   "Content-Type": "application/json",                                                                                                
   "Access-Control-Origin": "*"
}

尝试将以上行添加到 headers。

var data = {
    "email": "peter@klaven",
    "password": "cityslicka"
}

fetch("https://reqres.in/api/login", {
    method: "POST",
    headers: headers,
    body:  JSON.stringify(data)
})
.then(function(response){ 
    return response.json(); 
})
.then(function(data){ 
    console.log(data)
});

Answer 2

使用arrow functions:

fetch('http://myapi.com/user/login', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-type': 'application/json',
    },
    body: JSON.stringify({
      login: login,
      senha: password
    })
  }).then(response => response.json())
  .then((responseJson) => console.log(responseJson))
}).catch(error => console.log(error));

使用 fetch 发出 POST 请求

making POST request using fetch

javascript

ajax

fetch

axios