1. ホーム

[解決済み】AxiosとFetchの違いは何ですか?

2022-04-01 07:49:40

質問

Fetchを使用してWebサービスを呼び出していますが、同じことがAxiosの助けを借りて行うことができます。だから今、私は混乱しています。私はAxiosまたはFetchのいずれかに行くべきですか?

どのように解決するのですか?

Fetch と Axios は機能的に非常によく似ていますが、後方互換性を考えると Axios の方が優れているようです(例えば、Fetch は IE 11 で動作しません。 この記事 )

また、JSONリクエストを扱う場合、私がつまずいたのは以下のような違いです。

Fetch 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
}

だから

  • Fetchの 本体 = アクシオスの データ
  • Fetchのボディは、必ず 文字列化 , Axiosのデータには オブジェクト
  • フェッチ はurlがありません は、リクエストオブジェクトの中で、Axios はurl リクエストオブジェクトの
  • Fetchリクエスト関数には url をパラメータとして使用します。 、Axiosリクエスト機能 は、パラメータとしてurlを含みません。 .
  • フェッチ・リクエストは OK レスポンスオブジェクトに OK プロパティ の場合、Axiosのリクエストは OK いつ ステータスが200 statusTextは'OK'です。
  • jsonオブジェクトのレスポンスを取得する場合: フェッチで json()関数 はレスポンスオブジェクトに対して、Axios は データプロパティ を返します。