# HttpClient

**Repository Path**: GodanKing/http-client

## Basic Information

- **Project Name**: HttpClient
- **Description**: 更聚焦于业务的HTTP客户端封装
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-24
- **Last Updated**: 2025-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# HTTP 客户端

基于浏览器 fetch API 的现代化 HTTP 客户端，让开发者更聚焦于业务。

更多设计缘由请移步博客 => [如何封装 HTTP 客户端](https://www.cnblogs.com/KnowledgeCommunism/articles/19002462)

## 快速开始

以下是一个完整的登录和查询用户配置的示例：

```javascript
import { createHttpClient } from './httpClient.js';

// 存储登录 token
let authToken = '';

// 创建认证服务客户端
const authRequest = createHttpClient('https://api.auth.example.com');

// 创建用户服务客户端（使用动态 token）
const userRequest = createHttpClient('https://api.users.example.com', {
  makeHeaders: () => ({ 
    Authorization: authToken ? `Bearer ${authToken}` : '' 
  }),
});

// 配置认证服务接口
const authServer = {
  login: (credentials) => {
    return authRequest({ 
      uri: '/login',
    }, { 
      json: credentials 
    });
  },
};

// 配置用户服务接口
const userServer = {
  // 获取用户配置
  getConfig: () => {
    return userRequest({ 
      uri: '/user/config' 
    });
  },
  
  // 获取用户资料
  getProfile: () => {
    return userRequest({ 
      uri: '/user/profile' 
    });
  },
};

// 完整的登录和查询流程
async function loginAndGetUserConfig() {
  try {
    // 1. 用户登录
    console.log('正在登录...');
    const loginResult = await authServer.login({
      username: 'user@example.com',
      password: 'securePassword123'
    });
    
    // 2. 保存 token
    if (loginResult.data && loginResult.data.token) {
      authToken = loginResult.data.token;
      console.log('登录成功，token 已保存');
    } else {
      throw new Error('登录响应中未找到 token');
    }
    
    // 3. 获取用户配置
    console.log('获取用户配置...');
    const userConfig = await userServer.getConfig();
    console.log('用户配置:', userConfig.data);
    
    // 4. 获取用户资料
    console.log('获取用户资料...');
    const userProfile = await userServer.getProfile();
    console.log('用户资料:', userProfile.data);
    
    return { config: userConfig.data, profile: userProfile.data };
    
  } catch (error) {
    console.error('操作失败:', error.message);
    throw error;
  }
}

// 执行示例
loginAndGetUserConfig()
  .then(result => {
    console.log('操作完成:', result);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });
```

## 使用示例

### 创建服务客户端

通过`createHttpClient()`函数构建连接到不同服务的客户端，以支持多服务请求场景。

```javascript
/**
 * 创建连接不同业务服务的HTTP客户端
 */

// 创建认证服务客户端
const authRequest = createHttpClient('https://api.auth.example.com');

// 创建用户服务客户端
const userRequest = createHttpClient('https://api.users.example.com', {
  // 统一的方式动态获取token
  makeHeaders: () => ({ Authorization: `Bearer ${loginResponse.token}` }),
});

// 创建支付服务客户端
const paymentRequest = createHttpClient('https://api.payments.example.com');


// ================== 相同作用域下的客户端 ==================

// 支持无主机名的baseUrl，统一的uri前缀：/api
const request = createHttpClient('/api');
// 或者，没有统一的uri前缀
const request = createHttpClient('');
```

### 配置接口

杜绝反复传递 uri、header、httpMethod 等参数。在具体服务客户端的基础上聚合服务 API 配置，让使用者只关注业务（变化）的部分。

```javascript
// ========================================= 一次配置，到处使用 ===========================================
// 配置认证服接口
const authServer = {
    login: (json) => {
        return authRequest({ uri: '/login' }, { json }),
    },
    // 定义认证服上的其他API
};

// 配置用户资料服务接口
const userServer = {
    profile: () => {
        return userRequest({ uri: '/profile' }),
    },
    // 定义认证服上的其他API
};

// 配置支付服务接口
const paymentServer = {
    process: (options) => {
      const { customErrorHandler, json } = options
      return userRequest(
        { uri: '/process' },
        {
          json,
          // 重新定义响应处理器
          handlers: _defaultHandlers => [handleShowMessage, customErrorHandler],
        }
      ),
    },
    // 定义认证服上的其他API
};

// 统一对服务端返回结果进行转换处理
function tidyData(data) {
  // null | undefined => []
  // null | undefined => 默认值
  // ...
  return data;
}

// 使用transform对服务端返回结果进行统一的数据转换
const serviceServer = {
  someApi: (json) => {
    return request(
      { uri: "/some-api" },
      // 在默认响应处理器后面增加 tidyData
      { json, handlers: defaultHandlers => [...defaultHandlers, tidyData] }
    );
  },
};
```

### 请求示例

声明式的调用接口，隐藏统一惯例和业务关联低的细节。

```javascript
// ========================================= 更聚焦业务的使用 ===========================================

// 用户登录
const loginResponse = await authServer.login({
  username: 'user@example.com',
  password: 'securePassword',
});

// 获取用户资料
const userProfile = await userServer.profile();

// 自定义错误处理
const paymentResult = await paymentServer.process({
  json: { amount: 100, currency: 'USD' },
  customErrorHandler: (content) => {
    if (content.code === 429) {
      // 处理限流错误
      showMessage('error', '操作过于频繁，请稍后再试');
      return { isOver: true };
    }
    return { isOver: false, data: content.data };
  },
});
```