Vue3 TS Vite 開発スキル: クロスドメイン リクエストとネットワーク リクエストを最適化する方法
はじめに:
フロントエンド開発では、ネットワーク リクエストが非常に一般的です。オペレーション 。ネットワーク リクエストを最適化してページの読み込み速度とユーザー エクスペリエンスを向上させる方法は、開発者が考慮する必要がある問題の 1 つです。同時に、異なるドメイン名にリクエストを送信する必要がある一部のシナリオでは、クロスドメインの問題を解決する必要があります。この記事では、Vue3 TS Vite 開発環境でクロスドメイン リクエストを行う方法とネットワーク リクエストの最適化テクニックを紹介します。
1. クロスドメインリクエストのソリューション
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')
)。
<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. ネットワーク リクエストの最適化スキル
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 }));
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 });
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 サイトの他の関連記事を参照してください。