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

@cainiaofe/cn-request

v1.4.0

Published

菜鸟前端统一请求库

Downloads

276

Readme

CNRequest 介绍

CNRequest 介绍: https://alidocs.dingtalk.com/i/nodes/3KLw95QMzkb8g00lOK5DWAjrymPeEN2q

  • 如何在项目(页面)中接入 CNRequest
  • CNRequest 自定义上报
  • 如何在组件中使用 CNRequest
  • 如何查看 CNRequest 上报的数据

以上问题,请进 CNRequest 介绍文档查看: https://alidocs.dingtalk.com/i/nodes/3KLw95QMzkb8g00lOK5DWAjrymPeEN2q

在页面中发送请求

使用 reqeust 实例发送请求

import request from './request'; //页面中实例化request的文件,此文件前端架构同学会处理好,有问题联系@牛尔

request({
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值

  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  data: {
    firstName: 'Fred'
  },
}).then(function (response) {
  console.log(response);
}).catch(function (error) {
  console.log(error);
});

创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method,请求将默认使用 GET 方法。

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // 默认值

  // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前,修改请求数据
  // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 数组中最后一个函数必须返回一个字符串, 一个Buffer实例,ArrayBuffer,FormData,或 Stream
  // 你可以修改请求头。
  transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理

    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前,允许修改响应数据
  transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理

    return data;
  }],

  // 自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `paramsSerializer`是可选方法,主要用于序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  // 在没有设置 `transformRequest` 时,则必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属: FormData, File, Blob
  // - Node 专属: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送,key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout` 指定请求超时的毫秒数。
  // 如果请求时间超过 `timeout` 的值,则请求会被中断
  timeout: 1000, // 默认值是 `0` (永不超时)

  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

  // `adapter` 允许自定义处理请求,这使测试更加容易。
  // 返回一个 promise 并提供一个有效的响应 (参见 lib/adapters/README.md)。
  adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属:'blob'
  responseType: 'json', // 默认值

  // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
  // 注意:忽略 `responseType` 的值为 'stream',或者是客户端请求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默认值

  // `xsrfCookieName` 是 xsrf token 的值,被用作 cookie 的名称
  xsrfCookieName: 'XSRF-TOKEN', // 默认值

  // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值

  // `onUploadProgress` 允许为上传处理进度事件
  // 浏览器专属
  onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  // 浏览器专属
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
  maxContentLength: 2000,

  // `maxBodyLength`(仅Node)定义允许的http请求内容的最大字节数
  maxBodyLength: 2000,

  // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
  // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),
  // 则promise 将会 resolved,否则是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },

  // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
  // 如果设置为0,则不会进行重定向
  maxRedirects: 5, // 默认值

  // `socketPath` 定义了在node.js中使用的UNIX套接字。
  // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
  // 只能指定 `socketPath` 或 `proxy` 。
  // 若都指定,这使用 `socketPath` 。
  socketPath: null, // default

  // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
  // and https requests, respectively, in node.js. This allows options to be added like
  // `keepAlive` that are not enabled by default.
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // `proxy` 定义了代理服务器的主机名,端口和协议。
  // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
  // 使用 `false` 可以禁用代理功能,同时环境变量也会被忽略。
  // `auth`表示应使用HTTP Basic auth连接到代理,并且提供凭据。
  // 这将设置一个 `Proxy-Authorization` 请求头,它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
  // 如果代理服务器使用 HTTPS,则必须设置 protocol 为`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // see https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),

  // `decompress` indicates whether or not the response body should be decompressed
  // automatically. If set to `true` will also remove the 'content-encoding' header
  // from the responses objects of all decompressed responses
  // - Node only (XHR cannot turn off decompression)
  decompress: true // 默认值

}

以上足以满足你在项目(页面)中发送请求的使用; 更多其他使用方式请查看 Axios 相关文档:https://axios-http.com/zh/docs/api_intro

API 及相关参数说明

1. CNRequest

调用方式:

CNRequest(axiosConfig, cnOptions);

1.1 axiosConfig

用于创建axios实例,和axios.create()入参保持一致;详细说明:https://axios-http.com/zh/docs/instance

1.2 cnOptions

cnOptions 属性说明:

| 属性名 | 类型 | 是否必填 | 默认值 | 说明 | | :------------------ | :------- | :------- | :----- | :-------------------------------------------------------------------------------------------------------------- | | feedbackInfoEnabled | boolean | 否 | false | 是否开启默认的错误文案提示能力,参考文档:https://alidocs.dingtalk.com/i/nodes/qnYMoO1rWxrkmoj2I1AvPLwdJ47Z3je9 | | loginCallback | function | 否 | ()=>{} | 未登录时的回调 | | turnOffLog | boolean | 否 | false | 是否关闭格式校验的 console.error |

1.3 cnReportHandler

CNRequest 自定义上报回调函数

{
  ...
  cnReportHandler: (res) => {
    // 入参res为接口的返回数据
    if (res.xxxx) {
      reportData = {
        errorMsg: 'msg', // string,业务错误异常信息
        errorCode: 'code', // string,业务错异常误码
        extend: { // object,非必要,上报的补充信息
          xxxx1: res.xxxx1,
          xxxx2: res.xxxx2,
        },
        reportResponse: false, // boolean,是否上报整个请求的response
      };
      return reportData;
    }
    return false; // 默认返回false
  },
  ...
}

2. cnRequestInstance

2.1 cnRequestInstance.request

调用方式:

// 参考链接:https://axios-http.com/zh/docs/req_config
cnRequestInstance.request(
  {
    url: '/user',
    method: 'get',
    ...
  }
);

2.2 cnRequestInstance.reInit

重新实例化一个新的 request 对象,调用方式:

cnRequestInstance.reInit({
  axiosConfig: {},
  cnOptions: {},
  reset: false,
});
  • axiosConfig:参考 1.1

  • cnOptions:参考 1.2

  • reset:是否重置配置项,默认为 false;reset 为 true 时不继承【项目工程】中的配置

3. request

调用方式:

import { request } from '@alife/cn-request'

// request === cnRequestInstance.request
// 参考链接:https://axios-http.com/zh/docs/req_config
request(
  {
    url: '/user',
    method: 'get',
    ...
  }
);

4. cnResponseInterceptor

调用方式:

cnResponseInterceptor(response, armsTrace, options);

4.1 response

AxiosResponse,参考文档:https://axios-http.com/zh/docs/res_schema

4.2 options

options 属性说明:

| 属性名 | 类型 | 是否必填 | 默认值 | 说明 | | :--------- | :------ | :------- | :----- | :------------------------------- | | turnOffLog | boolean | 否 | false | 是否关闭格式校验的 console.error |

5. cnRequestInterceptor

调用方式:cnRequestInterceptor(config, options)

5.1 config

AxiosRequestConfig,参考文档:https://axios-http.com/zh/docs/instance

5.2 armsTrace

ARMS 的 trace 实例,参考文档:https://yuque.antfin.com/ali_arms/lav0sg/lh4stz

5.3 options

options 属性说明:

| 属性名 | 类型 | 是否必填 | 默认值 | 说明 | | :--------- | :------ | :------- | :----- | :------------------------------- | | turnOffLog | boolean | 否 | false | 是否关闭格式校验的 console.error |