Javascript

AJAX API Troika：AxiosとjQueryおよびFetch



Ajax Api Troika Axios Vs



同様のものを使用した場合Angularフレームワークの経験から、これらのフレームワークは、HTTP呼び出しを行うためのサービス（Angular中間$HTTP）など、アプリケーションに必要なすべての機能を統合していることがわかります。

Reactユーザーインターフェイスを構築するためのビューレイヤーフレームワークです。でMVCアーキテクチャでは、ビュー部分のみを担当します。実際の開発プロセスでは、今日言うことなど、いくつかのサードパーティコンポーネントを導入する必要があることがよくあります。AJAX API。



この記事では、簡単な例を使用して、さまざまな方法（Axios、XMLHttpRequestまたはfetch APIなど）で学習し、AJAXを実行します。データを取得、作成、更新、および削除するための要求（GET、POST、PUT、およびDELETE）。

AJAX API

多くの解決策があります、あなたがしなければならないのは正しい解決策を選ぶことだけです：



1ペアJavaScript中Promiseより身近な、使用することができます Axios 。

2、最先端の標準を使用するように、あなたは使用することができますfetch API 。

3、使用することもできますjQuery 、ただし、API呼び出しのためだけにライブラリ全体を導入することはお勧めしません。



直接使用できます XMLHttpRequest インターフェース。

FetchAPIの例

使用をお勧めしますcreate-react-app多くの構成を保存するため、アプリケーションを作成します。

npm install -g create-react-app Copy code

次のコマンドを実行して、アプリを作成して起動します。react-ajax-demo

create-react-app react-ajax-demo cd react-ajax-demo npm start Copy code

フェッチAPI

以下に引用 Mozilla MDN ：

Fetch APIは、リソース（クロスドメインを含む）を取得するためのインターフェイスを提供します。 XMLHttpRequestを使用したことのある人なら誰でも簡単に始めることができますが、新しいAPIはより強力で柔軟な機能セットを提供します。

Redditに投稿されたいくつかの投稿を読んでくださいsrc/App.js：

import React, { Component } from 'react' import logo from './logo.svg' import './App.css' class App extends Component { constructor(props) { super(props) this.state = { posts: [] } } fetchFirst(url) { var that = this if (url) { fetch('https://www.reddit.com/r/' + url + '.json').then(function (response) { return response.json() }).then(function (result) { that.setState({ posts: result.data.children, lastPostName: result.data.children[result.data.children.length - 1].data.name }) console.log(that.state.posts) }) } } componentWillMount() { this.fetchFirst('reactjs') } render() { return ( <div className='App'> <header className='App-header'> <img src={logo} className='App-logo' alt='logo' /> <h1 className='App-title'>React AJAX Exampleh1> header> <p className='App-intro'> <ul> {this.state.posts.map(post => <li key={post.id}>{post.title}li> )} ul> p> div> ) } } export default App Copy code

でfetchFirst()このメソッドでは、GETリクエストを開始しました。

fetch('https://www.reddit.com/r/' + url + '.json').then(function (response) { return response.json() }).then(function (result) { console.log(result.data.children) }) Copy code

APIはシンプルで、必要なパラメーターはリソースのURIだけです。ここではJSONファイルですが、画像やその他のタイプなど、任意のタイプのリソースにすることもできます。

** fetch（url）**は、デフォルトでGETHTTPリクエストを送信します。

2番目のパラメーターでメソッド名を指定することにより、POST、PUT、DELETEなどの他のHTTPメソッドを呼び出すこともできます。

たとえば、fetch()を使用しますPOSTリクエストを送信します。

var form = new FormData(document.getElementById('login-form')) fetch('/login', { method: 'POST', body: form }) Copy code

AJAXAPI呼び出しのタイミング

典型的なReactアプリケーションは、ルートコンポーネント、親コンポーネント、および子コンポーネント（および子コンポーネントの子コンポーネント）を含むコンポーネントのコレクションであり、ツリー構造として表示できます。

ここには多くの問題があります：1。データを処理する方法は？ 2.データはコンポーネントから他のコンポーネントにどのように流れますか？ 3、最も重要なことは、非同期リクエストのコードをどこに置くかです。

componentWillMount()これはReactライフサイクルの重要なイベントであり、コンポーネントが最初にレンダリングされる前にコンポーネントがマウントされようとしているときに実行タイミングが呼び出されます。

前の例では、componentWillMount()にいます。内部で開始AJAXリクエスト。

実際にこれを行うことができるいくつかの場所があります：

1、componentDidMount()：これは公式の推奨場所です

