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

zan-ajax

v3.0.0

Published

Promise based HTTP client for the browser and node

Downloads

40

Readme

ajax

基于Promiseajax实现,支持browser和node环境,jsonp不支持node。

除了axios外,不依赖其他第三方库。

使用时请确保存在全局的Promise实现。

API

ajax(ajaxOptions, config?): Promise

ajaxOptions是请求的参数,config是函数内部的一些可选配置。返回值是一个Promise,请求成功会resolve,请求失败会 reject

请求成功时resolve的结果:

{
  // `data` is the response that was provided by the server
  data: {},

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the headers that the server responded with
  headers: {},

  // `config` is the config that was provided to `axios` for the request
  config: {}
}

请求失败时reject的结果:

ajax({ url: '/user/1' })
    .catch(function (error) {
        if (error.response) {
            // The request was made, but the server responded with a status code
            // that falls out of the range of 2xx
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else {
            // Something happened in setting up the request that triggered an Error
            console.log('Error', error.message);
        }
    });

ajax请求参数

⚠️ 支持部分 axios 参数的透传,但是请注意 axios 提供的能力不作为这个包的能力。如果今后替换底层的 ajax 实现,这些参数很可能就会失效。

  • url: <string> 请求的地址
  • method / type: <string> 请求的类型,默认GET请求
  • data: <any> HTTP请求的参数,GET / HEAD类请求会作为URL参数,POST / PUT等请求会作为body
  • contentType: <string> 发送给服务器的数据类型,POST / PUT等请求默认值为* 'application/x-www-form-urlencoded; charset=UTF-8'
  • dataType: <string> 请求的返回值类型,默认json,可选项arraybuffer, blob, document, json, * text, stream
  • headers: <object> HTTP请求的头,'X-Requested-With': 'XMLHttpRequest'一定会加上。
  • withCredentials: <bool> 默认false, indicates whether or not cross-site Access-Control requests should be made using credentials
  • username: <string> HTTP请求的用户名
  • password: <string> HTTP请求的密码
  • timeout: <number> 请求的超时时间,0表示没有超时
  • noXRequestedWithHeader: <bool> 是否强制加上X-Requested-With这个头,这个头会触发CORS preflight,默认 true,不加这个头;设为 false 的话会强制加上这个头。这个默认值和名字可能感觉很难受,这么做是为了保持向后兼容老代码。
  • onUploadProgress: <function> 上传请求的进度回调函数,参数是 progressEvent
  • onDownloadProgress: <function> 下载请求的进度回调函数,参数是 progressEvent
  • cancelToken: <CancelToken> 用来取消请求的token,具体请看下面的取消请求文档
  • allowBigNumberInJSON: <bool> 如果为 true,将使用一个自定义的 JSON parser,这个 parser 会将某些大整数或者精度过高的小数会表示成字符串。

jsonp请求参数

  • url: <string> 请求的地址
  • data: <object | FormData> 请求参数,会序列化到 URL 后面
  • jsonp: <string> JSONP请求的回调参数名称, callback=__jp01中的callback部分,默认为callback
  • jsonpCallback: <string|function> JSONP 请求的回调函数名,如果是函数则使用函数的返回值,callback=__jp01中的__jp01部分,默认值是每次请求都生成一个不一样的名字
  • prefix: <string> JSONP 请求回调函数名字的前缀,callback=__jp01中的__jp部分,后面的部分会用随机字符串填充
  • timeout: <number> 请求的超时时间,0表示没有超时
  • cache: <bool> 如果设置为false,会强制浏览器不缓存请求,默认为false

config

config.transformRequest(ajaxOptions): ajaxOptions 接受一个ajax请求的参数对象,可以对这个参数做一些处理, 返回值也是一个ajax请求的参数。主要用来在发送请求前对参数做一些转换。

取消请求

使用 ajax 上的 CancelToken 创建 token,有两种使用方式。

不同的请求可以使用同一个token,调用这个 token 的 cancel 方法时会同时取消所有使用这个 token 的请求。

jsonp 请求不支持取消操作。

var CancelToken = ajax.CancelToken;
var source = CancelToken.source();

ajax({
  url: ''/user/12345',
  cancelToken: source.token
}).catch(function(thrown) {
  if (ajax.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
var CancelToken = ajax.CancelToken;
var cancel;

ajax({
  url: '/user/12345',
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

关于URL参数序列化

内部使用的序列化函数等价于jQuery.param(value, false)

Change log

  • 3.0.0 升级 axios 到 0.19.0,修复了一个 axios 的一个严重安全漏洞
  • 2.1.0 支持部分 axios 参数的透传
  • 2.0.0 升级 axios 到 0.18.0
  • 1.2.1 修复 content-type 头被设置多次的问题。
  • 1.2.0 这个版本跨域请求有问题,请不要使用。