SAP Fiori开发中的JavaScript基础知识14 - promise, async, await异步编程

本文主要是介绍SAP Fiori开发中的JavaScript基础知识14 - promise, async, await异步编程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 前言

本文将介绍JavaScript中异步编程技术,包括promise, sync, await的使用。

2. Promise

2.1 简介

Promise 是 JavaScript 中用于处理异步操作的一种对象。它代表了一个异步操作的最终完成(或失败)及其结果值。

Promise 对象有三种状态:

  • Pending(进行中)
  • Fulfilled(已成功)
  • Rejected(已失败)

Promise 的状态一旦改变,就不会再变,无论是从 Pending 变为 Fulfilled,还是从 Pending 变为 Rejected。

2.2 基本用法

Promise 的基本用法如下:

let oMyPromise = new Promise(function(resolve, reject) {// 异步操作代码//   xxx// 异步操作在某些条件下成功,某些条件下出错if (1 === 1) {resolve(value); // value 是异步操作返回的结果} else {reject(error); // error 是异步操作出错时的错误对象}});oMyPromise.then(function(value) {// 异步操作成功时执行的代码}, function(error) {// 异步操作失败时执行的代码});

Promise实例的构建:

  • Promise的构造函数接受一个函数作为参数, 调用构造函数得到实例oMyPromise的同时,作为参数的函数会立即执行。
  • 参数函数接受两个回调函数参数resolve和reject,在参数函数被执行的过程中,如果在其内部调用resolve,会将oMyPromise的状态变成fulfilled,或者调用reject,会将oMyPromise的状态变成rejected。

调用.then:

  • 调用.then可以为实例oMyPromise注册两种状态回调函数
  • 当实例oMyPromise的状态为fulfilled,会触发第一个函数执行
  • 当实例oMyPromise的状态为rejected,则触发第二个函数执行

2.3 代码示例

下面是一个具体的 Promise 代码示例:

let oMyPromise = new Promise(function (resolve, reject) {// 模拟异步操作setTimeout(function () {if (Math.random() < 0.5) { // 50% 的概率异步操作成功resolve('Success!');} else {reject(new Error('Failure!'));}}, 1000);
});oMyPromise.then(function (value) {console.log(value); // 输出 "Success!"
}, function (error) {console.error(error); // 输出 Error: Failure!
});

在这个示例中,我们创建了一个新的 oMyPromise 对象,然后在 oMyPromise 的执行函数中模拟了一个异步操作。如果异步操作成功(即 Math.random() < 0.5),我们调用 resolve 函数并传入结果 ‘Success!’;如果异步操作失败,我们调用 reject 函数并传入一个新的 Error 对象。然后,我们使用 then 方法来指定异步操作成功和失败时要执行的回调函数。

2.4 链式Promise

Promise支持链式调用,若then()中的函数未返回promise参数,其会自动将其包装成一个promise。

通过链式promise,可以避免回调函数地狱(callback hell),增加异步代码的可读性。

function callBackend(oBackend) {return oBackend.call(); //返回一个promise
}function processData(result) {return result.data;     //返回的不是promise
}oModel.initialize()       //返回一个promise.then(callBackend).then(processData)      //返回一个包装在promise中的值.then(data => console.log(data));

3. async和await

链式的promise编程风格虽然较回调函数有了更好的可读性,但这种编程方式仍然是复杂和难懂的。为了进一步简化异步编程,JavaScript中提供了关键字async和await。

async和await是用于处理异步操作的特殊关键字。它们可以让你以同步的方式编写异步代码,使得代码更易于阅读和理解。

// 传统的promise风格异步代码
function callBackend(oBackend) {let data1, data2;return oBackend.call().then(data => { data1 = data }).then(oBackend.call()).then(data => { data2 = data }).then(() => process(data1, data2));
}//async & await 风格
async function callBackend(oBackend) {let data1 = await oBackend.call();let data2 = await oBackend.call();return process(data1, data2);
}

3.1 async

async关键字用于声明一个函数是异步的,这意味着函数总是返回一个Promise。如果一个async函数返回一个值,JavaScript会自动将其包装为Promise.resolve()。如果函数抛出异常,则会被Promise.reject()捕获。

async function myAsyncFun() {return 'Hello, World!';
}myAsyncFun().then(console.log); // 输出: 'Hello, World!'

3.2 await

await关键字只能在async函数内部使用。它会暂停代码的执行,直到Promise被解析,然后返回结果值。如果Promise被拒绝,await将抛出异常。

async function myAsyncFun() {let response = await fetch('https://api.github.com/users/github');let user = await response.json();return user.name;
}myAsyncFun().then(console.log); // 输出: 'GitHub'

在上面的例子中,fetch函数返回一个Promise,这个Promise解析为服务器的响应。然后,我们使用await关键字等待Promise解析,然后将结果赋值给response变量。然后,我们再次使用await关键字等待response.json()的Promise解析,然后将结果赋值给user变量。

注意,如果你在没有async函数的上下文中使用await,JavaScript会抛出一个SyntaxError。

3.3 异常处理

由于await会抛出被拒绝的Promise的异常,因此你需要使用try/catch语句来处理可能的错误。

async function myAsyncFun() {try {let response = await fetch('https://api.github.com/users/github');let user = await response.json();return user.name;} catch (error) {console.error('Error:', error);}
}myAsyncFun().then(console.log); // 如果请求成功,输出: 'GitHub'

在上面的例子中,如果fetch或response.json()的Promise被拒绝,catch块将捕获异常,并打印错误信息。

3.4 真实例子

一个常见的使用async和await的场景是在Web开发中从服务器获取数据。下面是一个示例,它从JSONPlaceholder API获取帖子,并打印出帖子的标题。

async function getPosts() {try {// 发送GET请求到APIlet response = await fetch('https://jsonplaceholder.typicode.com/posts');// 如果响应状态不是200,抛出错误if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}// 解析响应数据为JSONlet posts = await response.json();// 打印每个帖子的标题for (let post of posts) {console.log(post.title);}} catch (error) {console.log('There was a problem with the fetch operation: ' + error.message);}
}// 调用函数
getPosts();

在这个例子中,我们首先使用fetch函数发送一个GET请求到API。然后,我们检查响应的状态码是否为200(表示请求成功)。如果状态码不是200,我们抛出一个错误。然后,我们使用response.json()方法解析响应数据为JSON格式。最后,我们遍历帖子数组,打印出每个帖子的标题。

注意,我们使用try/catch语句来处理可能的错误。如果在fetch操作中发生错误(例如,网络问题或API返回非200状态码),我们将捕获错误并打印错误消息。

4. 小结

本文介绍了JavaScript中异步编程技术,包括promise, sync, await的使用,并给出了异步编程的一个真实例子。希望本文对你有帮助!

这篇关于SAP Fiori开发中的JavaScript基础知识14 - promise, async, await异步编程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/909828

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory