AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

在 SAP UI5 应用中使用浏览器原生的 Fetch API 发起网络请求试读版

2023-09-29 52
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
可视分析地图（DataV-Atlas），3 个项目，100M 存储空间
数据可视化DataV，5个大屏 1个月
简介： 在 SAP UI5 应用中使用浏览器原生的 Fetch API 发起网络请求试读版

一套适合SAP UI5 初学者循序渐进的学习教程

 

作者简介

 

Jerry Wang，2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师，SAP 中国技术大使。在长达 15 年的 SAP 标准产品开发生涯里，Jerry 曾经先后参与 SAP Business ByDesign, SAP CRM, SAP Cloud for Customer, SAP S/4HANA, SAP Commerce Cloud(电商云)等标准产品的研发工作。

 

Jerry 工作中使用ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包括 SAP UI5 在内的多款SAP 自研框架有深入的研究。

 

教程目录

 

 

说明

Jerry 从 2014 年加入 SAP成都研究院 CRM Fiori 开发团队之后开始接触 SAP UI5，曾经在 SAP 社区和“汪子熙”微信公众号上发表过多篇关于 SAP UI5 工作原理和源码解析的文章。


在 Jerry 这篇文章 对 SAP UI5 一无所知的新手，从哪些材料开始学习比较好？ 曾经提到，Jerry 也是从 SAP UI5 菜鸟一路走过来，深知只有 ABAP 开发背景的开发者，向 SAP UI5 开发领域转型的不易，因此我在业余时间设计了这份适合 SAP UI5 不同水平的学习者的学习教程，把开发一个完整的 SAP UI5 应用的流程，拆分成若干个步骤，力求每个步骤里，把涉及到的知识点都涵盖到。


这些知识点可能不像我的 UI5 源码分析系列文章那么深入，但力求做到深入浅出，重要的知识点都配上详细的截图来辅助文字的介绍，便于教程学习者的理解。


本教程每一个步骤的源代码，都存放在我的 Github 上，分别用文件夹 01，02，03 等等来标识，例如步骤 1 的源代码在这里。


每一个步骤均是前一步骤的基础上，添加了若干新特性。建议零基础或者对 SAP UI5 知之甚少的 SAP UI5 初学者，按照顺序从第一个步骤开始循序渐进地学习，把这些代码下载到本地，配合教程的文字讲解，自己动手，以加深理解。


对于已经有一定基础的 SAP UI5 开发人员，可以通过本文的目录，跳过前面一部分比较基础的章节，直接挑选对自己工作项目有关，或者包含某些知识点自己尚未掌握的章节来有针对性地学习。


大家如果对教程的每个步骤有任何疑问，欢迎在教程对应的步骤文章里给我评论，进行留言。我虽然平时开发工作很忙，但是保证会定期查看大家给我留下的评论，对于里面涉及到的技术疑问，我一定会抽时间做出解答。

本教程到目前为止，我们还没有学习过在 SAP UI5 应用的控制器 JavaScript 代码里，手动向远端网络资源发起请求。虽然步骤 SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API 提到了在 SAP UI5 里使用 jQuery，但是步骤 45，并没有使用 jQuery 的 AJAX API，向远端网络服务发起请求，而仅仅学习了 jQuery 的 DOM API 去操作 DOM 的方法。


本步骤来填补这个空白，了解一下如何在 SAP UI5 应用中使用 ES6 的 fetch API.


所谓 ES6，全称是 ECMAScript 6，ES6 是其简称。ES6 是 2015 年 6 月正式发布的JavaScript 语言标准，按照年份来命名，为 ECMAScript 2015，简称 ES2015，因此 ES6 和 ES2015 是同一个东西。其目标是使 JavaScript 这门编程语言可以用来编写复杂的大型应用程序，成为企业级开发语言大家族中的一员。


fetch 是 ES6 提供的一个方便的异步访问网络资源的 API，被大多数现代浏览器所支持。


我们来看一个具体的例子。点击发送请求按钮:




这个 SAP UI5 应用会调用 fetch API，从百度首页 https://www.baidu.com 读取其网页源代码，显示在 TextArea 里，内容如下：



下面是具体的实现步骤。

