js使用异步方法(promise)返回回调参数内的值,

需求分析

        使用回调方式的异步方法时,需要返回异步操作的结果,这个时候就不能直接在回调函数内返回值,因为回调函数需要等待异步操作结束才执行,而同步调用返回值时,异步操作没有结束,回调函数就没有执行完成,就接收不到返回值


// 一个异步回调的方法const getData = () => {let data = null;fetch('https://api.github.com/emojis').then(res => {if (res.ok) {res.json().then(response => {console.log(response);data = response;});}})return data;
}console.log(getData()); // 输出 null

这个函数的思路是,在异步请求的外层定义一个变量,然后执行异步请求的回调,异步请求成功后执行回调将结果赋值个data,然后将data返回出来

但是显然调用getData时是同步的,而请求回调是异步的,结果是先调用了getData,请求回调的操作才结束,data根本没有得到请求返回的值,

解决方法

一般来说采用回调的方式,回调的结果应该在回调函数内部处理,要返回异步函数的值,就应该等待异步函数执行结束在返回,可以将其封装成promise进行处理,


const getData = async () => {const res = await fetch('https://api.github.com/emojis');const data = await res.json();console.log(data);return data;
}getData().then(data => {console.log(data);
})

使用async,await将结果封装成一个promise,在使用promise的异步方法读取结果,

这样就将异步的结果通过getData方法拿出来了,

总结

要拿到一个异步的结果,就需要使用异步的调用,同步的方法是不能获取异步结果的,因为异步方法总是在同步操作之后执行,

完整代码展示


// 一个异步回调的方法// const getData = () => {
//   let data = null;
//   fetch('https://api.github.com/emojis').then(res => {
//     if (res.ok) {
//       res.json().then(response => {
//         console.log(response);
//         data = response;
//       });
//     }
//   })
//   return data;
// }// console.log(getData()); // 输出 nullconst getData = async () => {const res = await fetch('https://api.github.com/emojis');const data = await res.json();console.log(data);return data;
}getData().then(data => {console.log(data);
})

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

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

相关文章

深入解析目标检测中的正负样本不平衡问题及其解决方案

目标检测是计算机视觉领域的核心任务之一,它旨在从图像或视频中识别和定位感兴趣的目标。然而,在实际应用中,目标检测算法常常面临正负样本不平衡问题,这会严重影响检测性能。本文将详细探讨正负样本不平衡问题的定义、成因、影响…

每天五分钟深度学习框架pytorch:tensor向量之间常用的运算操作

本文重点 在数学中经常有加减乘除运算,在tensor中也不例外,也有类似的运算,本节课程我们将学习tensor中的运算 常见运算 加法+或者add import torch import numpy as np a=torch.rand(16,3,28,28) b=torch.rand(1,3,28,28) print(a+b) import torch import numpy as np a…

力扣SQL50 连续出现的数字 distinct

Problem: 180. 连续出现的数字 👨‍🏫 力扣官解 Code SELECT DISTINCTl1.Num AS ConsecutiveNums FROMLogs l1,Logs l2,Logs l3 WHEREl1.Id l2.Id - 1AND l2.Id l3.Id - 1AND l1.Num l2.NumAND l2.Num l3.Num ;

用Lobe Chat部署本地化, 搭建AI聊天机器人

Lobe Chat可以关联多个模型,可以调用外部OpenAI, gemini,通义千问等, 也可以关联内部本地大模型Ollama, 可以当作聊天对话框消息框来集成使用 安装方法参考: https://github.com/lobehub/lobe-chat https://lobehub.com/zh/docs/self-hosting/platform/…

探索 Symfony 框架:工作原理、特点及技术选型

目录 1. 概述 2. Symfony 的工作原理 2.1 MVC 架构 2.2 前端控制器模式 2.3 路由机制 2.4 依赖注入容器 2.5 事件驱动架构 3. Symfony 的特点 3.1 高度可扩展性 3.2 强大的社区支持和生态系统 3.3 优秀的性能和可伸缩性 3.4 严格的代码规范和最佳实践 4. Symfony …

DELL:利用大语言模型(LLM)生成评论与解释,革新虚假信息检测

ACL 2024 DELL: Generating Reactions and Explanations for LLM-Based Misinformation Detection https://arxiv.org/abs/2402.10426https://arxiv.org/abs/2402.10426 1.概述 大型语言模型(LLM)虽在诸多领域显示出色性能,但在直接应用于新闻真实性鉴别时,面临两大核心挑…

【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】013 - arch\arm\lib\crt0_64.S 汇编源码逐行详解

