掌握fetch请求：从基础用法到高级封装，收藏这篇就够了-港品优选

文章目录

- 1.前言
- 2.基本用法
- - 请求配置
  - GET 请求示例
  - POST 请求示例
- 3.错误处理
- 4.使用 async/await
- 5.设置超时
- 6.fetch请求封装处理
- - 代码封装
  - 请求示例

1.前言

fetch 是现代浏览器中用于发起网络请求的 API，它基于 Promise，提供了一种更强大和灵活的方式来处理 HTTP 请求。fetch 可以替代旧的 XMLHttpRequest，并且与 async/await 结合使用时，可以使异步代码看起来更加简洁易读。下面是对 fetch 请求的详细描述，包括基本用法、选项配置、错误处理等方面

2.基本用法

基本语法

fetch(url, options) // 第一个参数：要获取资源的url // 第二个参数：可选，用于指定请求的配置项

请求配置

options参数可以是一个对象，用于设置请求的详细信息，包括但不限于：

method: 请求方法，如GET,POST,PUT,DELETE等。
headers: 请求头部，用于设置Content-Type或其他自定义头部。
body: 请求体，通常用于POST或PUT请求。
mode: 请求模式，如cors,no-cors,same-origin。
credentials: 是否发送 cookies，如include,omit,same-origin。
cache: 缓存模式，如default,no-store,reload等。

GET 请求示例

fetch('请求的接口'，options) .then(response => response.json()) // 解析响应体为 JSON .then(data => console.log(data)) // 处理数据 .catch(error => console.error('Error:', error)); // 处理错误

POST 请求示例

fetch('请求的接口', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

3.错误处理

fetch 的 Promise 通常不会因为 HTTP 错误状态码（如 404 或 500）而拒绝，只有在网络故障或请求无法完成时才会拒绝。因此，即使服务器返回了一个错误状态码，response.ok 属性也会是 false，但 fetch 仍会解析为一个成功的 Promise。

fetch('请求的接口') .then(response => { if (!response.ok) { throw new Error(`请求错误! 当前: ${response.status}`); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

4.使用 async/await

fetch 与 async/await 结合使用可以使异步代码看起来像同步代码一样，更易于理解和维护。

async function fetchData() { try { const response = await fetch('请求接口'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log(data); } catch (error) { console.error('Error:', error); } } fetchData();

5.设置超时

fetch本身不支持超时设置，但你可以通过包装Promise来实现超时功能。

function fetchWithTimeout(resource, options = {}, timeout = 5000) { return new Promise((resolve, reject) => { const id = setTimeout(() => { reject(new Error("Request timed out")); }, timeout); fetch(resource, options) .then(response => { clearTimeout(id); resolve(response); }) .catch(error => { clearTimeout(id); reject(error); }); }); } fetchWithTimeout('请求接口', {}, 3000) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error));

6.fetch请求封装处理

代码封装

// 定义状态码消息映射 const codeMessage = { 200: '服务器成功返回请求的数据。', 201: '新建或修改数据成功。', 202: '一个请求已经进入后台排队（异步任务）。', 204: '删除数据成功。', 400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。', 401: '用户没有权限（令牌、用户名、密码错误）。', 403: '用户得到授权，但是访问是被禁止的。', 404: '发出的请求针对的是不存在的记录，服务器没有进行操作。', 406: '请求的格式不可得。', 410: '请求的资源被永久删除，且不会再得到的。', 422: '当创建一个对象时，发生一个验证错误。', 500: '服务器发生错误，请检查服务器。', 502: '网关错误。', 503: '服务不可用，服务器暂时过载或维护。', 504: '网关超时。' }; // 请求配置 const defaultOptions = { timeout: 1000 * 30, // 默认超时时间 headers: { 'Content-Type': 'application/json;charset=utf-8' }, baseURL: process.env.VUE_APP_BASE_API || '' // 请求基地址 }; // 异常拦截处理器 const errorHandler = (error) => { if (error.response) { console.log(codeMessage[error.response.status] || '未知错误'); } return Promise.reject(error); }; // 请求拦截器 const requestInterceptor = (config) => { const newConfig = { ...config }; // 添加基础URL newConfig.url = `${defaultOptions.baseURL}${config.url}`; // 添加token到header const token = sessionStorage.getItem('token'); if (token) { newConfig.headers.append('Authorization', `Bearer ${token}`); } else { console.log('没有token'); } return newConfig; }; // 响应拦截器 const responseInterceptor = (response) => { if (response.ok) { return response.json(); } else { throw response; } }; // 创建一个封装后的fetch函数 const fetchWrapper = (url, options = {}) => { const config = requestInterceptor({ ...defaultOptions, ...options, url }); // 设置超时 const controller = new AbortController(); const { signal } = controller; const timeoutId = setTimeout(() => controller.abort(), config.timeout); return fetch(config.url, { ...config, signal }) .then((response) => { clearTimeout(timeoutId); return responseInterceptor(response); }) .catch((error) => { clearTimeout(timeoutId); if (error.name === 'AbortError') { console.error('请求超时'); } return errorHandler(error); }); }; // 创建一个API客户端类 class APIClient { get(url, options = {}) { return fetchWrapper(url, { ...options, method: 'GET' }); } post(url, body, options = {}) { return fetchWrapper(url, { ...options, method: 'POST', body: JSON.stringify(body) }); } put(url, body, options = {}) { return fetchWrapper(url, { ...options, method: 'PUT', body: JSON.stringify(body) }); } delete(url, options = {}) { return fetchWrapper(url, { ...options, method: 'DELETE' }); } } export default new APIClient();

请求示例

//引入 APIClient import APIClient from './APIClient'; // GET 请求 APIClient.get('请求接口') .then(response => { console.log('GET 请求成功:', response); }) .catch(error => { console.error('GET 请求失败:', error); }); // POST请求 const newUser = { name: 'John Doe', email: 'john.doe@example.com', password: 'secretpassword' }; APIClient.post('请求接口', newUser) .then(response => { console.log('POST 请求成功:', response); }) .catch(error => { console.error('POST 请求失败:', error); });

2025开年，AI技术打得火热，正在改变前端人的职业命运：