文章标签：
DataV数据可视化
JavaScript
API
前端开发
测试技术
Web App开发
关键词：
API应用
应用浏览器
fetch API
原生API
API原生
相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程，理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上，理解并学会运用各个服务组件，了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准，准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
游客4llb6htoixmxw
目录
相关文章
郑小健
|
12天前
|
搜索推荐 程序员 调度
精通Python异步编程：利用Asyncio与Aiohttp构建高效网络应用
【10月更文挑战第5天】随着互联网技术的快速发展，用户对于网络应用的响应速度和服务质量提出了越来越高的要求。为了构建能够处理高并发请求、提供快速响应时间的应用程序，开发者们需要掌握高效的编程技术和框架。在Python语言中，`asyncio` 和 `aiohttp` 是两个非常强大的库，它们可以帮助我们编写出既简洁又高效的异步网络应用。
郑小健
61 1
郑小健
|
10天前
|
机器学习/深度学习 数据采集 存储
时间序列预测新突破：深入解析循环神经网络（RNN）在金融数据分析中的应用
【10月更文挑战第7天】时间序列预测是数据科学领域的一个重要课题，特别是在金融行业中。准确的时间序列预测能够帮助投资者做出更明智的决策，比如股票价格预测、汇率变动预测等。近年来，随着深度学习技术的发展，尤其是循环神经网络（Recurrent Neural Networks, RNNs）及其变体如长短期记忆网络（LSTM）和门控循环单元（GRU），在处理时间序列数据方面展现出了巨大的潜力。本文将探讨RNN的基本概念，并通过具体的代码示例展示如何使用这些模型来进行金融数据分析。
郑小健
68 2
肥猪肥猪-17824
|
10天前
|
机器学习/深度学习 人工智能 算法框架/工具
深度学习中的卷积神经网络（CNN）及其在图像识别中的应用
【10月更文挑战第7天】本文将深入探讨卷积神经网络（CNN）的基本原理，以及它如何在图像识别领域中大放异彩。我们将从CNN的核心组件出发，逐步解析其工作原理，并通过一个实际的代码示例，展示如何利用Python和深度学习框架实现一个简单的图像分类模型。文章旨在为初学者提供一个清晰的入门路径，同时为有经验的开发者提供一些深入理解的视角。
肥猪肥猪-17824
50 1
ShaFaChuang-36210
|
17天前
|
安全 网络安全 区块链
网络安全与信息安全：构建数字世界的防线在当今数字化时代，网络安全已成为维护个人隐私、企业机密和国家安全的重要屏障。随着网络攻击手段的不断升级，从社交工程到先进的持续性威胁（APT），我们必须采取更加严密的防护措施。本文将深入探讨网络安全漏洞的形成原因、加密技术的应用以及提高公众安全意识的重要性，旨在为读者提供一个全面的网络安全知识框架。
在这个数字信息日益膨胀的时代，网络安全问题成为了每一个网民不可忽视的重大议题。从个人信息泄露到企业数据被盗，再到国家安全受到威胁，网络安全漏洞如同隐藏在暗处的“黑洞”，时刻准备吞噬掉我们的信息安全。而加密技术作为守护网络安全的重要工具之一，其重要性不言而喻。同时，提高公众的安全意识，也是防范网络风险的关键所在。本文将从网络安全漏洞的定义及成因出发，解析当前主流的加密技术，并强调提升安全意识的必要性，为读者提供一份详尽的网络安全指南。
ShaFaChuang-36210
39 2
有路有乔-六月
|
3天前
|
编解码 自然语言处理 算法
生成对抗网络的应用有哪些
【10月更文挑战第14天】生成对抗网络的应用有哪些
有路有乔-六月
9 2
代码bug生产队
|
3天前
|
机器学习/深度学习 自然语言处理 自动驾驶
神经网络有哪些应用场景呢
【10月更文挑战第14天】神经网络有哪些应用场景呢
代码bug生产队
7 1
萝卜带泥
|
6天前
|
网络协议 物联网 5G
探索未来网络：IPv6的演进与应用
【10月更文挑战第11天】 本文深入探讨了互联网协议第6版（IPv6）的发展历程、技术特点以及在现代网络中的应用。通过分析IPv6相较于IPv4的改进，阐述了其在地址空间扩展、安全性提升和自动化配置等方面的优势。同时，本文也讨论了IPv6在全球推广过程中遇到的挑战及未来的发展前景。
萝卜带泥
13 2
游客5fdji2pvmf8888
|
15天前
|
存储 安全 算法
网络安全与信息安全：构建数字世界的防线在数字化浪潮席卷全球的今天，网络安全与信息安全已成为维系现代社会正常运转的关键支柱。本文旨在深入探讨网络安全漏洞的成因与影响，剖析加密技术的原理与应用，并强调提升公众安全意识的重要性。通过这些综合性的知识分享，我们期望为读者提供一个全面而深刻的网络安全视角，助力个人与企业在数字时代中稳健前行。
本文聚焦网络安全与信息安全领域，详细阐述了网络安全漏洞的潜在威胁、加密技术的强大防护作用以及安全意识培养的紧迫性。通过对真实案例的分析，文章揭示了网络攻击的多样性和复杂性，强调了构建全方位、多层次防御体系的必要性。同时，结合当前技术发展趋势，展望了未来网络安全领域的新挑战与新机遇，呼吁社会各界共同努力，共筑数字世界的安全防线。
游客5fdji2pvmf8888
31 7
ShaFaChuang-36210
|
15天前
|
存储 安全 自动驾驶
探索未来网络：量子互联网的原理与应用
【10月更文挑战第2天】 本文旨在探讨量子互联网的基本原理、技术实现及其在通讯领域的革命性应用前景。量子互联网利用量子力学原理，如量子叠加和量子纠缠，来传输信息，有望大幅提升通信的安全性和速度。通过详细阐述量子密钥分发（QKD）、量子纠缠交换和量子中继等关键技术，本文揭示了量子互联网对未来信息社会的潜在影响。
ShaFaChuang-36210
37 5
一位隐者
|
13天前
|
自动驾驶 物联网 5G
深入解析：5G标准中的网络切片定义及其应用
【10月更文挑战第4天】
一位隐者
47 1

