扼杀网络请求！中断请求的秘籍！

2023-12-01 17:58:20

中断请求：前端优雅处理请求的必备技能

在前端开发中，请求的及时性和准确性至关重要。然而，有时候我们也会遇到需要中断请求的情况，例如重复请求、竞态请求、无效请求和大文件上传暂停与恢复。如何优雅地中断请求，成为前端开发人员必须掌握的技能之一。本文将深入探讨各种中断请求的场景，并提供详细的解决方案。

一、重复请求：拒绝无意义的请求

重复请求是指在短时间内多次发送相同的请求。这不仅会浪费服务器资源，还会导致不必要的页面闪烁。为了避免重复请求，我们可以使用以下方法：

节流

节流函数可以限制请求的发送频率。例如，我们可以使用 Lodash 库提供的 debounce 函数：

const debouncedFunction = debounce(() => {
  // 发送请求
}, 500);

document.addEventListener('click', debouncedFunction);

取消请求

在请求发送后，我们可以使用 AbortController 来取消请求：

const controller = new AbortController();
const signal = controller.signal;

const request = fetch('https://example.com', { signal });

// 中断请求
controller.abort();

二、竞态请求：让最快的请求胜出

竞态请求是指多个请求同时发送，而服务器只处理最先到达的请求。为了避免竞态请求，我们可以使用以下方法：

锁机制

锁机制可以确保只有一个请求能够同时执行。例如，我们可以使用 Mutex 类实现锁机制：

class Mutex {
  constructor() {
    this.locked = false;
  }

  lock() {
    return new Promise((resolve) => {
      if (this.locked) {
        setTimeout(() => {
          this.lock().then(resolve);
        }, 100);
      } else {
        this.locked = true;
        resolve();
      }
    });
  }

  unlock() {
    this.locked = false;
  }
}

Promise.race()

Promise.race() 函数可以让最快的请求胜出：

const promises = [
  fetch('https://example.com/1'),
  fetch('https://example.com/2'),
  fetch('https://example.com/3')
];

Promise.race(promises)
  .then((response) => {
    // 处理最先返回的请求
  });

三、无效请求：拒绝无效的请求

无效请求是指发送到服务器的请求不符合服务器的预期。这可能会导致服务器返回错误代码或不正确的数据。为了避免无效请求，我们可以使用以下方法：

数据验证

在发送请求之前，对请求的数据进行验证。例如，我们可以使用 Joi 库进行数据验证：

const schema = Joi.object({
  name: Joi.string().required(),
  email: Joi.string().email().required(),
  password: Joi.string().min(8).required()
});

const data = {
  name: 'John Doe',
  email: 'johndoe@example.com',
  password: '12345678'
};

const { error } = schema.validate(data);

if (error) {
  // 处理数据验证错误
} else {
  // 发送请求
}

请求拦截器

在发送请求之前，使用请求拦截器来检查请求的有效性。例如，我们可以使用 axios 库的请求拦截器：

axios.interceptors.request.use((config) => {
  // 检查请求的有效性

  // 如果请求无效，则中断请求
  if (!config.valid) {
    return Promise.reject(new Error('Invalid request'));
  }

  // 继续发送请求
  return config;
});

四、大文件上传暂停与恢复：让文件上传更灵活

大文件上传时，可能会遇到网络中断或其他问题导致上传失败。为了解决这个问题，我们可以使用以下方法：

分片上传

将大文件分成多个小块，并逐个上传。这样，即使网络中断，我们也可以从中断的地方继续上传：

const file = document.getElementById('file');
const chunkSize = 1024 * 1024; // 1MB

const chunks = [];
for (let i = 0; i < file.size; i += chunkSize) {
  const chunk = file.slice(i, i + chunkSize);
  chunks.push(chunk);
}

const uploadChunk = (chunk, index) => {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('index', index);

  return fetch('https://example.com/upload', {
    method: 'POST',
    body: formData
  });
};

const uploadChunks = (chunks) => {
  return Promise.all(chunks.map((chunk, index) => uploadChunk(chunk, index)));
};

uploadChunks(chunks)
  .then(() => {
    // 上传完成
  });

断点续传

如果服务器支持断点续传，我们可以从中断的地方继续上传文件：

const file = document.getElementById('file');
const chunkSize = 1024 * 1024; // 1MB

const chunks = [];
for (let i = 0; i < file.size; i += chunkSize) {
  const chunk = file.slice(i, i + chunkSize);
  chunks.push(chunk);
}

const uploadChunk = (chunk, index) => {
  const formData = new FormData();
  formData.append('chunk', chunk);
  formData.append('index', index);

  return fetch('https://example.com/upload', {
    method: 'POST',
    body: formData,
    headers: {
      'Range': `bytes=${index * chunkSize}-${(index + 1) * chunkSize - 1}`
    }
  });
};

const uploadChunks = (chunks) => {
  return Promise.all(chunks.map((chunk, index) => uploadChunk(chunk, index)));
};

uploadChunks(chunks)
  .then(() => {
    // 上传完成
  });