amis源码 Api接口调用解析:

Amis中传入用户自定义fetcher(基于fetcher做接口调用):

1.embed渲染时可以传入用户定义的fetcher(接口调用):

import axios from "@/libs/api.request";  //自定义的fetcher调用接口(axios调用) { fetcher: ()=>{  ……; return (axios)[method](url, data, config) } }let tracker = (eventTrack, props) => {if (eventTrack.eventType == 'formItemChange') {self.$nextTick(() => {self.nodeUpdate = false;self.submitNode();});}}amisEnv.tracker = tracker;amisEnv.session = "global"self.amisScoped = amis.embed(self.$refs['mpageconfig'], amisJSON, {data: {mdata: this.gisTreeNames}}, amisEnv); // fetcher  接口

2.后续还可以用updateEnv更新用户自定义的fetcher:

updateEnv(options: Partial<RenderOptions>, session = 'global') {  

源码解析:

1.wrapFetcher的使用(封装用户传入的fetcher调用)

amis-core/index.ts:

 if (!store) { //options = {...defaultOptions,...options,fetcher: options.fetcher? wrapFetcher(options.fetcher, options.tracker)    // options.fetcher用户自行实现的接口调用逻辑。: defaultOptions.fetcher,confirm: promisify(options.confirm || defaultOptions.confirm || window.confirm),locale,translate} as any;
}

2.wrapFetcher 方法源码(封装fetcher)

主要进行了如下操作:
(1).调用buildApi() 进行api.data 映射解析adaptor  requestAdator函数封装

(2).调用api.requestAdaptor() 请求适配器函数

(3).调用wrapAdaptor 执行adaptor并进行api.responseData映射解析

Amis-core/uitls/api.ts:

export function wrapFetcher(fn: (config: fetcherConfig) => Promise<fetcherResult>,tracker?: (eventTrack: EventTrack, data: any) => void
): (api: Api, data: object, options?: object) => Promise<Payload | void> { // 返回一个api处理调用函数return function (api, data, options) {    
let api = buildApi(api, data, options) // api:接口参数  data数据域 。 封装requestAdaptor, adaptor函数(new Function)  对dataType, cache(缓存到组件内apiCaches数组里)等进行处理
api = api.requestAdaptor(api) || api; //调用api.requestAdaptor请求适配器函数//…省略return wrapAdaptor(fn(api), api); // 调用api.adaptor响应适配器处理.   处理后会将ret交给amis内置的responseAdaptor函数进行数据解析(JSON.parse)和api.responseData映射。}}

3.buildApi源码(api.data 映射解析adaptor  requestAdator函数封装):

Amis-core/uitls/api.ts:
 

export function buildApi(  api: Api,  data?: object,  options: {  autoAppend?: boolean;  ignoreData?: boolean;    [propName: string]: any; } = {} ): ApiObject {  //api:接口参数  data:数据域..省略//主要封装adaptor  requestAdator函数(new Function)、 解析headers method参数if (!data) {return api;}else if(  data instanceof FormData || data instanceof Blob ||  data instanceof ArrayBuffer ) {api.data = data;  //数据域数据是表单类型或文件类型 则将数据域直接赋值给api.data(ps:即数据域默认作为url参数全部传递)return api;}… //各种处理if (api.data) {api.body = api.data = dataMapping(  api.data,  data,  undefined,  api.convertKeyToPath ); //dataMapping(to,from),会判断from若是object类型(isPlainObject)则from也set到ret中,否则只将to set到ret中(from只作为表达式解析resolveMapping的数据域使用)} else if (api.method === 'post' ||api.method === 'put' ||api.method === 'patch') {api.body = api.data = cloneObject(data);}
}

3.wrapAdaptor源码(执行adaptor并api.responseData映射解析):

Amis-core/uitls/api.ts:

export function wrapAdaptor(promise: Promise<fetcherResult>, api: ApiObject) {const adaptor = api.adaptor;return adaptor? promise.then(async response => {debug('api', 'before adaptor data', (response as any).data);let result = adaptor((response as any).data, response, api);if (result?.then) {result = await result;}debug('api', 'after adaptor data', result);return {...response,data: result};}).then(ret => responseAdaptor(ret, api)): promise.then(ret => responseAdaptor(ret, api));
}export function responseAdaptor(ret: fetcherResult, api: ApiObject) {...//进行数据解析(JSON.parse escapeHtml)等const payload: Payload = {ok: hasStatusField === false || data.status == 0,status: hasStatusField === false ? 0 : data.status,msg: data.msg || data.message,defaultMsg: data.defaultMsg,msgTimeout: data.msgTimeout,data: !data.data && !hasStatusField ? data : data.data // 兼容直接返回数据的情况};if (payload.ok && api.responseData) {debug('api', 'before dataMapping', payload.data);const responseData = dataMapping(  //responseData 映射处理。  dataMapping(to,from),会判断from若是object类型(isPlainObject)则from也set到ret中,否则只将to set到ret中api.responseData,createObject({ api },(Array.isArray(payload.data)? {items: payload.data}: payload.data) || {}),undefined,api.convertKeyToPath);payload.data = responseData;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/20258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

发现一个ai工具网站

网址 https://17yongai.com/ 大概看了下&#xff0c;这个网站收集的数据还挺有用的&#xff0c;有很多实用的ai教程。 懂ai工具的可以在这上面找找灵感。

善听提醒遵循易经原则。世界大同只此一路。

如果说前路是一个大深坑&#xff0c;那必然是你之前做的事情做的不太好&#xff0c;当坏的时候&#xff0c;坏的结果来的时候&#xff0c;是因为你之前的行为&#xff0c;你也就不会再纠结了&#xff0c;会如何走出这个困境&#xff0c;是好的来了&#xff0c;不骄不躁&#xf…

事先预判事的结果事先预防从容应对防微杜渐

很多人呢&#xff0c;学习倪老师的知识&#xff0c;也都是从他的中医方面&#xff0c;认识了他很多的东西呢&#xff0c;对于倪老师的知识性的总结的东西呢&#xff0c;不是很了解。 其实啊&#xff0c;倪老师也是一个&#xff0c;对于这种文化的传承&#xff0c;有着很大很深刻…

一些汇编语言的总结

一、汇编语言的介绍 1、汇编语言和处理器指令集高度相关&#xff0c;不同指令集的汇编语言不兼容。 2、汇编语言是对机器语言的一种抽象&#xff0c;用英文字符来代表运算和控制指令&#xff0c;用英文字母和数字代表操作数。 二、常用的汇编语言 有 x86的汇编语言&#xff…

YOLOv10涨点改进:卷积魔改 | 分布移位卷积(DSConv),提高卷积层的内存效率和速度

💡💡💡本文改进内容: YOLOv10如何魔改卷积进一步提升检测精度?提出了一种卷积的变体,称为DSConv(分布偏移卷积),其可以容易地替换进标准神经网络体系结构并且实现较低的存储器使用和较高的计算速度。 DSConv将传统的卷积内核分解为两个组件:可变量化内核(VQK)和…

iOS编程入门:揭秘神秘的开发世界

iOS编程入门&#xff1a;揭秘神秘的开发世界 在数字化时代的浪潮中&#xff0c;iOS编程成为了许多开发者热衷探索的领域。想要入门iOS编程&#xff0c;不仅需要掌握基础知识&#xff0c;还需理解其独特的生态系统。本文将通过四个方面、五个方面、六个方面和七个方面&#xff…

golang中通过反射获取结构体Tag标签定义的内容 函数和测试用例

当我们在go语言中定义结构体的时候&#xff0c; 经常需要给某些字段打上一个Tag标签, 如 Name string json:"name" , 那这个标签有和作用呢&#xff1f; 这个作用可大了&#xff0c;最为常用的是json序列化和反序列化&#xff0c; 还有各种ORM 的实体对象定义&…

C# yolov8 TensorRT +ByteTrack Demo

C# yolov8 TensorRT ByteTrack Demo 目录 效果 说明 项目 代码 Form2.cs YoloV8.cs ByteTracker.cs 下载 参考 效果 说明 环境 NVIDIA GeForce RTX 4060 Laptop GPU cuda12.1cudnn 8.8.1TensorRT-8.6.1.6 版本和我不一致的需要重新编译TensorRtExtern.dll&…

微调医疗大模型,与通用大模型效果对比

下面是一份CT描述&#xff1a; “肝脏大小、形态未见明确异常。肝S2见一结节状低密度影&#xff0c;大小约13x11mm&#xff0c;增强扫描呈明显渐进性强化&#xff0c;延迟期呈等密度。余肝实质内未见异常密度影或强化灶。肝内大血管及其分支走行未见异常&#xff0c;肝门区层次…

ip地址告诉别人安全吗?ip地址告诉别人会有什么风险

IP地址告诉别人安全吗&#xff1f;在数字化时代&#xff0c;IP地址作为网络连接的关键标识符&#xff0c;承载着重要的安全意义。然而&#xff0c;很多人可能并不清楚&#xff0c;轻易地将自己的IP地址告诉他人可能带来一系列安全风险。那么&#xff0c;IP地址告诉别人会有什么…

文件夹损坏0字节:全面解析、恢复技巧与预防策略

在数字时代&#xff0c;数据的完整性和安全性至关重要。然而&#xff0c;我们时常会遭遇文件夹损坏并显示为0字节的棘手问题。这种情况一旦发生&#xff0c;用户可能会面临数据丢失的风险。本文将详细探讨文件夹损坏0字节的现象&#xff0c;分析其背后的原因&#xff0c;并提供…

Redis-重定向

实验环境&#xff08;3主3从的Redis-Cluster&#xff09; 一、Redis重定向基础篇 1、MOVED重定向 Redis Custer 中&#xff0c;客户端可以向集群中任意节点发送请求。此时当前节点先对 Key 进行 CRC 16 计算&#xff0c;然后按 16384 取模确定 Slot 槽。确定该 Slot 槽所对应的…

为什么使用短链系统?

短链接&#xff08;Short Link&#xff09;是指将一个原始的长 URL&#xff08;Uniform Resource Locator&#xff09;通过特定的算法或服务转化为一个更短、易于记忆的 URL。短链接通常只包含几个字符&#xff0c;而原始的长 URL 可能会非常长。 短链接的原理非常简单&#x…

FPGA编程与PLC编程的区别:深入解析与对比

FPGA编程与PLC编程的区别&#xff1a;深入解析与对比 在工业自动化和控制系统领域&#xff0c;FPGA&#xff08;现场可编程门阵列&#xff09;编程和PLC&#xff08;可编程逻辑控制器&#xff09;编程都是关键的编程技术&#xff0c;但它们在应用、功能、结构和编程方法上存在…

IEEE编程语言排行榜:深度解析编程语言的四大维度、五大趋势、六大热门与七大挑战

IEEE编程语言排行榜&#xff1a;深度解析编程语言的四大维度、五大趋势、六大热门与七大挑战 在信息技术领域&#xff0c;编程语言排行榜一直是衡量各种编程语言流行度和影响力的重要指标。IEEE&#xff08;电气电子工程师协会&#xff09;作为全球最具影响力的科技专业组织之…

【Java数据结构】详解LinkedList与链表(二)

目录 1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; 2.反转一个单链表 3. 找到链表的中间节点 4.输入一个链表&#xff0c;输出该链表中倒数第k个结点。 5.合并两个有序链表 6.链表分割 7. 判定链表的回文结构 8.输入两个链表&#xff0c;找…

栈与队列练习题(2024/5/31)

1有效的括号 给定一个只包括 (&#xff0c;)&#xff0c;{&#xff0c;}&#xff0c;[&#xff0c;] 的字符串 s &#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应的…

云服务和云备份的区别是什么?

随着云计算的兴起&#xff0c;云备份与云服务被越来越多的企业和个人所关注&#xff0c;在云计算中云服务与云备份之间还是有一定的区别的&#xff0c;本文就来介绍一下云服务和云备份之间的区别。 云服务和云备份主要的区别在备份对象、推荐场景和数据一致性等方面。 备份对象…

打印机的ip不同且连不上

打印机的ip不同且连不上 1.问题分析2.修改网段3.验证网络 1.问题分析 主要是打印机的网段和电脑不在同一个网段 2.修改网段 3.验证网络

Web前端三大主流框:React、Vue 和 Angular

在当今快速发展的 Web 开发领域&#xff0c;选择合适的前端框架对于项目的成功至关重要。React、Vue 和 Angular 作为三大主流前端框架&#xff0c;凭借其强大的功能和灵活的特性&#xff0c;赢得了众多开发者的青睐。本文将对这三大框架进行解析&#xff0c;帮助开发者了解它们…