web-dev-qa-db-ja.com

Reactでajaxを処理する

かなり従来のWebアプリケーションでAjaxリクエストを処理するにはどうすればよいですか？具体的には、ビューにReactを使用し、テキストなどのデータを処理するバックエンドを使用しますが、オプションの切り替えやサーバーへの投稿などのユーザーインタラクションを自動的に保存するajaxを使用します。

このためにjQueryを使用するだけですか、それともBackboneのようなものがより有益でしょうか？

jqueryajaxbackbone.jsreactjs
32
user2442241

誰かがこれにつまずいて知らない場合に備えて、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)
    });
  },
43
PythonIsGreat

Facebookの公式ドキュメントComplementary Tools at https://github.com/facebook/react/wiki/Complementary-Tools

彼らは単純にいくつかのデータ取得APIを推奨しています

  • axios ：Promiseベースのブラウザおよびnode.js用のHTTPクライアント。
  • jQuery AJAX ：導入は不要です。
  • superagent ：AJAXリクエスト用の軽量な「同形」ライブラリ。
  • reqwest ::AJAX繰り返します。xmlHttpRequest、JSONP、CORS、 CommonJS PromisesA。ブラウザのサポートはIE6にまで遡ります。

私の個人的なお気に入りはaxiosです。これは、nodejs envでもブラウザーでも機能し、さらにreactJS Webサイトでも公式にAJAXおよびAPI

17
Mohammad Arif

JavaScript Fetch APIを使用できます。GETとPOSTもサポートしています。さらに、Promiseを構築しています。

fetch('/api/getSomething').then(function() {...})
13
Alex Ivasyuv

AJAX呼び出しは実際にはそれほど複雑ではなく、JQueryは非常に大きな依存関係であるため、JQueryは使用しません。ライブラリなしでAJAX呼び出しを実行する際のvanillajsの注意事項を参照してください。 http://Vanilla-js.com/

8
Emil Ingerslev

私はあなたに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);
})();
1
AmerllicA