2、componentWillMount()：公式は推奨していません

3、constructor()：アンチパターンと見なされます！しかし、それは次のようになりますcomponentWillMount()同じものを使用してください。

componentDidMount（）とcomponentWillMount（）

componentWillMount()このメソッドは、コンポーネントの最初のレンダリングの前に呼び出されます。誰もがこれがデータを取得するのに最適な場所であると誤って考えました。しかし、そうではありません！なぜならfetch呼び出しは非同期です。つまり、コンポーネントがレンダリングされる前に非同期要求が返されない可能性があります。一般的なアプローチは次のとおりです。constructor() Reactの順序で初期状態を設定しますコンポーネントは正しくレンダリングでき、非同期要求が戻った後にコンポーネントが再レンダリングされます。

componentDidMount()このメソッドは、コンポーネントが最初にレンダリングされた後に呼び出されるため、サーバーデータを取得したり、DOMを操作したりするために、ここで非同期コードを安全に実行できます。

サーバー側のレンダリングを実装する場合、componentWillMount（）が2回呼び出されるため、サーバーへの要求が2つあり、これは無駄です。また、componentDidMount（）は、クライアントで1回だけ呼び出されます。

上記の例に次の変更を加えました。

componentDidMount() { this.fetchFirst('reactjs') } Copy code

componentWillMount（）とコンストラクター

プログラムの観点から、使用することは可能ですかconstructor交換componentWillMount() ？

表面的にはそれは確かに代替手段ですが、それは正しい方法ではありません。

純粋関数を学んだ場合、非同期要求は副作用のある典型的な非純粋関数であることがわかっているからです。コンポーネントコンストラクターに純粋でない関数がある場合、React警告をスローし、componentWillMount()不純な機能には中程度が許可されます。コード内の他のコンポーネントの状態を更新する必要がある場合は、コンストラクターを使用しないことをお勧めします。

最後の結論は、副作用（ステータスの更新など）を生成しない初期化コードにはコンストラクターを使用することです。それ以外の場合は、componentDidMount（）を使用します。

コンポーネント間の通信

もう1つの方法は、親コンポーネントから子コンポーネントにデータを渡すことです。もちろん、親コンポーネントは以前にデータを取得する方法も回避する必要があるので、どこにありますか？親ノードは、Reactルーターフック（onEnter()など）を使用してデータを取得し、propsを渡すことができます。データを子ノードに渡します。

この例では、コンポーネントが1つしかないため、これは簡単に次のように分類できます。

Fetch.js

export default { fetchFirst: function(url){ fetch('https://www.reddit.com/r/' + url + '.json').then(function (response) { return response.json() }).then(function (result) { return result.data.children }) } } Copy code

RedditPost.js

import React from 'react' class RedditPost extends React.Component { constructor(props) { super(props) this.state = { title: props.title, id: props.id } } componentWillReceiveProps(nextProps) { this.setState(nextProps) } render() {
  • {this.state.title}
    • ) } } } RedditPost.propTypes = { id: React.PropTypes.number, title: React.PropTypes.string } RedditPost.defaultProps = { id: null, title: '' } export default RedditPost Copy code

    App.js

    import fetchFirst from './Fetch' import React, { Component } from 'react' import logo from './logo.svg' import './App.css' class App extends Component { constructor(props) { super(props) this.state = { posts: [] } } componentDidMount() { fetchFirst('reactjs').then((posts)=>{ this.state.posts = posts }) } render() { return ( logo

      {this.state.posts.map(post => )}

    ) } } export default App Copy code

    Redux StateManagerを使用する

    3番目の方法はReduxを使用することですそのような状態管理者。

    コード内のどこからでもデータを取得し、他のすべてのコンポーネントで使用できるグローバルストレージにデータを保存します。

    約Reduxあなたは自分で学ぶか、私が以前に書いたいくつかの記事を読むことができます：1。 Redux-グローバル状態をよりエレガントに変更する方法 二、 Reduxを再考する

    終わり

    ますます多くの企業が独自のウェブサイトを構築する際に経験とパフォーマンスに注意を払っています。多数のシングルページアプリケーションが登場しています。AJAXこのブラシレス技術は最高です。そして、私たちは使用していますReactアプリケーションを開発する方法はたくさんあります。AJAXプログラム：

    1、Use XMLHttpRequest複雑に感じる場合は、直接使用できます。jQuery 。2、Fetch API 、最新のブラウザサポート、古いブラウザを使用する必要がありますpolyfills 。3、Axios ：ベースpromiseのHTTPライブラリ、ブラウザで使用できますnode.jsに。