取り込みを使用してPOSTリクエストを行う

Question

バニラjsを使用していない場合は、いつでもjQueryを使用してAJAXリクエストを作成しています。今度はReactが引き継いで以来、AJAXリクエストを行うには、jQueryライブラリを使用してこれらのリクエストを行う必要はありません。したがって、fetchメソッド、アキシオなど多くのjsを使用することをお勧めします。

私は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': '*' 
} 

ヘッダに上記の行を追加してみてください。

矢印の機能を使用して

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

：

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