Vue3+TS+Vite开发技巧：如何进行跨域请求和网络请求优化

// 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/, ''),
      },
    },
  },
});

// 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
});

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
}));

// 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
});

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

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

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