umi/max如何给请求增加公共header

这篇具有很好参考价值的文章主要介绍了umi/max如何给请求增加公共header。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

直接上代码
umi/max如何给请求增加公共header,umi,plugin-request,javascript
根据 umi官网 介绍可知,umi/max仅提供一种运行时配置的方法。
如果是搭配typescript开发的话,最好使用@umi/max提供的RequestConfig类型进行字段控制。

因为是在app.ts中添加的配置,但是并不知道该配置是在何时何地如何被使用的,所以去翻阅了一下umijs/plugin-request源码

看到index.ts文件后,得到了启发:

import { IApi } from 'umi-types';
import { join, dirname } from 'path';
import assert from 'assert';
import { readFileSync } from 'fs';

export interface RequestOptions {
  dataField?: string;
}

export default function(api: IApi, options: RequestOptions) {
  api.addRuntimePluginKey('request');

  const { dataField = 'data' } = options || {};
  const source = join(__dirname, '..', 'src', 'request.ts');
  const requestTemplate = readFileSync(source, 'utf-8');
  const namespace = 'plugin-request';
  assert(/^[a-zA-Z]*$/.test(dataField), 'dataField should match /^[a-zA-Z]*$/');

  api.onGenerateFiles(() => {
    try {
      // Write .umi/plugin-request/request.ts
      let formatResultStr;
      if (dataField === '') {
        formatResultStr = 'formatResult: result => result';
      } else {
        formatResultStr = `formatResult: result => result?.${dataField}`;
      }
      api.writeTmpFile(
        `${namespace}/request.ts`,
        requestTemplate
          .replace(/\/\*FRS\*\/(.+)\/\*FRE\*\//, formatResultStr)
          .replace(/\['data'\]/g, dataField ? `['${dataField}']` : '')
          .replace(/data: T;/, dataField ? `${dataField}: T;` : '')
          .replace(
            /umi-request/g,
            api.winPath(dirname(require.resolve('umi-request/package'))),
          )
          .replace(
            /@ahooksjs\/use-request/g,
            api.winPath(dirname(require.resolve('@ahooksjs/use-request/package'))),
          ),
      );
    } catch (e) {
      api.log.error(e);
    }
  });

	// 这里,他去添加了Umi导出的配置
	// 看代码,猜测路径为: .umi/plugin-request/request.ts
	
  /**
   * umi 允许插件添加需要 umi 额外导出的内容。
   * 流程是这样的,umi 脚本执行的时候,触发 onGenerateFiles hook 生成临时文件。
   * umi 预设的插件集中有个叫做 umiExports 的插件,
   * 该插件会触发 addUmiExports hook,执行所有插件的该方法,
   * 获得插件中指定的额外导出内容,将这些内容放到临时文件中。
   */
  api.addUmiExports([
    {
      exportAll: true,
      source: api.winPath(join(api.paths.absTmpDirPath, namespace, 'request')),
    },
  ]);
}

找到了找到了,在./src/.umi/plugin-request/request.ts中找到了答案:

// .umi/plugin-request/request.ts
let config: RequestConfig;
const getConfig = (): RequestConfig => {
  if (config) return config;
  config = getPluginManager().applyPlugins({
    key: 'request',
    type: ApplyPluginsType.modify,
    initialValue: {},
  });
  return config;
};

// .umi/core/plugin.ts
import * as Plugin_0 from 'C:/workspace/psq_system/src/app.ts';
export function getPlugins() {
  return [
    {
      // Plugin_0就是{antd:{}, layout:{}, request: {}}
      apply: __defaultExport(Plugin_0),
      // 这里这里!
      path: process.env.NODE_ENV === 'production' ? void 0 : 'xxx/src/app.ts',
    },
    // ....
  ];
}

// 这里就是上面用到的keys,也就是app.ts中可以设置的内容
export function getValidKeys() {
  return ['patchRoutes','patchClientRoutes','modifyContextOpts','modifyClientRenderOpts','rootContainer','innerProvider','i18nProvider','accessProvider','dataflowProvider','outerProvider','render','onRouteChange','antd','getInitialState','layout','qiankun','request',];
}

let pluginManager = null;

export function createPluginManager() {
  pluginManager = PluginManager.create({
    plugins: getPlugins(),
    validKeys: getValidKeys(),
  });
  
  return pluginManager;
}

export function getPluginManager() {
  return pluginManager;
}

通过上面的代码,我们可以了解.umi/plugin-request/request.ts中的config是如何生成的。

  1. .umi/plugin-request/request.ts 就是umi运行时读取的配置项
  2. umi在注册plugins的时候第一个就是读取app.ts的配置,赋值给Plugin_0
  3. Plugin_0就是{ antd: {}, layout: {}, request: { }, .... }
  4. { apply: Plugin_0, path: "./src/app.ts" } 作为参数plugins的其中一个,用来创建umi的PluginManager
  5. 创建时会遍历plugins,以第一个举例,拿到他的apply,也就是Plugin_0,遍历对象,拿到key,放入pluginManager的hooks中。
  6. getPluginManager().applyPlugins({})就是对某个hooks的扩展
  7. 而.umi/plugin-request/request.ts中的config就是pluginManager.hooks.request

最后再来看一下.umi/plugin-request/request.ts中对axios的实例化,看一下config的使用

const request: IRequest = (url: string, opts: any = { method: 'GET' }) => {
  // 这里需要注意!
  const requestInstance = getRequestInstance();
  // 这里的config就是获取到的pluginManage中的hooks.request
  const config = getConfig();
  requestInstance = axios.create(config);
  // 这里就是对app.ts中request的使用
  config?.requestInterceptors?.forEach((interceptor) => {
    if(interceptor instanceof Array){
      requestInstance.interceptors.request.use((config) => {
        const { url } = config;
        if(interceptor[0].length === 2){
          const { url: newUrl, options } = interceptor[0](url, config);
          return { ...options, url: newUrl };
        }
        return interceptor[0](config);
      }, interceptor[1]);
    } else {
      requestInstance.interceptors.request.use((config) => {
        const { url } = config;
        if(interceptor.length === 2){
          const { url: newUrl, options } = interceptor(url, config);
          return { ...options, url: newUrl };
        }
        return interceptor(config);
      })
    }
  });
  // ....其他的暂时不重要
}

至此,我终于理顺了app.ts中配置项request是如何使用的了!
大功告成,理了将近5个小时,还是自己太菜了,应该直接去看plugin-request包的,结果先去看了umi中对app.ts的使用,期间又发现对@babel的parse,traverse,types包一脸懵逼,又去稍微了解了一下,花了三个小时,,
最后看plugin-request也才看了一个多小时。以后要对@babel的包也要了解一下了,前端的知识真是太多了。。文章来源地址https://www.toymoban.com/news/detail-697648.html

到了这里,关于umi/max如何给请求增加公共header的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • selenium请求chrome如何添加header头

    前言 selenium的webdriver本身没有api能做这个事情,详见issue。 国内的博客全抄来抄去,说selenium直接加add_argument参数就好了,弄得找了好几天找代码问题,上外网查秒解决。所以要学好计算机还是得英文呐~~ 解决 安装seleniumwire库 上代码完事 参考:https://stackoverflow.com/questions/1

    2024年02月11日
    浏览(41)
  • 如何给img标签里的请求添加自定义header

              是这样的需求,有一个web页面,里面图片的上传和预览来自于一个独立的文件服务器,对http的请求需要进行访问权限的设置,就是在请求的header里加一个Authorization的字段。上传好说我用的Axios直接添加一个header就行了,但是预览就比较麻烦了,因为 img 这个标签

    2024年02月04日
    浏览(39)
  • postman 添加公共/全局的header

    在collection下选择pre-request script选项卡,获取局部的token变量,添加到header中,可以推广到其他对请求前的所有操作, https://learning.postman.com/docs/writing-scripts/script-references/postman-sandbox-api-reference/#scripting-with-request-data

    2024年02月11日
    浏览(33)
  • 关于uniapp request全局增加header的问题

    因为小程序需要在接口增加token及openid判断登录状态,而之前做的接口又太多,需要统一添加,思路是统一拦截请求,然后给每个请求的header加上token再请求,可以使用uni.addInterceptor进行request拦截 官方参数说明: 参数名 类型 必填 默认值 说明 平台差异说明 invoke Function 否 拦

    2024年02月16日
    浏览(44)
  • Spring Boot中的max-http-header-size配置

    默认情况下,Spring Boot Web 应用程序包括一个预配置的嵌入式 Web 服务器。但是,在某些情况下,我们希望修改默认配置以满足自定义要求。 在本教程中,讲解如何在 Spring Boot 2.x 应用程序的application.properties文件中对请求标头进行设置和使用max-http-header-size属性。 Spring Boot 支持

    2023年04月09日
    浏览(47)
  • 如何解决HTTP请求解析错误:o.apache.coyote.http11.Http11Processor : Error parsing HTTP request header

    博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接 : 🔗 精选专栏 : 《面试题大全》 — 面试准备的宝典! 《IDEA开发秘籍》 — 提升你的IDEA技能! 《100天精通Golang》 — Go语言学习之旅! 领域矩阵 : 🌐 猫头虎技术领域矩阵 : 深入探索

    2024年02月21日
    浏览(46)
  • 浏览器请求加Headers

    Chrome 应用商店安装 Modify Header Value 选项里添加 URL、Header Name、Header Value 添加 URL: http://127.0.0.1/ Header Name: Token Header Value: 123 访问 http://127.0.0.1:5000/ HTTP Headers - HTTP | MDN

    2024年02月07日
    浏览(53)
  • http请求头部(header)详解

    通常HTTP消息包括客户机向服务器的请求消息和服务器向客户机的响应消息。这两种类型的消息由一个起始行,一个或者多个头域,一个只是头域结束的空行和可 选的消息体组成。HTTP的头域包括通用头,请求头,响应头和实体头四个部分。每个头域由一个域名,冒号(:)和域

    2024年02月12日
    浏览(39)
  • Python设置请求头(Headers)

    在进行网络请求时,设置请求头(Headers)是非常常见和重要的操作。请求头包含了一些关键信息,如用户代理(User-Agent)、授权凭证(Authorization)、内容类型(Content-Type)等,它们可以帮助我们进行身份验证、指定请求的类型以及向服务器传递必要的信息。在Python中,我们

    2024年02月03日
    浏览(44)
  • ajax请求携带自定义请求头header(跨域和同域)

    1. ajax跨域请求(无cookie、无header)案例(java) (1)启动一个java web项目,配置两个域名(host),czt.ming.com、czt.casicloud.com, java后端代码如下 : 注意:Access-Control-Allow-Origin (2)前端页面代码如下: (3)测试ajax跨域请求: 通过http://czt.casicloud.com/xxx/xxx访问页面,js触发aja

    2023年04月26日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包