资源请求模块

@jiess/http是一个用于请求后端资源的工具；通俗点说，就是前端调后端接口的一个工具模块

特点

默认使用fetch发起请求，向下兼容使用XMLHttpRequest发起请求，适用于所有web场景
基于约定使用接口（如传参过程）；所以接口的构造极简洁，且使用亦很方便
构造过程中，会为每个接口生成KEY，结合JiessLoading，可观察一个或多个接口的请求状态，可用于界面中loading的控制
内置的接口防抖功能（可配置是否启用），能自动识别相同的请求，并使用内置策略，减轻服务器的压力
新版中，可将底层发起请求的过程托管出来，自定义请求过程，从而可兼容任意Js环境

准备工作

使用包管理器，安装依赖

bash

# 安装工具模块
npm i @jiess/http -S
# -------------------------------------------------

# 引入未经babel转化的版本（体积小，建议高版本项目中使用）
import JiessHttp from '@jiess/http';

# 引入babel转化的版本（体积大，建议低版本项目中使用）
import JiessHttp from '@jiess/http/JiessHttp.babel';

使用cdn引入js库

bash

# 引入未经babel转化的版本（体积小，建议高版本项目中使用）
<script src="//cdn.jsdelivr.net/npm/@jiess/http"></script>

# 引入babel转化的版本（体积大，建议低版本项目中使用）
<script src="//cdn.jsdelivr.net/npm/@jiess/http/JiessHttp.babel.js"></script>

使用cdn引入后，会在全局挂载名为JiessHttp的实例对象

上手使用

首先需要传入配置，实例化JiessHttp，得到实例对象api

实例化示例

// @/jiessConfig/http/index.js

// 基础的请求配置
export const httpConfig = {
  // 超时等待时间
  timeout: 10000,
  // 请求缓存参数
  httpCacheParam: {
    // 请求响应后，等待清除缓存时间
    // 默认未0，立即清除
    waitTime: 100,
  },
	// 拦截器
  interceptors: {
		// 成功响应拦截
    responseSuccess: responseSuccessFunc,
		// 失败响应拦截
    responseError: responseErrorFunc,
		// 请求拦截
    request: requestFunc,
  },
	// 自定义请求拦截，实现本地的数据模块
	// url为实际请求的完整地址
	// param为请求时的完整参数
	customFetch: async (url, param) => {
		// 对指定的接口和参数进行定制化处理，并模拟响应数据
		return { code: 200, message: 'success', data: { ... } }
	}
};
// 服务器地址
const baseURL = 'https://地址/路径';
// 实例化JiessHttp
export const api = new JiessHttp({ baseURL, ...httpConfig });

timeout【毫秒数值】

属性为毫秒值，当服务器超过给定的时长仍未响应，则报错

httpCacheParam

用于定义缓存配置；默认开启缓存模式，该模式下，相同的接口在第一次发起的请求还未响应时，仅会向服务器请求一次，类似防抖，从而减轻服务器压力

有时服务器响应太快，导致页面的loading一闪而过；所以这里的waitTime是指得到请求数据后，再等待的时长，再将响应的数据分发给所有接口

interceptors

该对象用于提供请求和响应的拦截器，拦截器均为函数类型

customFetch

启用该功能后，将会拦截fetch请求或XMLHttpRequest请求的发起过程，实现定制化响应；常用于本地的数据模拟（如结合mockjs响应数据），也可以定制化处理复杂请求

由于请求内核可定制，亦可以兼容非web环境，如小程序中可使用wx.request， node环境中使用http/https等模块，定制化封装并发起真实请求

接口配置示例

// 文件位置 @/services/common.js

// 导入JiessHttp实例对象
import { api } from '@/config';
// 按钮权限管理
export const buttonApi = api.create({
  add: ['POST', '/user/v1/button'],
  del: ['DELETE', '/user/v1/button'],
  edit: ['PUT', '/user/v1/button'],
  query: ['GET', '/user/v1/button'],
  list: ['GET', '/user/v1/button/list'],
  switch: ['PUT', '/user/v1/button/switch'],
});

// 菜单相关操作
export const menuApi = api.create({
  add: ['POST', '/user/v1/menu'],
  del: ['DELETE', '/user/v1/menu'],
  edit: ['PUT', '/user/v1/menu'],
  query: ['GET', '/user/v1/menu'],
  list: ['GET', '/user/v1/menu/list'],
  tree: ['GET', '/user/v1/menu/tree'],
  switch: ['PUT', '/user/v1/menu/switch'],
});

以上示例：每一条属性对应的数组，就是一个接口；第一眼是不是特别简单

常规使用接口

// 导入接口实例
import { buttonApi } from '@/services/common.js';

// 返回promise；get请求，默认采用form键值传参
buttonApi.list({ pageSize: 1, limit: 10})

// 返回promise；get请求，默认url传参
// url转化为 /user/v1/button/1
buttonApi.query(1)

// 返回promise；delete请求，默认url传参
// url转化为 /user/v1/button/1
buttonApi.del(1)

// 返回promise；post请求，默认body传参
// param为对象或数组，转化为JSON字符串传递
buttonApi.add(param)

// 返回promise；put请求，默认body传参
// param为对象或数组，转化为JSON字符串传递
buttonApi.edit(param)

复合使用

在一些普通场景，需支持接口动态参数

字符串和数值类型的参数，默认作为接口地址的补全参数

注：示例中的delete和query接口即复合此情形

在较复杂的使用场景，有时候需要同时对url和body传参

get请求，仅支持url传参
delete请求，首参为url参数，二参为body参数
post请求，首参为body参数，二参为url参数
put请求，首参为body参数，二参为url参数

在更复杂的使用场景，需进一步支持接口动态参数

使用第三参，get请求顺延到第二参，提供字符串参数

进一步复杂的场景，需要使用接口单独提供header参数

提供第四参，get请求顺延到第三参，提供header配置

请求协议

在配置中使用type控制请求协议，默认对应四种常规类型：

json：模型类型，即application/json
text：模型类型，即application/text
form：模型类型，即application/x-www-form-urlencoded
其他：即不指定content-type，一般在附件上传时使用

如需使用其他协议，手动配置header即可

接口标识

通过JiessHttp生成的接口，都会自动生成接口标识

获取接口标识

// 导入接口实例
import { buttonApi } from '@/services/common.js';

// 这是一个接口
buttonApi.list
// 对应的接口标识（即接口名+Key）
buttonApi.listKey  // GET_/user/v1/menu

接口标识具备一定的唯一性，在接口请求时，作为loading监听器的依据

与axios对比

JiessHttp是一个类似axios的后端资源请求工具，以下是一些对比

体积更小，非babel打包后，体积仅8KB
构造接口的过程，以及使用过程特别简单（上述代码中已有示例）
对接口请求状态的灵活观察，可方便实现loading等效果
遇到相同接口并发请求时的自动识别，以及内置防抖策略
灵活的可定制处理，可实现对fetch请求的拦截

资源请求模块 ​

特点 ​

准备工作 ​

上手使用 ​

实例化示例 ​

timeout【毫秒数值】 ​

httpCacheParam ​

interceptors ​

customFetch ​

接口配置示例 ​

常规使用接口 ​

复合使用 ​

请求协议 ​

接口标识 ​

与axios对比 ​