Axios の高度な技術が明らかに: 高度な使用法とパフォーマンスの最適化

序文
カスタムインスタンス
リクエストのインターセプトとレスポンスのインターセプト
リクエストのキャンセルとタイムアウト処理
グローバル構成とローカル構成
Axios と Cookie
ファイルのアップロードとダウンロード
カスタムアダプター
同時リクエストとマージリクエスト
Axios 拡張機能
パフォーマンスの最適化
終わり

序文

フロントエンド開発では、効率的なデータ要求がアプリケーションのパフォーマンスを向上させる鍵となります。 Axios は、機能豊富な HTTP ライブラリとして、フロントエンドエンジニアにさらなる自由と制御を提供する多くの高度なテクノロジとツールを提供します。この記事では、Axios の高度なテクノロジーを明らかにし、さらに深い扉を開きます。

カスタムインスタンス

Axios インスタンスのカスタマイズは、さまざまなタイプのリクエストにさまざまなパラメータを設定する強力な方法です。インスタンスを複数作成することで、さまざまなシナリオのリクエストにより柔軟に対応できます。カスタム Axios インスタンスを理解して作成する手順は次のとおりです。

カスタムインスタンスを作成する

まず、Axios をインポートし、create メソッドを使用してカスタムインスタンスを作成します。

import axios from 'axios';

const instance = axios.create({
    
    
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    
    
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YourAccessToken',
  },
});

この例では、instance という名前のカスタム Axios インスタンスを作成し、ベース URL、タイムアウト、リクエストヘッダーなどのデフォルト構成を設定しました。

カスタムインスタンスを使用する

カスタムインスタンスを使用してリクエストを送信することは、グローバル Axios を使用することとほぼ同じです。このインスタンスのメソッド (get、post など) を使用してリクエストを開始できます。

// 使用自定义实例发起 GET 请求
instance.get('/api/data')
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

該当シーン

異なる API アドレス: アプリが複数の異なる API アドレスからデータを取得する必要がある場合は、API アドレスごとにカスタムインスタンスを作成できます。
さまざまなリクエストタイムアウト設定: リクエストによっては、より長いタイムアウトが必要な場合もあれば、より短いタイムアウトが必要な場合もあります。インスタンスをカスタマイズすることで、さまざまなリクエストに対してさまざまなタイムアウトを設定できます。
さまざまなリクエストヘッダー構成: リクエストによっては、特定のリクエストヘッダーが必要な場合もあれば、そうでない場合もあります。カスタムインスタンスを使用すると、インスタンスごとに適切なリクエストヘッダーを設定できます。

例：

// 创建多个自定义实例
const apiInstance = axios.create({
    
    
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    
    
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YourApiAccessToken',
  },
});

const authInstance = axios.create({
    
    
  baseURL: 'https://auth.example.com',
  timeout: 3000,
  headers: {
    
    
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YourAuthAccessToken',
  },
});

// 使用自定义实例发起请求
apiInstance.get('/api/data')
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

authInstance.post('/auth/login', {
    
     username: 'user', password: 'pass' })
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

この例では、API データにアクセスするための apiInstance と認証用の authInstance という 2 つの異なるカスタムインスタンスを作成します。各インスタンスには、独自のニーズに合わせた独自の構成があります。

インスタンスをカスタマイズすると、さまざまな種類のリクエストの構成をより適切に整理および管理できるようになり、コードがより保守しやすく読みやすくなります。

リクエストのインターセプトとレスポンスのインターセプト

Axios インターセプターは、リクエストが送信される前とレスポンスが返された後に、より複雑な操作を実行できる強力なツールです。インターセプタはグローバルであり、任意のリクエストで使用でき、リクエストの構成を変更したり、リクエストを送信する前に処理したり、レスポンスが返された後に処理したりすることができます。以下は、リクエストインターセプターとレスポンスインターセプターの高度な使用法です。

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

リクエストインターセプタを使用すると、リクエストを送信する前に変更できます。これは、グローバルリクエストヘッダーの追加、リクエストデータの変更などに役立ちます。

