Vue3+TS+Vite 開発スキル: クロスドメイン リクエストとネットワーク リクエストを最適化する方法

Vue3 TS Vite 開発スキル: クロスドメイン リクエストとネットワーク リクエストを最適化する方法

はじめに:
フロントエンド開発では、ネットワーク リクエストが非常に一般的です。オペレーション 。ネットワーク リクエストを最適化してページの読み込み速度とユーザー エクスペリエンスを向上させる方法は、開発者が考慮する必要がある問題の 1 つです。同時に、異なるドメイン名にリクエストを送信する必要がある一部のシナリオでは、クロスドメインの問題を解決する必要があります。この記事では、Vue3 TS Vite 開発環境でクロスドメイン リクエストを行う方法とネットワーク リクエストの最適化テクニックを紹介します。

1. クロスドメインリクエストのソリューション

1. プロキシの使用
   開発環境では、プロキシを構成することでクロスドメインの問題を解決できます。 Vite プロジェクトでは、ルート ディレクトリの vite.config.ts ファイルで関連する設定を行うことができます。たとえば、リクエストを http://api.example.com に送信する必要があり、現在のドメイン名が http://localhost:3000 である場合、これを行うことができます。 vite.config .ts で次の構成を作成します。

// vite.config.ts

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ''),
      },
    },
  },
});

このように、コード内でリクエストを送信するときに、リクエスト アドレスを次のように設定するだけで済みます。 /api で始めます (例: axios.get('/api/user'))。

2. JSONP
   クロスドメイン データの取得が必要な一部のシナリオでは、JSONP を使用してクロスドメインの問題を解決できます。 JSONP は、クロスドメイン リクエストを許可する <script></script> タグの機能を利用し、<script></script> タグを動的に作成することでデータを取得します。たとえば、http://api.example.com/user?callback=handleData にリクエストを送信し、返されたデータを処理する必要がある場合は、次のコードを使用できます:

// SomeUtils.ts

export function jsonp(url: string, callback: string) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callback}`;

    window[callback] = (data: any) => {
      resolve(data);
      document.body.removeChild(script);
    };

    document.body.appendChild(script);
  });
}

// Usage
jsonp('http://api.example.com/user', 'handleData').then((data) => {
  // Handle data
});

2. ネットワーク リクエストの最適化スキル

1. バッチ リクエスト
   一部のシナリオでは、複数のリクエストを同時に送信する必要があります。これらのリクエストはバッチで送信して数を減らすことができます。リクエストを削減し、パフォーマンスを向上させます。 axios.all メソッドを使用してバッチ リクエストを実装できます。

import axios from 'axios';

const request1 = axios.get('/api/user?id=1');
const request2 = axios.get('/api/user?id=2');

axios.all([request1, request2]).then(axios.spread((response1, response2) => {
  // Handle response1 and response2
}));

2. リクエスト結果のキャッシュ
   頻繁に変更されない一部のデータについては、不必要なインターフェイス リクエストを減らすためにリクエスト結果をキャッシュすることを検討できます。データ キャッシュには localStorage または sessionStorage を使用できます。

// SomeUtils.ts

export function fetchUser(id: number) {
  const cacheKey = `user_${id}`;
  const cachedData = localStorage.getItem(cacheKey);
  
  if (cachedData) {
    return Promise.resolve(JSON.parse(cachedData));
  } else {
    return axios.get(`/api/user?id=${id}`).then((response) => {
      const data = response.data;
      localStorage.setItem(cacheKey, JSON.stringify(data));
      return data;
    });
  }
}

// Usage
fetchUser(1).then((data) => {
  // Handle data
});

3. 重複リクエストのキャンセル
   一部のシナリオでは、ユーザーがリクエストを頻繁にトリガーする可能性があります。重複リクエストの送信を避けるために、重複リクエストをキャンセルする戦略を使用できます。これは、axios の cancelToken を使用することで実現できます。

const CancelToken = axios.CancelToken;
let cancel: Canceler; // 定义取消函数

axios.get('/api/user', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  }),
});

// 当需要取消请求时调用
cancel();

概要:
この記事では、Vue3 TS Vite 開発環境におけるクロスドメイン リクエストのソリューションを紹介し、バッチ リクエスト、リクエスト結果のキャッシュ、キャンセルなどのネットワーク リクエストの最適化テクニックを提供します。重複したリクエスト。ネットワークリクエストを適切に最適化することで、ページのパフォーマンスとユーザーエクスペリエンスを向上させることができます。

上記はいくつかの簡単な例とテクニックにすぎず、開発者は実際のニーズに応じて詳細な研究と実践を行うことができます。この記事が、クロスドメイン リクエストとネットワーク リクエストの最適化において、Vue3 TS Vite 開発者に何らかの助けとインスピレーションを提供することを願っています。

以上がVue3+TS+Vite 開発スキル: クロスドメイン リクエストとネットワーク リクエストを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。