かなり従来のWebアプリケーションでAjaxリクエストを処理するにはどうすればよいですか?具体的には、ビューにReactを使用し、テキストなどのデータを処理するバックエンドを使用しますが、オプションの切り替えやサーバーへの投稿などのユーザーインタラクションを自動的に保存するajaxを使用します。
このためにjQueryを使用するだけですか、それともBackboneのようなものがより有益でしょうか?
誰かがこれにつまずいて知らない場合に備えて、jQueryを使用するとAJAX呼び出しを送信することが非常に簡単になります。Reactその他のjQuery AJAX呼び出し。
React自身のドキュメントでは、jQueryを使用してAJAX呼び出しを行うため、ほとんどの目的またはスタックに関係なく、これで十分であると思います。
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
Facebookの公式ドキュメントComplementary Tools
at https://github.com/facebook/react/wiki/Complementary-Tools
彼らは単純にいくつかのデータ取得APIを推奨しています
私の個人的なお気に入りはaxios
です。これは、nodejs envでもブラウザーでも機能し、さらにreactJS Webサイトでも公式にAJAXおよびAPI
JavaScript Fetch APIを使用できます。GETとPOSTもサポートしています。さらに、Promiseを構築しています。
fetch('/api/getSomething').then(function() {...})
AJAX呼び出しは実際にはそれほど複雑ではなく、JQueryは非常に大きな依存関係であるため、JQueryは使用しません。ライブラリなしでAJAX呼び出しを実行する際のvanillajsの注意事項を参照してください。 http://Vanilla-js.com/
私はあなたにFetch API
。理解するのは非常に簡単で、すべてのメソッドをサポートしており、async/await
の代わりに promise/then
そして、コールバック地獄。
例えば:
fetch(`https://httpbin.org/get`,{
method: `GET`,
headers: {
'authorization': 'BaseAuth W1lcmxsa='
}
}).then((res)=>{
if(res.ok) {
return res.json();
}
}).then((res)=>{
console.log(res); // It is like final answer of XHR or jQuery Ajax
})
より良い方法またはasync/await
仕方:
(async function fetchAsync () {
let data = await (await fetch(`https://httpbin.org/get`,{
method: `GET`,
headers: {
'authorization': 'BaseAuth W1lcmxsa='
}
})).json();
console.log(data);
})();