axios.interceptors.request.use(
  config => {
    
    
    // 在发送请求前做些什么
    console.log('Request Interceptor:', config);

    // 修改请求配置
    config.headers['X-Requested-With'] = 'XMLHttpRequest';

    return config;
  },
  error => {
    
    
    // 处理请求错误
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);

応答インターセプタ

応答インターセプターを使用すると、応答を受信する前に応答を変更できます。これは、グローバルエラーの処理、応答データの処理などに役立ちます。

axios.interceptors.response.use(
  response => {
    
    
    // 在处理响应数据前做些什么
    console.log('Response Interceptor:', response);

    // 修改响应数据
    response.data = {
    
     modifiedData: response.data };

    return response;
  },
  error => {
    
    
    // 处理响应错误
    console.error('Response Error:', error);

    // 如果是特定的响应状态码，可以在这里处理

    return Promise.reject(error);
  }
);

複数のインターセプター

複数のインターセプターを作成でき、それらは追加された順序で実行されます。

// 添加请求拦截器
const requestInterceptorId = axios.interceptors.request.use(config => {
    
    
  console.log('Request Interceptor 1:', config);
  return config;
}, error => {
    
    
  console.error('Request Error 1:', error);
  return Promise.reject(error);
});

// 添加另一个请求拦截器
axios.interceptors.request.use(config => {
    
    
  console.log('Request Interceptor 2:', config);
  return config;
}, error => {
    
    
  console.error('Request Error 2:', error);
  return Promise.reject(error);
});

// 移除请求拦截器
axios.interceptors.request.eject(requestInterceptorId);

インターセプタの実行順序

リクエストインターセプタとレスポンスインターセプタは、追加された順序で実行されます。上記の例では、最初のリクエストインターセプターが 2 番目のリクエストインターセプターの前に実行されます。

インターセプターをキャンセル

eject メソッドを使用してインターセプタをキャンセルすることもできます。これは、インターセプタを動的に追加または削除する必要がある場合に非常に便利です。

上記のコードの axios.interceptors.request.eject(requestInterceptorId); は、特定のリクエストインターセプタを削除することを意味します。

これらの高度な使用法により、リクエストとレスポンスのさまざまな段階でより柔軟に操作し、より複雑なグローバル処理ロジックを実装できます。

リクエストのキャンセルとタイムアウト処理

Axios は、リクエストをキャンセルし、リクエストのタイムアウトを設定して、非同期リクエストをより適切に処理する機能を提供します。ここでは、キャンセルリクエストとタイムアウト処理について詳しく見ていきます。

リクエストのキャンセル

Axios を使用すると、CancelToken 経由でリクエストをキャンセルできます。まず、CancelToken オブジェクトを作成します。

const source = axios.CancelToken.source();

次に、このオブジェクトをリクエスト設定のcancelTokenフィールドに渡します。

axios.get('/api/data', {
    
    
  cancelToken: source.token
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    if (axios.isCancel(error)) {
    
    
      console.log('Request canceled:', error.message);
    } else {
    
    
      console.error(error);
    }
  });

リクエストをキャンセルする必要がある場合は、source.cancel() メソッドを呼び出します。

source.cancel('Request canceled by the user.');

これにより、リクエストされた Promise は拒否状態になり、対応する catch ブロックがトリガーされます。 catch ブロックでは、 axios.isCancel(error) を使用して、エラーがキャンセルによって発生したかどうかを判断します。

タイムアウト処理

リクエストが長時間待機しないようにするには、リクエストのタイムアウトを設定します。リクエスト設定の timeout フィールドを使用して、指定したミリ秒数が経過するとリクエストがタイムアウトすることを示します。

axios.get('/api/data', {
    
    
  timeout: 5000 // 设置超时时间为5秒
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    if (axios.isCancel(error)) {
    
    
      console.log('Request canceled:', error.message);
    } else if (axios.isTimeout(error)) {
    
    
      console.log('Request timeout:', error);
    } else {
    
    
      console.error(error);
    }
  });

上記の例では、リクエストが 5 秒を超えて完了しない場合、タイムアウト処理の catch ブロックがトリガーされます。同様に、axios.isTimeout(error) を使用して、エラーの原因がタイムアウトであるかどうかを判断できます。

例

以下は、CancelToken を使用してリクエストをキャンセルし、リクエストのタイムアウトを設定する方法を示す例です。

import axios from 'axios';

// 创建 CancelToken 对象
const source = axios.CancelToken.source();

// 发起带有超时和取消请求的 GET 请求
axios.get('/api/data', {
    
    
  timeout: 5000, // 设置超时时间为5秒
  cancelToken: source.token
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    if (axios.isCancel(error)) {
    
    
      console.log('Request canceled:', error.message);
    } else if (axios.isTimeout(error)) {
    
    
      console.log('Request timeout:', error);
    } else {
    
    
      console.error(error);
    }
  });

// 模拟用户取消请求
setTimeout(() => {
    
    
  source.cancel('Request canceled by the user.');
}, 2000);

この例では、リクエストは 5 秒以内に完了しますが、2 秒の時点でシミュレートされたユーザーがリクエストをキャンセルしました。実際のニーズに応じて、タイムアウトとキャンセルのタイミングを調整できます。

グローバル構成とローカル構成

Axios を使用すると、グローバル構成とローカル構成を構成できるため、アプリケーション全体で一貫した設定が可能になるだけでなく、特定のニーズに基づいたリクエストでパーソナライズされた構成も可能になります。 Axios でグローバル構成とローカル構成を構成する方法は次のとおりです。

グローバル構成

グローバル構成は、アプリケーションのエントリポイントで、通常は main.js またはプロジェクトの構成ファイルで実行できます。 axios.defaults オブジェクト経由で設定:

// main.js or your configuration file

import axios from 'axios';

// 设置全局基础 URL
axios.defaults.baseURL = 'https://api.example.com';

// 设置全局超时时间
axios.defaults.timeout = 5000;

// 设置全局请求头
axios.defaults.headers.common['Authorization'] = 'Bearer YourAccessToken';

この例では、グローバルベース URL、タイムアウト、および共通リクエストヘッダーを設定します。こうすることで、Axios を使用して送信されるすべてのリクエストがこれらの構成を持つようになります。

ローカル構成

リクエストで設定オブジェクトを渡すことにより、リクエストごとに部分的な設定を行うことができます。

axios.get('/api/data', {
    
    
  baseURL: 'https://custom-api.example.com', // 局部基础 URL，会覆盖全局配置
  timeout: 3000, // 局部超时时间，会覆盖全局配置
  headers: {
    
    
    'X-Custom-Header': 'CustomValue' // 局部请求头，会合并全局配置
  }
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

この例では、特定のリクエストにローカルのベース URL、タイムアウト、およびリクエストヘッダーを設定します。これらの設定は、グローバル設定内の対応するエントリをオーバーライドします。

要約する

グローバル設定: axios.defaults オブジェクト経由で設定され、アプリケーション全体に適用されます。
部分構成: 構成オブジェクトを渡すことによって各リクエストに設定され、個々のリクエストに適用されます。

グローバル構成とローカル構成を柔軟に使用することで、さまざまなシナリオで一貫性とパーソナライズされたニーズを実現できます。この柔軟性は、さまざまな API を処理したり、さまざまなタイムアウトを設定したりする場合に役立ちます。

Axios と Cookie

Axios はデフォルトでは Cookie を処理しません。ただし、withCredentials オプションを設定することで Cookie のサポートを有効にすることができます。これは、クロスオリジンリクエストで Cookie を送信および処理する場合に便利です。ここでは、Axios が Cookie を処理する方法について説明します。

Cookie サポートを有効にする

axios.get('/api/data', {
    
    
  withCredentials: true
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

withCredentials: true を設定すると、Axios は、Cookie を含むクロスドメインリクエストに必要な認証情報をリクエストに含めます。

サーバー側の設定

サーバー側では、クライアントがクロスオリジンリクエストで Cookie を送信できるように、応答ヘッダーに Access-Control-Allow-Credentials: true が含まれていることを確認します。

Express.js の例:

app.use((req, res, next) => {
    
    
  res.header('Access-Control-Allow-Credentials', true);
  next();
});

予防

元のポリシー: Cookie サポートを有効にする場合は、リクエストの送信元サーバーと宛先サーバーのプロトコル、ドメイン、ポートが同じであることを確認してください。そうでない場合、ブラウザは Cookie を送信しません。
セキュリティ: Cookie の送信にはセキュリティの問題が伴う可能性があります。アプリケーションとサーバーに Cookie を処理するための適切なセキュリティメカニズムがあることを確認してください。

具体例

以下は、Axios リクエストで Cookie を有効にして処理する方法を示す簡単な例です。

// 发起登录请求，获取 cookies
axios.post('/api/login', {
    
     username: 'user', password: 'pass' }, {
    
     withCredentials: true })
  .then(response => {
    
    
    console.log('Login successful');
    // 发起带有 cookies 的其他请求
    axios.get('/api/data', {
    
     withCredentials: true })
      .then(dataResponse => {
    
    
        console.log(dataResponse.data);
      })
      .catch(error => {
    
    
        console.error(error);
      });
  })
  .catch(error => {
    
    
    console.error('Login failed:', error);
  });

この例では、Cookie は最初にログイン要求で取得され、次に他の要求を行うために使用されます。 Cookie がクロスオリジン要求で渡されるように、サーバー側で Cookie が適切に構成されていることを確認してください。

ファイルのアップロードとダウンロード

Axios は、ファイルのアップロードとダウンロードを処理する機能を提供し、アップロードとダウンロードの進行状況の監視をサポートします。 Axios を使用してファイルのアップロードとダウンロードを処理する方法の詳細な手順は次のとおりです。

ファイルのアップロード

使用 `FormData` 发送文件

// 创建一个 FormData 对象
const formData = new FormData();
formData.append('file', file); // file 是一个文件对象

// 发送文件上传请求
axios.post('/api/upload', formData, {
    
    
  headers: {
    
    
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: progressEvent => {
    
    
    // 处理上传进度
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${
      
      percentCompleted}%`);
  },
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

複数のファイルのアップロード

複数のファイルをアップロードする必要がある場合は、FormData オブジェクトにファイル配列を追加できます。

const formData = new FormData();
files.forEach(file => {
    
    
  formData.append('files[]', file);
});

axios.post('/api/upload', formData, {
    
    
  headers: {
    
    
    'Content-Type': 'multipart/form-data',
  },
  onUploadProgress: progressEvent => {
    
    
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Upload Progress: ${
      
      percentCompleted}%`);
  },
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

ドキュメントをダウンロード

// 发送文件下载请求
axios.get('/api/download', {
    
    
  responseType: 'blob', // 指定响应类型为 blob
  onDownloadProgress: progressEvent => {
    
    
    // 处理下载进度
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`Download Progress: ${
      
      percentCompleted}%`);
  },
})
  .then(response => {
    
    
    // 处理文件下载
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', 'file.txt');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  })
  .catch(error => {
    
    
    console.error(error);
  });

予防

ファイルのアップロードの場合、サーバー側がmultipart/form-data タイプのリクエストを正しく処理し、ファイルデータを解析することを確認してください。
ファイルのダウンロードの場合、バイナリデータを取得するには、応答タイプを blob に設定します。

上記の例を通じて、ファイルのアップロードとダウンロードを実装し、onUploadProgress と onDownloadProgress を通じてアップロードとダウンロードの進行状況を監視できます。サーバー側のファイル処理ロジックが実際のニーズに応じて適応されていることを確認します。

カスタムアダプター

Axios のアダプターメカニズムを使用すると、さまざまなリクエスト環境に適応するようにリクエストを送信する方法をカスタマイズできます。デフォルトでは、Axios はブラウザ側リクエストに XMLHttpRequest を使用しますが、他のリクエストライブラリや環境を使用するようにカスタムアダプタを設定することもできます。ここでは、Axios のアダプターメカニズムを詳細に説明し、アダプターをカスタマイズする方法について詳しく説明します。

デフォルトのアダプター

Axios は、デフォルトで axios/lib/adapters/http ディレクトリからのアダプタを使用します。これには、ブラウザ環境用の xhr.js とノード用の http.js が含まれます。 .js 環境。

カスタムアダプター

Axios 設定で adapter オプションを設定することで、使用するアダプタを指定できます。このオプションは、既存のアダプター関数または独自のカスタムアダプター関数です。

const myAdapter = config => {
    
    
  // 在这里执行你自定义的请求逻辑
};

axios.get('/api/data', {
    
    
  adapter: myAdapter
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

カスタムアダプターの構造

カスタムアダプターは、Axios リクエスト構成オブジェクトを受け取り、リクエストが完了したときに解決されるか、エラーが発生したときに拒否される Promise オブジェクトを返す関数です。

const myAdapter = config => {
    
    
  return new Promise((resolve, reject) => {
    
    
    // 在这里执行你自定义的请求逻辑

    // 请求成功时调用 resolve
    resolve(response);

    // 请求失败时调用 reject
    reject(error);
  });
};

アダプターの使用シナリオ

カスタムアダプターの使用シナリオには次のものが含まれますが、これらに限定されません。

は別のリクエストライブラリを使用します (たとえば、axios/lib/adapters/xhr は XMLHttpRequest を使用します)。
React Native などの非ブラウザ環境の場合
特定の環境では異なるリクエストロジックを使用します。

例: Axios を使用して Node.js でリクエストを作成する

Node.js では、アダプタ axios/lib/adapters/http を使用し、Node .js に合わせて httpAgent と httpsAgent を設定できます。リクエスト環境。

const axios = require('axios');
const http = require('http');
const https = require('https');

const instance = axios.create({
    
    
  baseURL: 'https://api.example.com',
  httpAgent: new http.Agent({
    
     keepAlive: true }),
  httpsAgent: new https.Agent({
    
     keepAlive: true }),
});

instance.get('/api/data')
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

この例では、Node.js の組み込み http モジュールと https モジュールを使用して、ノードからのリクエストに対応するアダプターをセットアップします。 js環境。

同時リクエストとマージリクエスト

Axios は、同時リクエストを処理し、リクエストの結果をマージする機能を提供します。 Axios を使用して同時リクエストを処理し、複数のリクエストの結果をマージする方法の詳細な手順を次に示します。

同時リクエスト

Axios は axios.all メソッドを提供します。このメソッドを使用すると、複数のリクエストを同時に開始し、すべてのリクエストが完了したときにコールバックをトリガーできます。簡単な例を次に示します。

const request1 = axios.get('/api/data1');
const request2 = axios.get('/api/data2');

axios.all([request1, request2])
  .then(axios.spread((response1, response2) => {
    
    
    console.log('Response 1:', response1.data);
    console.log('Response 2:', response2.data);
  }))
  .catch(error => {
    
    
    console.error(error);
  });

この例では、axios.all は複数の Axios リクエストの配列を受信し、axios.spread を使用して各リクエストの応答を処理します。

マージリクエストの結果

場合によっては、複数のリクエストの結果を 1 つのレスポンスに結合する必要がある場合があります。これは、axios.all を axios.spread と組み合わせて使用することで実現できます。

const request1 = axios.get('/api/data1');
const request2 = axios.get('/api/data2');

axios.all([request1, request2])
  .then(axios.spread((response1, response2) => {
    
    
    const mergedData = {
    
    
      data1: response1.data,
      data2: response2.data,
    };
    console.log('Merged Data:', mergedData);
  }))
  .catch(error => {
    
    
    console.error(error);
  });

この例では、axios.all を使用して 2 つのリクエストを同時に作成し、axios.spread を使用して各リクエストからの応答を 1 つのリクエストにマージします。単一のオブジェクト。

予防

axios.all と axios.spread を使用する場合は、両方のリクエストが正常に完了することを確認してください。 1 つのリクエストが失敗すると、チェーン全体が中断され、catch ブロックに入ります。

例: 同時リクエストとマージされた結果

ここでは、同時リクエストで axios.all と axios.spread を使用する方法を示す、より複雑な例を示します。

const getUserData = axios.get('/api/user');
const getPostData = axios.get('/api/posts');
const getCommentsData = axios.get('/api/comments');

axios.all([getUserData, getPostData, getCommentsData])
  .then(axios.spread((userData, postData, commentsData) => {
    
    
    const result = {
    
    
      user: userData.data,
      posts: postData.data,
      comments: commentsData.data,
    };
    console.log('Merged Result:', result);
  }))
  .catch(error => {
    
    
    console.error(error);
  });

この例では、3 つのリクエストを同時に実行し、ユーザーデータ、記事データ、コメントデータを取得し、axios.spread を使用してそれらを 1 つのオブジェクトに結合しました。

Axios 拡張機能

Axios は、インターセプター、カスタムインスタンス、リクエストのキャンセル、リクエストとレスポンスの変換など、いくつかの拡張機能を提供します。以下は、Axios 拡張機能の詳細な説明です。

インターセプター

インターセプターを使用すると、リクエストやレスポンスが処理される前にインターセプトできます。 Axios は、リクエストインターセプタとレスポンスインターセプタをそれぞれ設定するためのプロパティとプロパティを含む axios.interceptors オブジェクトを提供します。 requestresponse

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

axios.interceptors.request.use(
  config => {
    
    
    // 在请求被发送之前做些什么
    console.log('Request Interceptor:', config);
    return config;
  },
  error => {
    
    
    // 对请求错误做些什么
    console.error('Request Error Interceptor:', error);
    return Promise.reject(error);
  }
);

応答インターセプタ

axios.interceptors.response.use(
  response => {
    
    
    // 对响应数据做些什么
    console.log('Response Interceptor:', response);
    return response;
  },
  error => {
    
    
    // 对响应错误做些什么
    console.error('Response Error Interceptor:', error);
    return Promise.reject(error);
  }
);

カスタムインスタンス

カスタム Axios インスタンスを作成して、さまざまなリクエストでさまざまな構成を使用できます。これは、アプリケーションのさまざまな部分で Axios を柔軟に使用する場合に役立ちます。

const instance = axios.create({
    
    
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

instance.get('/api/data')
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

リクエストのキャンセル

Axios には、未完了のリクエストをキャンセルできるリクエストキャンセルメカニズムが用意されています。 CancelToken と source を使用してキャンセルトークンを作成します。

const source = axios.CancelToken.source();

axios.get('/api/data', {
    
    
  cancelToken: source.token
})
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    if (axios.isCancel(error)) {
    
    
      console.log('Request canceled:', error.message);
    } else {
    
    
      console.error(error);
    }
  });

// 取消请求
source.cancel('Request canceled by the user.');

リクエストとレスポンスの変換

transformRequest と transformResponse を構成することで、リクエストとレスポンスの変換関数をカスタマイズできます。

const instance = axios.create({
    
    
  transformRequest: [function (data, headers) {
    
    
    // 对请求数据做处理
    return data;
  }],
  transformResponse: [function (data) {
    
    
    // 对响应数据做处理
    return data;
  }],
});

instance.get('/api/data')
  .then(response => {
    
    
    console.log(response.data);
  })
  .catch(error => {
    
    
    console.error(error);
  });

Axios の機能を拡張する

Axios インスタンスのプロトタイプにメソッドを追加することで、そのインスタンスの機能を拡張できます。

axios.MyCustomFunction = function () {
    
    
  console.log('Custom Function Called');
};

axios.MyCustomFunction();

これにより、特定のニーズを満たすために Axios オブジェクトにカスタムメソッドを追加できるようになります。

要約する

Axios は、インターセプター、カスタムインスタンス、リクエストのキャンセル、リクエストとレスポンスの変換などの一連の拡張機能を提供し、より柔軟でさまざまなニーズに適応できます。実際のアプリケーションでは、これらの機能を組み合わせることで、ネットワーク要求の制御とカスタマイズを改善できます。

パフォーマンスの最適化

パフォーマンスの最適化は、Axios データリクエストがさまざまな環境で適切に実行されるようにするための重要な側面です。 Axios のパフォーマンスを最適化するためのベストプラクティスをいくつか示します。

1. 使用CDN引入

運用環境では、CDN を使用して Axios を導入し、アプリケーションパッケージのサイズを削減することを検討してください。 CDN バージョンを導入すると、キャッシュメカニズムを利用して読み込み速度が向上し、サーバーの負荷を軽減できます。

<!-- 在你的HTML文件中引入 Axios CDN -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. キープアライブの使用

長時間実行されるアプリケーションでは、HTTP キープアライブを有効にすると、リクエスト間の接続を確立するコストを削減できます。 Node.js 環境では、 http.Agent または https.Agent インスタンスを構成し、それを Axios インスタンスに渡すことができます。

const http = require('http');
const https = require('https');

const axiosInstance = axios.create({
    
    
  httpAgent: new http.Agent({
    
     keepAlive: true }),
  httpsAgent: new https.Agent({
    
     keepAlive: true }),
});

3. キャッシュを適切に使用する

シナリオによっては、キャッシュを適切に使用すると、サーバーへの負荷が軽減され、要求速度が向上します。ブラウザーキャッシュ (例: 適切な Cache-Control ヘッダーの設定) またはサーバー側キャッシュ (例: キャッシュミドルウェアの使用) の使用を検討することもできます。

4. リクエストの数を減らす

不要なリクエストを最小限に抑えます。同時リクエストとマージされたリクエストを使用して、ネットワークリクエストの数を減らすことができます。また、リクエストキャンセル機構を利用することで、不要なリクエストをタイムリーにキャンセルします。

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

axios.get('/api/data1', {
    
     cancelToken: source.token })
  .then(response => {
    
    
    // 处理数据
  })
  .catch(error => {
    
    
    if (axios.isCancel(error)) {
    
    
      console.log('Request canceled:', error.message);
    } else {
    
    
      console.error(error);
    }
  });

// 在需要取消请求的时候调用
source.cancel('Request canceled by the user.');

5. 启用Gzip压缩

送信されるデータのサイズを削減し、ネットワークの送信効率を向上させるために、サーバーで Gzip 圧縮が有効になっていることを確認してください。

6. 不必要なインターセプターを避ける

インターセプター内で不必要なロジックが実行されないように、必要なインターセプターのみを追加してください。インターセプターが多すぎる、または複雑すぎると、パフォーマンスに影響が出る可能性があります。

7. 使用最新版本

パフォーマンスとセキュリティの向上を活用するには、Axios の最新バージョンを使用していることを確認してください。

8. 启用懒加载

一部のシナリオでは、アプリケーションの起動時に導入するのではなく、遅延読み込みメカニズムを使用して、必要なときにのみ Axios を読み込むことを検討できます。

// 懒加载 Axios
import('axios').then(axios => {
    
    
  // 使用 Axios
  axios.get('/api/data')
    .then(response => {
    
    
      console.log(response.data);
    })
    .catch(error => {
    
    
      console.error(error);
    });
});

要約する

Axios のパフォーマンスを最適化し、さまざまな環境で良好なパフォーマンスを保証できます。

終わり

この記事を通じて、Axios の高度な技術を理解するだけでなく、それらの技術を実際のプロジェクトに適用し、フロントエンド開発スキルを向上させることができます。