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

@x-drive/request

v1.0.25

Published

支持自动域名替换、接口别名的简易请求模块

Downloads

26

Readme

Http 请求模块

简易的支持自动域名替换、接口别名的请求模块

模块设置

  • 如果希望使用别名、自动域名替换、修改请求成功状态码、失败自动提示功能,需要在业务模块调用前使用模块 config 方法对模块进行设置。

    config(config: ConfigOption): void;

    config 对象支持配置参数:

    • successCode 请求成功时的状态码
    • hosts 域名配置
    • apis api 别名
    • notifyMod 提示浮层
    import { config } from "@x-drive/request";
    config({
        // 将请求成功状态码修改为 233
        "successCode": "233"
        // 指定了 product 业务的地址
        , "hosts": {
            "product": "http://api.test.dev"
        }
        // 设置了 /home 业务的别名
        , "apis": {
            "/home": "/api/hahaha/home"
        }
    });
  • 模块目前支持请求前及请求后钩子,该功能只支持实例级别的设置

    import Request from "@x-drive/request";
    // 全局请求实例设置
    Request.setting({
        "hooks": {
            onRequest(conf) {
                console.log(conf);
            }
            , onResponse(raw) {
                console.log(raw);
                return raw;
            }
        }
    });

使用方式

引用方式

  • requireimport 方式引用
    import Request from "@x-drive/request";
  • 页面直接用 script 标签引用
    <script src="https://your_static_files/index.umd.js"></script>
    注意这种方式如果直接在浏览器中使用时,模块名称会被重命名为 xRequest

请求方法

  • get 发起一个 get 请求

    get(url: string, param?: ReqParams, config?: ReqConf)
    • url 请求url或别名
    • param 请求参数
    • config 请求配置
  • post 发起一个 post 请求

    post(url: string, param?: ReqParams, data?: ReqData, config?: ReqConf)
    • url 请求url或别名
    • param 请求参数
    • data 请求数据
    • config 请求配置
  • run 执行任意类型请求

    run<T>(type: string, url: string, params: ReqParams = {}, data: ReqData = {}, config: ReqConf = {}): Promise<T>
    • type 请求类型
    • url 请求url或别名
    • param 请求参数
    • data 请求数据
    • config 请求配置
  • resolveUri 解析生成正确的数据请求地址

    resolveUri(uri: string, params: object)
    • uri 接口别名或具体的请求地址
    • params 请求参数对象
  • cancel 放弃当前正在发起的所有请求

    cancel()
  • randomStr 生成一个 16 进制的随机数

    randomStr(): string

额外的实例

模块默认在全局会生成一个通用的请求实例,方便对所有的请求进行管理。同时也以 R 导出了模块,支持使用者单独实例化另外的请求实例用于其他用途。

Hooks

目前只支持实例 Hooks,也即是说只支持通过 setting 函数设置的钩子

  • onRequest 请求前钩子
    /**请求前钩子 */
    onRequest?: (config?: ReqConf, params?: ReqParams, data?: ReqData, url?:string) => void | boolean;
  • onResponse 请求后钩子
    /**请求后钩子 */
    onResponse?: (raw?: string, config?: ReqConf, params?: ReqParams, data?: ReqData, req?: XMLHttpRequest) => any;
  • onResponseError 请求失败钩子
    /**请求失败钩子 */
    onResponseError?: (re?: any, type?: ReqErrorTypes, config?: ReqConf, req?: XMLHttpRequest) => void | boolean;