[react]axiosとfetchの違い

axiosおよびfetchはreactのネットワーク通信を支援するapiである.
これはいつ使うか、何か違いがあるので、使い方をまとめたいと思います.
私の場合、camp-usプロジェクトをするときはaxios、会社プロジェクトHismsのときはfetchで、正確に知っているのではなく、急いで処理するので、コンセプトの整理を遅らせました.ちょっと暇な時、整理したいです.

Axios

Axiosは?

AxiosはブラウザNodejs向けPromise APIを利用したHTTP非同期通信ライブラリ.
axiosがサポートするブラウザ

使い勝手がよい個人的には使い方が少し違うと思いますが、全体的に似ていて、axiosはユーザーに認知されやすいですか?使いやすい?頑張って作った跡があります.(下記のコードを参照)

fetchには存在しない機能がもっとあります.

Promise based

axiosはjsonを自動的に適用することによって応答オブジェクトに直接戻る

axiosはデータを直接転送できます

リクエストを途中Cancelに設定したり、レスポンスタイムアウトに設定したりする機能があります.

400,500台のErrorが発射されると,拒絶で反応を伝え,catchで捕まえることができる.(fetchの場合、ネットワーク障害またはリクエストが完了していない場合にのみ、応答が拒否されます.400、500個のエラーについては、解析と見なし、個別に例外処理を行う必要があります.)

自分が行っているプロジェクトの上流に導入すべきです.import axios from 'axios'

Fetch

ライブラリをインポートする必要はありません.

React Nativeは頻繁に更新されるため、ライブラリ(例えばaxios)...この更新を追跡できない可能性があります.Fetchは心配しないでください.

Promise based

Request Abortingに標準的な方法を提供できません.

ネットワークエラーが発生した場合は、待機し続ける必要があります->レスポンスタイムアウトAPIが提供されていません.

サポートされていないブラウザがあります.

エラー処理について問題があります.

Catchで、その後.そして実行します(~~~).

axiosを例に挙げます.その後(~~~)実行せずに、対応するエラー・ログをコンソール・ウィンドウに表示します.

fetchはpromise自体を返し、jsonに変換する必要があります.

fetchはbody jsonとして機能します.サーバが理解できるようにstringgify()で文字列グループ化する必要があります.

コード比較

Fetch JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Axios JSON post request

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

コード自体は似ています.重要な部分をまとめる.
[データの転送方法]
axios:オブジェクトに移動
fetch:文字列化
[通常のリクエスト/レスポンスを確認]
axios:status値200、statusTextで検証
fetch:応答オブジェクトにok propertyが含まれているかどうかを確認
[レスポンスを取得する方法]
axios:応答オブジェクトのデータ属性にアクセスして取得します.
fetch:応答オブジェクトへ.json()メソッドを呼び出してjsonオブジェクトを取得します.

n/a.結論

どちらも負担がなく、動作がよく、axiosは主にreactに用いられ、fetchは主にreact原生に用いられる.(React-本機が急速に更新されたため、クオラに返信があった)

全体的に,この2つは似ているが,axiosにはより多くの利点があるようだ.

fetchはもっと軽く、axiosは相対的に重い(インストールが必要で、提供する機能がもっと多い).

リクエストをキャンセルするには、fetchではなくaxiosなどの他のライブラリを使用する必要があります.

簡単なhttpリクエストではFetchは必要ありませんが、axiosに比べてaxiosの利点やfetchの欠点が際立っているので、多くの機能が必要な場合はaxiosを使用するのが望ましいです.ただし、React-Nativeではライブラリが更新に追いつかない可能性があるので、fetchを使用することが望ましい.個人的にはaxiosのほうが便利だと思いますので、もっとaxiosを探します.