web-dev-qa-db-ja.com

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

私はフェッチを使用してWebサービスを呼び出していますが、私はaxiosの助けを借りてできることと同じです。だから今私は混乱しています。私はどちらかにアクセスする必要がありますか？

ajaxreactjsxmlhttprequestes6-promisees6-modules
77
jack

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

私も同じ疑問を抱いてしまいましたが、この表 post で私はisomorphic-fetchを使うようになりました。これはfetchですが、NodeJSで動作します。

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

24
Lucas Katayama

FetchとAxiosは機能的に非常に似ていますが、より後方互換性のためにAxiosはよりうまく機能するようです（たとえば、IE 11ではfetchは機能しません、チェック this post ）。

また、あなたがJSONリクエストを扱う場合、以下は私が遭遇したいくつかの違いです。

JSON投稿リクエストを取得します 

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の本体は stringified である必要があり、Axiosのデータには object が含まれています
  • フェッチ リクエストオブジェクトにURL がない、Axios リクエストオブジェクトにURL がある
  • フェッチ要求関数は URLをパラメータ として含み、Axios要求関数 はURLをパラメータ として含みません。
  • 応答オブジェクトに okプロパティ が含まれる場合、取得要求は ok 、Axiosの要求は ok の場合 statusが200 、および statusText isです。 'OK'
  • Jsonオブジェクトのレスポンスを取得するには：フェッチでレスポンスオブジェクトに対して json（）関数 を呼び出し、Axiosではレスポンスオブジェクトのget dataプロパティ を呼び出します。

お役に立てれば。

51
c-chavez

によるとmzabriskieGitHub上 ：

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

  • トランスフォーマ：リクエストが行われる前またはレスポンスが受け取られた後にデータのトランスフォームを実行することを許可します

  • インターセプター：リクエストやレスポンスを完全に変更することを可能にします（ヘッダーも）。また、要求が行われる前、またはPromiseが解決する前に非同期操作を実行する

  • 組み込み XSRF 保護

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

enter image description here

私はあなたがアクシオを使うべきだと思います。

16
Thilina Sampath

これについても興味がありました、あなたの質問をここで見つけて、それから有用であるかもしれないこの中型のポストを見つけました。フェッチはもう少し冗長で寛容ではないようです： https://medium.com/@shahata/why-i-wont-be-using-fetch-api-in-my-apps-6900e6c6fe78#.wxtu3qnte =

6
David Rhodes

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

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

だからあなた次第です、あなたがfetch()を使って行って、あなたが何をしているのかわからないのならばめちゃくちゃになる可能性がありますOR Axiosを使ってください。

4
Daniel

もう1つ大きな違い fetch APIとaxios APIの間

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

それに加えて...私は私のテストでさまざまなライブラリで遊んでいて、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は4xx応答をスローしますが、node-fetchはスローしません。またfetchは、JSON構文解析の約束を使用します。

1
cyberwombat

Axiosの利点：

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

axios over fetchの利点

0
Jairo Malanay