热门文章

最新文章

  • 1
    [Step By Step]SAP HANA中创建层次分析视图(Hierarchy Analytic View)
  • 2
    SAP ABAP字符串拼接保留空格
  • 3
    SAP S/4HANA 的各个版本覆盖哪些业务范围？
  • 4
    在SAP HANA Express Edition里进行文本分析
  • 5
    当SAP云平台account的service Marke place里找不到Machine Learning服务该怎么办
  • 6
    SAP ABAP, Fiori, Android和Hybris里的异步操作
  • 7
    使用SAP HANA的Data Preview功能
  • 8
    SAP WM The Link Between TR and TO Document
  • 9
    SAP Simple Finance
  • 10
    SAP Fiori globalization实现原理分析
  • 1
    SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
    81
  • 2
    关于 SAP UI5 sap.m.Column 的 demandPopin 属性
    71
  • 3
    SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
    62
  • 4
    SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
    60
  • 5
    纯技术讨论：如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
    85
  • 6
    SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
    67
  • 7
    SAP UI5 控件 customData 属性的应用介绍
    93
  • 8
    SAP UI5 sap.ui.require.toUrl 的作用介绍
    80
  • 9
    SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
    62
  • 10
    SAP UI5 SmartTable.prototype._onMetadataInitialised 方法的深入介绍
    61

    • 相关课程

    更多
  • TCP/IP 网络基础
  • 云计算工程师解析与实战-网络专家篇（体验版）
  • 云网络白皮书-阿里云网络系列课
  • 企业上云攻略-阿里云网络产品应用系列教程
  • Linux网络进阶 - TCP/IP协议及OSI七层模型
  • 网络管理者必知-2分钟了解新出台的《网络安全法》

    • 相关电子书

    更多
  • Spring Boot2.0实战Redis分布式缓存
  • CUDA MATH API
  • API PLAYBOOK

    • 相关实验场景

    更多
  • 使用阿里云容器服务和容器网络文件系统搭建WordPress网站
  • 容器的网络入门
  • 容器的自定义网络
  • 容器的共享网络模型
  • 前端开发基础2：VS Code和Edge的联动开发
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片