fetch-plus 使用指南

fetch-plus 使用指南

fetch-plus🐕 Fetch API with middlewares项目地址:https://gitcode.com/gh_mirrors/fe/fetch-plus

项目介绍

fetch-plus 是一个基于原生 JavaScript Fetch API 的增强库，旨在提供更加健壮、灵活和易用的网络请求解决方案。它在 Fetch API 的基础上扩展了错误处理、自动重试、请求拦截器、响应解析等功能，使得开发者在进行前端或Node.js环境下的HTTP请求时能够更加便捷、高效。

项目快速启动

要快速开始使用 fetch-plus，首先确保你的开发环境中已经安装了 Node.js。然后，可以通过 npm 或 yarn 来添加这个依赖到你的项目中。

安装

通过npm安装：

npm install fetch-plus --save

或者使用yarn：

yarn add fetch-plus

基本使用示例

接下来，在你的代码中引入并使用 fetch-plus 进行API调用：

const FetchPlus = require('fetch-plus');

// 初始化fetch-plus实例（可选，用于配置默认参数）
const myFetch = new FetchPlus();

// 发起GET请求
myFetch.get('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

应用案例和最佳实践

错误处理和自动重试

fetch-plus 提供了强大的错误处理机制，包括自动重试失败的请求。例如，你可以这样配置自动重试：

const myFetch = new FetchPlus({
  retries: 3, // 请求失败后尝试重新发送的次数
  retryDelay: 1000, // 每次重试之间的延迟时间，单位是毫秒
});

myFetch.get('可能不稳定的服务地址')
  .then(response => {
    if (!response.ok) throw new Error('网络响应错误');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('处理错误或重试失败', error));

自定义请求头和拦截器

使用拦截器可以轻松地添加全局请求头或其他逻辑：

myFetch.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer YOUR_TOKEN';
  return config;
});

// 现在所有的请求都会自动携带授权头
myFetch.get('受保护的API地址')
  .then(response => response.json());

典型生态项目集成

fetch-plus 本身作为一个轻量级的库，易于与其他JavaScript生态中的工具和框架集成，比如React、Vue或Express等。

在React中的简单应用:

假设你有一个简单的React应用，并希望使用fetch-plus来发起GET请求获取数据。

import React, { useEffect, useState } from 'react';
import FetchPlus from 'fetch-plus';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const myFetch = new FetchPlus();
    myFetch.get('https://api.example.com/items')
      .then(res => res.json())
      .then(json => setData(json.items));
  }, []);

  return (
    <div>
      {data.map(item => (<li key={item.id}>{item.title}</li>))}
    </div>
  );
}

export default App;

fetch-plus 通过其丰富的特性和简洁的API设计，让网络请求变得更简单、更可控，非常适合现代Web应用开发的需求。

fetch-plus🐕 Fetch API with middlewares项目地址:https://gitcode.com/gh_mirrors/fe/fetch-plus