☰

Axios と Fetch の違いは何ですか? [closed] 質問する

tag-icon • tag-icon javascript axios fetch-api
Axios と Fetch の違いは何ですか? [closed] 質問する

アプリケーションで Web サービスを呼び出そうとしているのですが、Fetch と Axios という 2 つのオプションがあります。どちらを選択すればよいか分からないので、決定に役立つ情報を探しています。この2 つの違いと利点を説明していただけますか? シンプルでわかりやすい説明をしていただけるとありがたいです。

ベストアンサー1

FetchとAxiosは機能的に非常に似ていますが、後方互換性の観点からはAxiosの方が優れているようです（例えば、fetchはIE11では動作しません。この郵便受け）

また、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
}

それで：

  • Fetch の本文= Axios のデータ
  • Fetchの本体は文字列化する必要があり、Axiosのデータにはオブジェクトが含まれています
  • Fetch にはリクエスト オブジェクトにURL がありませんが、Axios にはリクエスト オブジェクトにURL があります
  • フェッチ要求関数にはURL がパラメーターとして含まれますが、Axios 要求関数にはURL がパラメーターとして含まれません。
  • レスポンスオブジェクトにokプロパティが含まれている場合、フェッチリクエストは正常です。ステータスが200で、statusTextが「OK」の場合、Axiosリクエストは正常です。
  • json オブジェクトの応答を取得するには、fetch で応答オブジェクトに対してjson() 関数を呼び出し、Axios で応答オブジェクトのデータ プロパティを取得します。

おすすめ記事