3分钟解决90%的前端请求问题：whatwg-fetch实战指南-优快云博客

3分钟解决90%的前端请求问题：whatwg-fetch实战指南

【免费下载链接】fetch A window.fetch JavaScript polyfill. 项目地址: https://gitcode.com/gh_mirrors/fe/fetch

你是否还在为不同浏览器的fetch兼容性头疼？还在纠结如何优雅处理请求头和响应解析？本文将带你3分钟上手whatwg-fetch这个超轻量的window.fetch兼容库，从安装到高级应用，一次搞定所有请求难题。

读完本文你将获得：

5分钟完成兼容库部署
7种常见请求场景的代码模板
3步实现响应数据自动转换
2个错误处理最佳实践

为什么选择whatwg-fetch？

whatwg-fetch是一个仅20KB的轻量级JavaScript兼容库，它实现了WHATWG Fetch标准，让老旧浏览器也能使用现代的fetchAPI。与传统的XMLHttpRequest相比，它提供了更简洁的语法和更强大的功能：

特性	whatwg-fetch	XMLHttpRequest
语法	Promise链式调用	回调函数嵌套
体积	~20KB	浏览器内置(不可控)
兼容性	IE9+及所有现代浏览器	所有浏览器
功能	完整支持请求/响应拦截	需手动实现

项目核心文件结构：

主库文件：fetch.js
类型定义：fetch.js.flow
测试用例：test/test.js

快速开始：5分钟接入流程

1. 安装方式

NPM安装（推荐）：

npm install whatwg-fetch --save

直接引入CDN（国内加速）：

<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@3.6.20/dist/fetch.umd.js"></script>

2. 基础使用模板

// 简单GET请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络响应不正常');
    }
    return response.json(); // 自动解析JSON
  })
  .then(data => console.log('获取数据:', data))
  .catch(error => console.error('请求失败:', error));

实战场景：7种请求模板

1. 带请求头的POST请求

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer your-token-here'
  },
  body: JSON.stringify({
    username: 'test',
    email: 'test@example.com'
  })
})
.then(response => response.json())
.then(data => console.log('提交成功:', data));

2. 表单数据提交

const formData = new FormData();
formData.append('username', 'test');
formData.append('avatar', fileInput.files[0]);

fetch('/upload', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log('上传成功:', data));

3. 带超时控制的请求

// 使用AbortController实现超时控制
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/slow-request', {
  signal: controller.signal
})
.then(response => response.json())
.then(data => {
  clearTimeout(timeoutId);
  console.log('数据:', data);
})
.catch(error => {
  if (error.name === 'AbortError') {
    console.error('请求超时!');
  }
});

4. 请求拦截与重试

function fetchWithRetry(url, options = {}, retries = 3) {
  return fetch(url, options)
    .then(response => {
      if (!response.ok && retries > 0) {
        console.log(`重试(${retries}次剩余)`);
        return fetchWithRetry(url, options, retries - 1);
      }
      return response;
    });
}

// 使用方式
fetchWithRetry('https://api.example.com/unstable-endpoint')
  .then(response => response.json());

响应处理：3步完美解析

1. 自动转换不同类型响应

whatwg-fetch提供了多种响应解析方法：

fetch('https://api.example.com/data')
  .then(response => {
    // 根据Content-Type自动选择解析方式
    const contentType = response.headers.get('content-type');
    if (contentType.includes('application/json')) {
      return response.json(); // JSON解析
    } else if (contentType.includes('text/')) {
      return response.text(); // 文本解析
    } else if (contentType.includes('form-data')) {
      return response.formData(); // FormData解析
    } else {
      return response.blob(); // 二进制数据
    }
  })
  .then(data => console.log('解析结果:', data));

2. 处理大型响应流

对于大文件下载，可使用ReadableStream分块处理：

fetch('https://example.com/large-file.zip')
  .then(response => {
    const reader = response.body.getReader();
    const totalSize = response.headers.get('content-length');
    let receivedSize = 0;
    
    return new Promise((resolve, reject) => {
      function processChunk({ done, value }) {
        if (done) {
          console.log('下载完成');
          resolve();
          return;
        }
        
        receivedSize += value.length;
        const progress = Math.round((receivedSize / totalSize) * 100);
        console.log(`下载进度: ${progress}%`);
        
        // 处理文件块...
        reader.read().then(processChunk).catch(reject);
      }
      
      reader.read().then(processChunk).catch(reject);
    });
  });

错误处理：2个最佳实践

1. 统一错误处理中间件

function handleResponse(response) {
  if (!response.ok) {
    return response.json().then(err => {
      throw {
        status: response.status,
        message: err.message || '请求失败',
        data: err
      };
    }).catch(() => {
      throw {
        status: response.status,
        message: '服务器错误',
        data: null
      };
    });
  }
  return response.json();
}

// 使用方式
fetch('https://api.example.com/data')
  .then(handleResponse)
  .then(data => console.log('成功:', data))
  .catch(error => {
    console.error(`[${error.status}] ${error.message}`);
    // 显示错误提示给用户
  });

2. 网络错误检测

fetch('https://api.example.com/data')
  .catch(error => {
    if (error.name === 'TypeError' && error.message === 'Network request failed') {
      alert('网络连接失败，请检查您的网络设置');
    } else {
      alert('请求发生错误: ' + error.message);
    }
  });

高级技巧：请求优化方案

1. 请求缓存策略

利用Cache-Control头实现智能缓存：

fetch('https://api.example.com/data', {
  headers: {
    'Cache-Control': 'max-age=3600' // 缓存1小时
  }
})
.then(response => response.json());

2. 请求取消功能

使用AbortController取消正在进行的请求：

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

// 5秒后取消请求
setTimeout(() => controller.abort(), 5000);

fetch('https://api.example.com/slow-request', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已取消');
    }
  });

兼容性处理

whatwg-fetch已内置对老旧浏览器的支持，但在某些极端环境下可能需要额外的polyfill：

// 完整兼容性方案
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import 'whatwg-fetch';

项目的package.json中定义了所有依赖项，可查看package.json获取完整兼容性信息。

测试与调试

项目提供了完整的测试用例，可通过以下命令运行：

npm test

测试文件位于test/目录下，包含：

test/test.js - 主测试文件
test/worker.js - Web Worker测试

总结与展望

whatwg-fetch作为一个成熟的fetch兼容库，以其轻量、可靠的特性，成为前端开发的必备工具。通过本文介绍的模板和技巧，你可以轻松应对90%以上的前端请求场景。

项目持续维护更新，最新版本信息可查看package.json中的version字段。未来它将继续跟进WHATWG标准，为开发者提供更优秀的网络请求体验。

若你觉得本文有帮助，请点赞收藏，关注作者获取更多前端实用技巧！下期预告：《深入理解Fetch API拦截器实现》

【免费下载链接】fetch A window.fetch JavaScript polyfill. 项目地址: https://gitcode.com/gh_mirrors/fe/fetch

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考