前端开发中的大数据传输优化：提升API接口性能的实战技巧

// 分页请求数据
async function fetchPageData(page = 1, size = 100) {
  const response = await fetch(`/api/data?page=${page}&size=${size}`);
  const data = await response.json();
  return data;
}

// 动态加载下一页数据
let currentPage = 1;
const size = 100;

function loadMoreData() {
  fetchPageData(currentPage, size).then(data => {
    // 渲染数据
    renderData(data.items);
    currentPage += 1;  // 更新当前页码
  });
}

// 监听滚动事件，判断是否接近底部
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
    loadMoreData();  // 当接近底部时加载更多数据
  }
});

// 初始加载数据
loadMoreData();

// 检查响应是否需要解压
async function fetchCompressedData(url) {
  const response = await fetch(url);
  if (response.headers.get('Content-Encoding') === 'gzip') {
    const buffer = await response.arrayBuffer();
    const decompressedData = pako.ungzip(new Uint8Array(buffer), { to: 'string' });
    return JSON.parse(decompressedData);
  }
  return await response.json();
}

// 建立WebSocket连接
const socket = new WebSocket('ws://example.com/data');

// 监听服务器推送的消息
socket.onmessage = function(event) {
  const data = JSON.parse(event.data);
  renderData(data);
};

// 发送请求
socket.send(JSON.stringify({ action: 'get_data' }));

function fetchData(page = 1) {
  fetch(`/api/data?page=${page}`)
    .then(response => response.json())
    .then(data => {
      renderData(data.items);
    });
}

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 200) {
    loadMoreData();
  }
});

// 使用pako解压缩
import pako from 'pako';

async function fetchCompressedData(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const decompressedData = pako.ungzip(new Uint8Array(buffer), { to: 'string' });
  return JSON.parse(decompressedData);
}

// 分片请求数据，假设每个请求返回100条数据
async function fetchChunkedData(page = 1, size = 100, totalItems = 500) {
  const totalPages = Math.ceil(totalItems / size);
  const requests = [];

  for (let i = 0; i < totalPages; i++) {
    requests.push(fetch(`/api/data?page=${i + 1}&size=${size}`));
  }

  // 等待所有请求完成
  const responses = await Promise.all(requests);

  // 解析所有响应数据
  const data = await Promise.all(responses.map(response => response.json()));

  // 合并所有分页数据
  const allData = data.flatMap(pageData => pageData.items);
  
  return allData;
}

// 假设服务器返回Protobuf格式的数据
async function fetchProtobufData(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();

  // 假设我们有一个protobuf的消息定义文件
  const data = protobuf.decode(MyProtoMessage, new Uint8Array(buffer));
  
  return data;
}

// 使用MessagePack进行数据传输
async function fetchMessagePackData(url) {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();

  // 使用MessagePack库解码数据
  const data = msgpack.decode(new Uint8Array(buffer));
  
  return data;
}

// 检查缓存是否存在
function loadDataFromCache() {
  const cachedData = localStorage.getItem('apiData');
  return cachedData ? JSON.parse(cachedData) : null;
}

// 如果没有缓存，则从API加载数据
async function loadData() {
  const cachedData = loadDataFromCache();
  if (cachedData) {
    renderData(cachedData);
  } else {
    const data = await fetchDataFromAPI();
    localStorage.setItem('apiData', JSON.stringify(data));
    renderData(data);
  }
}

// 使用IndexedDB存储数据
function saveDataToIndexedDB(data) {
  const request = indexedDB.open('myDatabase', 1);
  request.onupgradeneeded = (event) => {
    const db = event.target.result;
    db.createObjectStore('dataStore', { keyPath: 'id' });
  };

  request.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction('dataStore', 'readwrite');
    const store = transaction.objectStore('dataStore');
    data.forEach(item => store.put(item));  // 存储数据
  };
}

// 从IndexedDB加载数据
function loadDataFromIndexedDB() {
  const request = indexedDB.open('myDatabase', 1);
  return new Promise((resolve, reject) => {
    request.onsuccess = (event) => {
      const db = event.target.result;
      const transaction = db.transaction('dataStore', 'readonly');
      const store = transaction.objectStore('dataStore');
      const allData = store.getAll();
      allData.onsuccess = () => resolve(allData.result);
      allData.onerror = reject;
    };
    request.onerror = reject;
  });
}

// 使用GraphQL请求数据
async function fetchGraphQLData(query) {
  const response = await fetch('/graphql', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query })
  });

  const { data } = await response.json();
  return data;
}

// GraphQL查询示例
const query = `
  query {
    users {
      id
      name
      email
    }
  }
`;

fetchGraphQLData(query).then(data => {
  console.log(data.users);
});