【OpenHarmony4.1 之 U-Boot 2024.07源码深度解析】013 - arch\arm\lib\crt0_64.S 汇编源码逐行详解 一、arch\arm\lib\crt0_64.S 汇编源码 - 简单梳理及注释系列文章汇总:《【OpenHarmony4.1 之 U-Boot 源码深度解析】000 - 文章链接汇总》 本文链接:《【OpenHarmony4.1 之 …

百亿级存储架构: ElasticSearch+HBase 海量存储架构与实现

百亿级存储架构: ElasticSearchHBase 海量存储架构与实现 尼恩:百亿级数据存储架构起源 在40岁老架构师 尼恩的读者交流群(50)中,经常性的指导小伙伴们改造简历。 经过尼恩的改造之后,很多小伙伴拿到了一线互联网企业如得物、阿…

多平台自动养号【开心版】偷偷使用就行了!

大家好,今天我无意间发现了一款【多平台自动养号工具】,看了一下里面的功能还是挺全面的,包含了【抖音,快手,小红薯】还有一些截流功能 虽然这款工具功能强大,但美中不足的是需要付费的。但别担心&#xf…

Linux操作系统学习:day08

内容来自:Linux介绍 视频推荐:Linux基础入门教程-linux命令-vim-gcc/g -动态库/静态库 -makefile-gdb调试 目录 day0853、命令和编辑模式之间的切换54、命令模式到末行模式的切换与末行模式下的保存退出命令模式到末行模式的切换保存退出 55、末行模式…

Java中的安全编码实践与防御技巧

Java中的安全编码实践与防御技巧 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨Java中的安全编码实践与防御技巧,这对于开发人员来说…

Spring Boot项目的两种发布方式

一、通过jar包发布 1、在pom中添加一个SpringBoot的构建的插件 <build><plugins><plugin><groupId>org.springframework.boot</groupId><!--自动检测项目中的 main 函数--><artifactId>spring-boot-maven-plugin</artifactId>…

【硬件视界2】CPU和GPU:计算机架构的双子星

名人说&#xff1a;莫听穿林打叶声&#xff0c;何妨吟啸且徐行。—— 苏轼《定风波莫听穿林打叶声》 本篇笔记整理&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、CPU (中央处理器)①主要作用②特点 2、 GPU (图形处理…

Jmeter下载、安装及配置

1 Jmeter介绍 Jmeter是进行负载测试的工具&#xff0c;可以在任何支持Java虚拟机环境的平台上运行&#xff0c;比如Windows、Linux、Mac。 Jmeter模拟一组用户向目标服务器发送请求&#xff0c;并统计目标服务器的性能信息&#xff0c;比如CPU、memory usage。 2 Jmeter下载 …

Apple - Text Layout Programming Guide

本文翻译整理自&#xff1a;Text Layout Programming Guide&#xff08;更新日期&#xff1a;2014-02-11 https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/TextLayout/TextLayout.html#//apple_ref/doc/uid/10000158i 文章目录 一、文本布局编程指…

std::vector<>的{}用法与stl中的共享指针

讨论 std::vector&#xff1c;&#xff1e;的{}用法比较方便&#xff0c;在stl中的共享指针中是否适用&#xff1f; 代码 #include <iostream> #include <memory> #include <vector> using namespace std;int main() {vector<int> vt1({1,3,5});vec…

element tree 设置check-strictly=true后,手动重写逻辑实现父子关联

前言 遇到需求如下&#xff1a; 当取消勾选某个节点为按钮时&#xff0c;并且该节点的同级节点都为按钮时&#xff08;此时父级是勾选状态&#xff09;&#xff0c;不管同级节点是否都取消勾选&#xff0c;那么父级不取消勾选。除非手动取消父级勾选&#xff08;原因是&#…

[python] Python日志记录库loguru使用指北

Loguru是一个功能强大且易于使用的开源Python日志记录库。它建立在Python标准库中的logging模块之上&#xff0c;并提供了更加简洁直观、功能丰富的接口。Logging模块的使用见&#xff1a;Python日志记录库logging总结。Loguru官方仓库见&#xff1a;loguru&#xff0c;loguru官…

用合成数据训练边缘侧火灾检测器

火灾是人类面临的重大威胁&#xff0c;检测火灾至关重要。目前的火焰传感器在距离检测方面存在局限性。为了克服这个问题&#xff0c;我的目标是使用机器学习方法创建一个轻量级且高度准确的火灾检测系统。当需要实时数据处理或机器学习模型可用的数据集很少时&#xff0c;这个…

ELK企业级实战

一、Elstic stack在企业的常⻅架构 https://www.bilibili.com/video/BV1x94y1674x/?buvidXY705117E90F73A790429C9CFBD5F70F22168&vd_source939ea718db29535a3847d861e5fe37ef ELK 解决取得问题 痛点1: ⽣产出现故障后&#xff0c;运维需要不停的查看各种不同的⽇志进⾏…