アクシオスとフェッチ

こんにちはDevelopers! Axios または fetch を使用して、サーバーとデータを通信/交換しています.どちらも、要件に応じて完璧に機能します.今日は、それらが提供する機能の点でどのように異なるかを詳しく見ていきます.

1.リクエストURL

Axios — リクエストオブジェクトに URL があります

axios
  .get(url, {
    headers: {
      'Content-Type': 'application/json',
    },
    timeout: 1000 * 60,
  })
  .then(res => {

  })
  .catch(err => {

  })

Fetch — リクエスト オブジェクトに URL がありません.

 fetch(url)
  .then((response) => response.json())
  .then((json) => {  

  })
  .catch(() => {

  })

2. パッケージ

Axios — 手動でインストールする必要があるサードパーティのパッケージ. Github で 85.3k スター — 適切に管理された豊富な機能ライブラリ.npm i axiosFetch — ほとんどのブラウザーに組み込まれているため、インストールは不要です.

3. CSRF保護

Axios — クロスサイト リクエストを防止するための CSRF (クロス サイト リクエスト フォージェリ) のサポートが組み込まれています.
フェッチ — CSRF をサポートしていません

4. データのリクエスト

Axios — リクエスト データにオブジェクトが含まれているため、リクエスト データで JSON オブジェクトを直接送信できます

axios
  .post(url, jsonObject, {
    headers: {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
    },
    timeout: 1000 * 60, // 1 min
  })
  .then((res) => {
    if (res) {
      return res.data;
    }
  })
  .catch((err) => {
    return err;
  });

Fetch — 要求データは文字列化する必要があります

fetch(url, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(jsonObject),
})
.then((response) => response.json())

.then((json) => {

})
.catch(() => {

});

If you want to start New React Project — Check out React Clean Architecture

5. 応答解析

Axios — 組み込みの JSON への変換応答
開発者

axios
  .post(url, jsonObject, {
    headers: {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    },
    timeout: 1000 * 60, // 1 min
  })
  .then(res => {
    if (res) {
      return res.data; // Directly get JSON in Step - 1 Only - Managed by Axios
    }
  })
  .catch(err => {
    return err;
  })

fetch — 2 段階のプロセスがあります.最初の応答は json に変換され、次に 2 番目のプロセスで開発者は json 応答を取得します

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(jsonObject)
}).then((response) => response.json()) // Response Convert To JSON in this Step - 1
  .then((json) => {
    // Get JSON Object Here in Step - 2
  })
  .catch(() => {


  })

6. リクエストのキャンセル

Axios — ユーザーが画面/コンポーネントを離れた場合、axios により開発者はリクエストをキャンセルできます

const cancelTokenSource = axios.CancelToken.source();

 axios.get('/listing/1', {
  cancelToken: cancelTokenSource.token
 });

 // Cancel request
 cancelTokenSource.cancel();
 Fetch - doesn’t support Cancel API request

Fetch — Cancel API リクエストをサポートしていません

7.リクエストインターセプター

Axios — HTTP リクエストをインターセプトする組み込み機能を持つ
Fetch — http リクエストを傍受する方法を提供しません.

8. アップロード/ダウンロード リクエストの進行状況

Axios — 開発者がデータ転送の進行状況を提供できるようにサポートし、ユーザーがサーバーと通信しているときに開発者が読み込みインジケータを表示できるようにします
取得 — アップロード/ダウンロードの進行状況をサポートしていません

9. ブラウザのサポート

Axios — サイドブラウザ機能をサポート
Fetch — Chrome 42+、Firefox 39+、Edge 14+、Safari 10.1 など、限られたブラウザーとバージョンのみをサポートします.

ブログを読んでくれてありがとう!

KPITENG |デジタルトランスフォーメーション
www.kpiteng.com/blogs | [email protected]
接続 |私たちに従ってください - | Facebook |