AxiosとFetchの違いは何ですか？

私はフェッチを使用してWebサービスを呼び出していますが、axiosを使用して同じことができます。だから今私は混乱しています。私はaxiosまたはfetchのどちらに行くべきですか？

FetchとAxiosの機能は非常に似ていますが、下位互換性を高めるために、Axiosはより適切に機能するように見えます（たとえば、IE 11ではフェッチが機能しません。この投稿を確認してください）

また、JSONリクエストを使用する場合、次の点で私が遭遇したいくつかの違いがあります。

JSON POSTリクエストを取得する

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投稿リクエスト

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のデータにはオブジェクトが含まれています
• FetchにはリクエストオブジェクトにURLがありません。AxiosにはリクエストオブジェクトにURLがあります
• フェッチリクエスト関数はURLをパラメーターとして含み、Axiosリクエスト関数はURLをパラメーターとして含みません。
• フェッチ要求がOK応答オブジェクトが含まれている場合、[OK]プロパティを、Axios要求があるOK際にステータスが200であるとSTATUSTEXTは「OK」です
• jsonオブジェクトの応答を取得するには：fetchで応答オブジェクトのjson（）関数を呼び出し、Axiosで応答オブジェクトのdataプロパティを取得します。

お役に立てれば。

それらはHTTPリクエストライブラリです...

私も同じ疑問を抱きますが、この投稿の表を参考にしてくださいisomorphic-fetch。これはfetchNodeJSで動作します。

http://andrewhfarmer.com/ajax-libraries/

上記のリンクは死んでいます同じテーブルはここにあります：https : //www.javascriptstuff.com/ajax-libraries/

またはここ：

GitHubのmzabriskie によると：

全体的に非常に似ています。axiosのいくつかの利点：

• トランスフォーマー：要求が行われる前、または応答が受信された後に、データの変換を実行できます

• インターセプター：要求または応答を完全に変更できます（ヘッダーも同様）。また、リクエストが行われる前、またはPromiseが解決する前に非同期操作を実行する

• 組み込みXSRF保護

ブラウザサポートAxiosを確認してください

あなたはaxiosを使うべきだと思います。

フェッチAPIとaxios APIのもう1つの大きな違い

• Service Workerの使用中は、HTTPリクエストをインターセプトする場合にのみ、フェッチAPIを使用する必要があります
• 例 Service Workerを使用してPWAでキャッシュを実行している間、axios APIを使用している場合はキャッシュできません（フェッチAPIでのみ機能します）

Axiosは、NPMを使用してReactプロジェクトに簡単にインストールできるスタンドアロンのサードパーティパッケージです。

あなたが言及した他のオプションはフェッチ機能です。Axiosとfetch()は異なり、はほとんどの最新ブラウザーに組み込まれています。フェッチを使用すると、サードパーティのパッケージをインストールする必要はありません。

そのため、あなた次第です。fetch()何をしているのかわからない場合や、場合によっては失敗する可能性があります。または、私の考えではより単純なAxiosを使用するだけです。

さらに...私はテストでさまざまなライブラリをいじっていて、4xxリクエストの処理が異なることに気付きました。この場合、私のテストは400応答でjsonオブジェクトを返します。これは、3つの一般的なライブラリが応答を処理する方法です。

// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)


// node-fetch
const body = await fetch(url)
console.log(await body.json())


// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)

興味深いのはそれでrequest-promise-nativeありaxios、node-fetchそうではないのに4xx応答をスローします。またfetch、json解析のpromiseを使用します。

axiosの利点：

• トランスフォーマー：要求が行われる前、または応答が受信された後に、データの変換を実行できます
• インターセプター：要求または応答を完全に変更できます（ヘッダーも同様）。リクエストが行われる前、またはPromiseが解決する前に非同期操作も実行します
• 組み込みXSRF保護

axios以上の利点fetch