Javascript访问Promise对象返回值的操作方法

2025-03-12 05:50

本文主要是介绍Javascript访问Promise对象返回值的操作方法,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《Javascript访问Promise对象返回值的操作方法》这篇文章介绍了如何在JavaScript中使用Promise对象来处理异步操作,通过使用fetch()方法和Promise对象,我们可以从...

javascript中,什么是Promise

Promise是一个对象,表示一个异步操作的事件完成或失败。

Promise对象可以是如下状态:

  • pending
  • fulfilled
  • rejected

最广泛使用的异步操作的一个实例是Fetch API。fetch() 方法返回一个Promise对象。

如果我们从后端API获取一些数据。对于这篇博文,我将使用jsONPlaceholder – 一个伪造的REST API。wjITQ我们将获取一个id=1的用户数据。

fetch("https://jsonplaceholder.typicode.com/users/1")

让我们看看如何访问返回数据。

1- then() 链式操作

它是最简单和最明显的方式。

fetch("https://jsonplaceholder.typicode.com/users/1") // 1
  .then((response)=>response.json())  //2
  .then((user) => {
    console.log(user.address); // 3
  });

这里,我们(1)从API获取数据,(2)转换为JSwjITQON对象,然后(3)打印用户地址值到控制台。

结果如下:

{
  street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'GwenboroughChina编程9;,
  zipcode: '92998-3874',
  geo: { lat: '-37.3159', lng: '81.1496' }
}

2- 在之后的代码中使用返回值

但是如果我们想要在之后的代码中使用返回值,怎么办?

如果我们尝试像这样做(错误方式!)

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response)=>response.json())
  .then((user) => {
    return usephpr.address;
  });
console.log(address);

我们将得到

Promise { <pending> }

得到这种结果,是因为Javascript代码总是同步执行,所以console.log()函数在fetch()请求后立即开始,而没有等待直到它解析完成。当console.log()函数开始运行的时刻,fetch()请求函数返回的Promise对象处于pending状态。

那就是说,我们可以访问另一个 .then() 回调函数的Promise对象的返回值:

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });
const printAddress = () => {
  address.then((a) => {
    console.log(a);
  });
};
printAddress();

或使用async/await语法:

const address = fetch("https://jsonplaceholder.typicode.com/users/1")
  .then((response) => response.json())
  .then((user) => {
    return user.address;
  });
const printAddress = async () => {
  const a = await address;
  console.log(a);
};
printAddress();

以这两种方式,我们将得到:

{
  street: 'Kulas Light',
  suite: 'Apt. 556',
  city: 'Gwenborough',
  zipcode: '92998-3874',
  geo: { lat: '-37.3159', lng: '81.1496' }
}

结论

Promise对象广泛用于Javascript异步编程。而且开发者对于如何正确使用它,有时还有些困惑。在这篇博客文章里,我已经试图描述一个用户例子,即当开发者需要在之后的代码中使用来自Promise对象的返回值的实例。 

英文原文链接:https://dev.to/ramonak/javascript-how-to-Access-the-return-value-of-a-promise-object-1bck

更多中文参考资料

[1] JavaScript PromisChina编程e - Javascript教程. https://www.runoob.com/js/js-promise.html

[2] JavaScript Promise 对象 – 编程技术. https://www.runoob.com/w3cnote/javascript-promise-object.html

[3] 7.6 Promise – 7. 浏览器 – JAVASCRIPT教程- 廖雪峰的官方网站. https://liaoxuefeng.com/books/javascript/browser/promise/index.html

到此这篇关于Javascript如何访问Promise对象返回值的文章就介绍到这了,更多相关js访问Promise对象返回值内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持China编程(www.chinasem.cn)!

这篇关于Javascript访问Promise对象返回值的操作方法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

java streamfilter list 过滤的实现

《javastreamfilterlist过滤的实现》JavaStreamAPI中的filter方法是过滤List集合中元素的一个强大工具,可以轻松地根据自定义条件筛选出符合要求的元素,本文就来... 目录1. 创建一个示例List2. 使用Stream的filter方法进行过滤3. 自定义过滤条件1. 定

java常见报错及解决方案总结

《java常见报错及解决方案总结》:本文主要介绍Java编程中常见错误类型及示例,包括语法错误、空指针异常、数组下标越界、类型转换异常、文件未找到异常、除以零异常、非法线程操作异常、方法未定义异常... 目录1. 语法错误 (Syntax Errors)示例 1:解决方案:2. 空指针异常 (NullPoi

Java中&和&&以及|和||的区别、应用场景和代码示例

《Java中&和&&以及|和||的区别、应用场景和代码示例》:本文主要介绍Java中的逻辑运算符&、&&、|和||的区别,包括它们在布尔和整数类型上的应用,文中通过代码介绍的非常详细,需要的朋友可... 目录前言1. & 和 &&代码示例2. | 和 ||代码示例3. 为什么要使用 & 和 | 而不是总是使

一文带你了解SpringBoot中启动参数的各种用法

《一文带你了解SpringBoot中启动参数的各种用法》在使用SpringBoot开发应用时,我们通常需要根据不同的环境或特定需求调整启动参数,那么,SpringBoot提供了哪些方式来配置这些启动参... 目录一、启动参数的常见传递方式二、通过命令行参数传递启动参数三、使用 application.pro

Java强制转化示例代码详解

《Java强制转化示例代码详解》:本文主要介绍Java编程语言中的类型转换,包括基本类型之间的强制类型转换和引用类型的强制类型转换,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录引入基本类型强制转换1.数字之间2.数字字符之间引入引用类型的强制转换总结引入在Java编程语言中,类型转换(无论

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于

SpringCloud之consul服务注册与发现、配置管理、配置持久化方式

《SpringCloud之consul服务注册与发现、配置管理、配置持久化方式》:本文主要介绍SpringCloud之consul服务注册与发现、配置管理、配置持久化方式,具有很好的参考价值,希望... 目录前言一、consul是什么?二、安装运行consul三、使用1、服务发现2、配置管理四、数据持久化总

SpringCloud之LoadBalancer负载均衡服务调用过程

《SpringCloud之LoadBalancer负载均衡服务调用过程》:本文主要介绍SpringCloud之LoadBalancer负载均衡服务调用过程,具有很好的参考价值,希望对大家有所帮助,... 目录前言一、LoadBalancer是什么?二、使用步骤1、启动consul2、客户端加入依赖3、以服务

SpringBoot @Scheduled Cron表达式使用方式

《SpringBoot@ScheduledCron表达式使用方式》:本文主要介绍SpringBoot@ScheduledCron表达式使用方式,具有很好的参考价值,希望对大家有所帮助,如有... 目录Cron 表达式详解1. 表达式格式‌2. 特殊字符解析3. 常用示例‌4. 重点规则5. 动态与复杂场景‌

SpringCloud负载均衡spring-cloud-starter-loadbalancer解读

《SpringCloud负载均衡spring-cloud-starter-loadbalancer解读》:本文主要介绍SpringCloud负载均衡spring-cloud-starter-loa... 目录简述主要特点使用负载均衡算法1. 轮询负载均衡策略(Round Robin)2. 随机负载均衡策略(