nsc-request

基于 umi-request 的请求库; 统一处理防篡改; 统一处理请求错误逻辑

安装

// 安装
npm install nsc-request --save;
//或者
yarn add nsc-request;

// 导入
import request from "nsc-request";

示例

import request from "nsc-request";

// GET请求不带参数
export const fetchCaptchaType = () => {
  return request(`/api/serviceName/busiName/test`);
};

// GET请求带参数
export const fetchCaptchaType = (params) => {
  return request(`/api/serviceName/busiName/test`, { params });
};

// post请求
export const fetchCaptchaType = (data) => {
  return request.post(`/api/serviceName/busiName/test`, { data });
};

// post请求自定义请求头和需要加密的参数
export const fetchCaptchaType = (data) => {
  return request.post(`/api/serviceName/busiName/test`, {
    data,
    headers: { Authorization: "xxxx" },
    // 将需要加密的字段以数组形式配置, 如果所有参数都需要加密传"all", 如果不需要加密则不需要配置encryptFields
    // 嵌套对象加密使用.分隔符路径
    encryptFields: ["username", "password", "person.user.pwd"],
    showErrMsg: false, // 关闭请求库自带的错误提示信息
  });
};

Script 引入

执行 npm run build:browser 后会生成 dist/nsc-request.min.js，可以直接通过 <script> 标签使用，默认挂载到全局变量 NscRequest。

<script src="https://unpkg.com/nsc-request/dist/nsc-request.min.js"></script>
<script>
  const request = NscRequest;

  request("/api/serviceName/busiName/test").then(function (res) {
    console.log(res);
  });

  request.post("/api/serviceName/busiName/test", {
    data: { username: "test" },
  });
</script>

也可以使用 jsDelivr：

<script src="https://cdn.jsdelivr.net/npm/nsc-request/dist/nsc-request.min.js"></script>

如果需要固定版本，建议在 CDN 地址里显式带上版本号：

<script src="https://unpkg.com/[email protected]/dist/nsc-request.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/nsc-request.min.js"></script>

如果需要统一配置前缀和网关信息，建议先基于 extend 生成一个实例：

<script src="https://unpkg.com/nsc-request/dist/nsc-request.min.js"></script>
<script>
  const request = NscRequest.extend({
    prefix: "/nscapi",
    gatewayPrefix: "/nscapi",
    autoPrefix: true,
    H5Option: {
      isH5: true,
      token: "",
      serverTime: "",
    },
  });

  request.get("/user/info").then(function (res) {
    console.log(res);
  });
</script>

如果页面里同时引入 @bj-nsc/functions 的浏览器包，可以配合 NscUtils 一起使用：

<script src="https://unpkg.com/@bj-nsc/functions/dist/nsc-functions.min.js"></script>
<script src="https://unpkg.com/nsc-request/dist/nsc-request.min.js"></script>
<script>
  const utils = NscUtils;
  const request = NscRequest;

  console.log(utils.guid());

  request.get("/api/serviceName/busiName/test").then(function (res) {
    console.log(res);
  });
</script>

浏览器构建配置说明

浏览器包通过下面这条命令生成：

npm run build:browser

这条命令会先清理 dist 目录，再读取根目录的 rollup.browser.config.mjs 进行构建。

• 构建配置文件：rollup.browser.config.mjs
• 浏览器输出文件：dist/nsc-request.min.js
• sourcemap 文件：dist/nsc-request.min.js.map
• 浏览器全局变量：NscRequest

当前这份浏览器构建配置主要负责三件事：

• 把 lib/index.js 打成浏览器可直接通过 <script> 使用的 UMD 包
• 内联 @bj-nsc/functions 的浏览器依赖入口，避免运行时再额外解析模块
• 把 toastify 的 CSS 直接注入到页面，保证浏览器直出包可以独立使用

如果需要自定义全局错误处理逻辑请使用extendOptions函数，request.extendOptions(config对象) 所有 API 与umi-request一致，具体用法请参考官方文档