如何优化 uni-app 应用的网络请求？

推荐答案

1. 使用缓存机制：通过 uni.setStorageSync 和 uni.getStorageSync 缓存请求结果，减少重复请求。
2. 合并请求：将多个小请求合并为一个请求，减少请求次数。
3. 使用拦截器：通过 uni.addInterceptor 统一处理请求和响应，减少重复代码。
4. 优化请求频率：使用防抖和节流技术，避免频繁请求。
5. 压缩请求数据：使用 gzip 压缩请求数据，减少传输时间。
6. 使用 CDN：将静态资源放在 CDN 上，加速资源加载。
7. 优化图片加载：使用懒加载和图片压缩技术，减少图片加载时间。
8. 使用 HTTP/2：利用 HTTP/2 的多路复用特性，提高请求效率。
9. 减少请求头大小：精简请求头，减少不必要的字段。
10. 使用 WebSocket：对于实时性要求高的场景，使用 WebSocket 替代 HTTP 请求。

本题详细解读

1. 使用缓存机制

通过 uni.setStorageSync 和 uni.getStorageSync 缓存请求结果，可以在一定时间内避免重复请求相同的数据。例如：

const cacheKey = 'userData';
let userData = uni.getStorageSync(cacheKey);

if (!userData) {
  userData = await uni.request({ url: 'https://api.example.com/user' });
  uni.setStorageSync(cacheKey, userData);
}

2. 合并请求

将多个小请求合并为一个请求，可以减少请求次数，降低网络开销。例如：

const requests = [
  { url: 'https://api.example.com/user' },
  { url: 'https://api.example.com/posts' }
];

const results = await Promise.all(requests.map(req => uni.request(req)));

3. 使用拦截器

通过 uni.addInterceptor 可以在请求发出前和响应返回后统一处理逻辑，减少重复代码。例如：

-- -------------------- ---- -------
----------------------------- -
  ------------ -
    ----------- - - --------------- ---------------- ------- ------ --
  --
  ------------ -
    -------------------- ---------- -----
  --
  --------- -
    -------------------- --------- -----
  -
---

4. 优化请求频率

使用防抖和节流技术，可以避免频繁请求。例如：

let timer = null;

function debounceRequest() {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    uni.request({ url: 'https://api.example.com/data' });
  }, 300);
}

5. 压缩请求数据

使用 gzip 压缩请求数据，可以减少传输时间。例如：

uni.request({
  url: 'https://api.example.com/data',
  header: {
    'Accept-Encoding': 'gzip'
  }
});

6. 使用 CDN

将静态资源放在 CDN 上，可以加速资源加载。例如：

<image src="https://cdn.example.com/image.png"></image>

7. 优化图片加载

使用懒加载和图片压缩技术，可以减少图片加载时间。例如：

<image lazy-load src="https://example.com/image.jpg"></image>

8. 使用 HTTP/2

利用 HTTP/2 的多路复用特性，可以提高请求效率。例如：

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  header: {
    'Connection': 'Upgrade, HTTP2-Settings'
  }
});

9. 减少请求头大小

精简请求头，减少不必要的字段。例如：

uni.request({
  url: 'https://api.example.com/data',
  header: {
    'Content-Type': 'application/json'
  }
});

10. 使用 WebSocket

对于实时性要求高的场景，使用 WebSocket 替代 HTTP 请求。例如：

const socket = new WebSocket('wss://api.example.com/socket');

socket.onmessage = function(event) {
  console.log('Message from server:', event.data);
};