掌握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);
  });