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

@qlin/request

v0.2.13

Published

fetch 封装

Downloads

68

Readme

fetch 常用功能封装

内置提供的能力

  • timeout 请求超时
  • baseURL 默认 URL
  • requestInterceptor 请求拦截器
  • responseInterceptor 响应拦截器
  • transformData 响应数据转换(注意需要兼容各种数据类型)
  • 请求取消
  • 重复请求拦截
  • 请求 merge
  • 请求 cacheData

目前触发了超时依旧会忘后端发送请求不会自动进行 abort

配置

const config = {
  // `baseURL` will be prepended to `url` unless `url` is absolute.
  // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
  // to methods of that instance.
  baseURL: '',
  timeout: 10000, // 默认 10s
  method: 'POST', // 默认 post
  mergeRequest: false, // 是否合并请求
  responseType: null, // 可选 'json' | 'text' | 'blob' | 'arrayBuffer' | 'formData',默认根据 content-type 处理
  credentials: 'include', // 默认 include, 'include' | 'same-origin' | 'omit'
  headers: {}, // 传给服务器的 header
  cacheData: false, // 是否缓存
  requestInterceptor: (config: Config) => Config || [],
  responseInterceptor: (response: RequestResponse) => RequestResponse || [],
  transformData: (data) => {
    if (isPlainObject(data))
      return data

    return data
  },
  errorHandler: (err) => {
    console.log(err)
  }
}

用法


const request = createRequest({
    timeout: 10000,
    baseURL: 'http://localhost'
});

错误处理

function errorHandler(error) {
    // request 内部逻辑异常 | transform 抛出的异常 | 超时异常
    if (error.msg) {
        console.log(msg);
    } else if (error.response) {
        // 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
        console.log(error.response.status);
        console.log(error.response.headers);
    } else {
        // 未知异常
        console.error(error)
    }
    console.log(error.config);
}

一些常用场景 demo

请求 merge

假设有一个请求还没回来,就发起同一个请求(一次 or 多次), 后续请求会直接延用前一个请求的结果,不管成功还是失败。

let response1;
request('/url/merge', null, {
    mergeRequest: true
}).then((response) => {
    response1 = response;
    console.log('process response: ' + response);
})
request('/url/merge', null, {
    mergeRequest: true
}).then((response) => {
    // 'is pre response: true
    console.log('is pre response: ', response1 === response);
})

请求 cacheData

配置,若 cacheData 传 true,则默认使用 ram 缓存类型,缓存时间 3min

{
    cacheType: 'ram', // ram: 内存,session: sessionStorage,local:localStorage
    cacheTime: 1000 * 60 * 3, // 缓存时间:默认3min
}

request('/url/cache', null, {
    cacheData: true
}).then((response) => {
    console.log('process response: ' + response);
})

请求 abort

const controller = new AbortController();
request('/url/abort', null, {
    signal: controller.signal
}).then((response) => {
    console.log('process response: ' + response);
})
// cancel the request
controller.abort()

后续计划

  1. 支持配置中间件