React Ajax 開発に何を使用するか

react ajax 開発で使用できるもの: 1. jQuery の "$.ajax" メソッド; 2. API の取得; 3. 軽量の AJAX API ライブラリである SuperAgent; 4. Axios ライブラリ (主にリクエストの開始に使用されます)背景; 5. ライブラリをリクエストします。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React AJAX リクエストに対する 5 つのソリューション

1. jQuery $.ajax

これは、簡単かつ大雑把なソリューションです。公式 React チュートリアルの古いバージョンでは、サーバーからデータを取得する方法を示すために jQuery $.ajax を使用していました。 React を学び始めたばかりの場合、jQuery を使用すると、開発の開始と開発にかかる時間を大幅に節約できます。これは、誰もが jQuery に精通しているためです。これは、AJAX を実装する jQuery の例です:

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

PS. このコード スニペットは、公式チュートリアルの古いバージョンから抜粋したものです

これは、jQuery を AJAX で使用する方法を示しています。 React コンポーネント$.ajax。注意が必要な唯一のことは、success コールバックで this.setState() を呼び出す方法、つまり、jQuery がデータを正常に受信した後に React API を通じて状態を更新する方法です。 。

ただし、jQuery は多くの関数を含む大きなものであり、AJAX 関数を使用するためだけに jQuery 全体を導入するのは意味がありません (jQuery を他の多くのことにも使用する場合を除く)。それで、何を使えばいいのでしょうか？答えは fetch API です。

2. Fetch API

https://github.com/github/fetch

Fetch は新しく、シンプルです、Web 通信メカニズムを統合し、XMLHttpRequest を置き換えるように設計された標準化された API。これは主流のブラウザでサポートされており、古いブラウザ用のポリフィル もあります (ベンツ カオス: ポリフィルは文字通り塗りつぶしツールを意味します。つまり、古いブラウザは元々新しい JS API をサポートしておらず、一部の JS コードを導入しています)後でサポートされます。この js コードは、古いブラウザーの API を「埋めます」。この単語をどう訳せばいいのかわかりませんが、元の単語を翻訳せずに残しておくと、読者が理解しやすくなるような気がします。 ) 。 Node.js を使用している場合は、Node.js がノードフェッチを通じて Fetch をサポートできるようにすることもできます。

jQuery $.ajax を使用した上記のコード セグメントを fetch に変更すると、コードは次のようになります。

loadCommentsFromServer: function() {
    fetch(this.props.url).then(function(response){
        // 在这儿实现 setState
    });
}

fetch は人気のある React チュートリアルで見つかるかもしれません。 fetch の詳細については、次のリンク (すべて英語) を参照してください:

• Mozilla
• David Walsh Blog
• Google Developers
• WHATWG

3、SuperAgent

https://github.com/visionmedia/superagent

SuperAgent は、読みやすさと柔軟性を高めるために生まれた軽量の AJAX API ライブラリです。何らかの理由で fetch を使用したくない場合は、SuperAgent を選択することはほぼ避けられません。 SuperAgent の使用法は大まかに次のとおりです。

loadCommentsFromServer: function() {
    request.get(this.props.url).end(function(err,res){
        // 在这儿实现 setState
    });
}

SuperAgent には Node.js バージョンもあり、API は同じです。 Node.js と React を使用して同型アプリケーションを開発している場合 (ベンツの混乱: このリンクは初心者のために私が追加したものです)、webpack のようなものを使用して superagent # を埋め込むことができます## そしてブラウザ側で動作するようにします。ブラウザ側とサーバー側の API は同じであるため、Node.js バージョンはコードを変更せずにブラウザ上で実行できます。

4、Axios

https://github.com/axios/axios

Axios は Promise ベースのオブジェクトです

(Benz intrusion : このリンクも私によって追加されました) HTTP クライアント; axios は主にバックグラウンドへのリクエストを開始するために使用され、リクエストにはさらに制御可能な機能があります。 。 fetch や superagent と同様に、ブラウザ側と Node.js 側の両方をサポートします。さらに、Github ホームページには、多くの便利な高度な機能があることがわかります。

これは Axios のおおよその使用法です:

loadCommentsFromServer: function() {
    axios.get(this.props.url).then(function(response){
        // 在这儿实现 setState
    }).catch(function(error){
        // 处理请求出错的情况
    });
}

5、リクエスト

https://github.com/request/request

このリクエストライブラリを紹介しないとこの記事が不完全になってしまう気がします。これは、イデオロギーにおけるミニマリスト デザインを追求する JS ライブラリで、Github で 12,000 個以上のスター

を獲得しています (ベンツはめちゃくちゃです。この記事を翻訳した時点ではすでに 16,000 個のスターがありました) 。これは、最も人気のある Node.js モジュールの 1 つでもあります。詳細については、GitHub ホームページにアクセスしてください。

使用例:

loadCommentsFromServer: function() {
    request(this.props.url, function(err, response, body){
        // 在这儿实现 setState
    });
}

[関連する推奨事項:

Redis ビデオ チュートリアル]

以上がReact Ajax 開発に何を使用するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。