npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

sluggard-http

v1.3.4

Published

基于 axios 的多功能请求库,与 axios 使用方式完全兼容,并提供自定义请求别名功能与多种请求控制方法。

Downloads

9

Readme

sluggard-http

✨ 请确保项目已安装 axios 依赖

文档地址 👇

https://www.wem3.cn/sluggard/sluggard-http/

基于 axios 的多功能请求库,与 axios 使用方式完全兼容,并提供自定义请求别名功能与多种请求控制方法。

快速开始

  • 使用 Http.create() ( 与 axios.create() 基本相同 ) 来创建实例
  • 用法可参考 axios 文档 The Axios Instance
  • Http.create() 的第一个参数与 axios.create()config 参数一致, 第二个参数为 sluggard-http 自定义请求别名进度生命周期 功能的配置项。
// import axios from 'axios'
import { Http } from 'sluggard-http'

// export const http = axios.create({
export const http = Http.create(
  {
    baseURL: '...',
    timeout: 1000,
    headers: {'Authorization': '...'}
  },
  // 新增配置项
  {
    // 自定义请求别名
    methodAlias: {
      download: {
        axiosMethod: 'post',
        handle: (url: string, data: any, config: RequestConfig) => {
          return [url, data, { ...config, responseType: 'blob' }]
        },
      },
    },
    // 进度生命周期
    life: {
      begin: () => {
        NProgress.start()
      },
      end: () => {
        NProgress.done()
      },
    },
  }
)

内置功能 - 自定义请求别名

支持添加自定义的请求别名或重构已有别名,用来对请求进行统一处理。

e.g. 新增 download 别名

  • 新增一个 download 别名,使用此别名时调用 post 方法,并自动携带 responseType: 'blob'
// 配置
const methodAlias: MethodAlias = {
    download: {
        axiosMethod: 'post',
        handle: (url: string, data: any, config: RequestConfig) => {
            return [url, data, { ...config, responseType: 'blob' }]
        },
    },
}

// 使用
http.download(url, data, config)

e.g. 新增 data 别名

  • 新增一个 data 别名,使用此别名时调用 post 方法,并自动判断响应体中 code 字段是否为 200 ,是则直接返回响应体中的 data 字段数据
// 配置
const methodAlias: MethodAlias = {
    data: {
        axiosMethod: 'post',
        handle: (url: string, data: any, config: RequestConfig) => {
            return [url, data, { ...config, postType: "postData" }]
        },
    },
}
// 相应拦截
http.interceptorsResponseUse((response) => {
    if (
        response.config.postType === 'postData'
        && response.data.code === 200
    ){
        return response.data.data
    }
    return response
})

// 使用
http.data(url, data, config)

e.g. 重构 post 别名

  • 重构 axios 的 post 别名,增加 <清除请求体数据中 字符串类型字段 数据的前后空格> 的功能
// 配置
const methodAlias: MethodAlias = {
  post: {
    axiosMethod: 'post',
    handle: (url: string, data: any, config: RequestConfig) => {
      clearTrim(config)
      return [url, data, config]
    },
  },
}

// 使用
http.post(url, data, config)

内置功能 - 多种请求控制

支持 请求更新全局请求清除请求拦截 功能

请求更新

  • 在当前请求处于 进行中 时,若发起 相同 请求,则会触发请求更新, 取消 之前未完成的请求,避免重复请求
// 使用
export async function getList(data: any) {
    const httpRes = await http.post("/getList", data, {
        updateLevel: "path",
    });
    return httpRes;
}

全局请求清除

  • 清除并 取消 当前所有的请求,往往在 路由变化 时使用,避免请求资源的浪费
router.afterEach(() => {
    http.clearPending();
});

请求拦截

  • 对还在 进行中 的指定请求进行拦截,并 取消 请求
// 使用 拦截标识符 拦截请求
const { abortSignUuidCode } = http.post("/getList", { size: 10, current: 1 })
http.abortPending(abortSignUuidCode)

// 无法获取拦截标识符时的解决方案
http.abortPending(["post", "/getList", { size: 10, current: 1 }]);

内置功能 - 进度生命周期

sluggard-http 支持在单个请求开始/全部请求结束时抛出钩子函数 常与 NProgress 等进度条插件配合使用

import NProgress from "nprogress";
import { Http } from 'sluggard-http'

export const http = Http.create(
  {
    baseURL: '...',
    timeout: 1000,
    headers: {'Authorization': '...'}
  },
  {
    methodAlias: { ... },
    life: {
      begin: () => { // 有请求开始时触发
        NProgress.start()
      },
      end: () => { // 全部请求结束时触发
        NProgress.done()
      },
    },
  }
)

API文档

点击查看API文档