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/…

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)虽在诸多领域显示出色性能,但在直接应用于新闻真实性鉴别时,面临两大核心挑…

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

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

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

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

Linux操作系统学习:day08

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

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 文章目录 一、文本布局编程指…

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

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

ELK企业级实战

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

深入解析Java和Go语言中String与byte数组的转换原理

1.Java String与byte[]互相转换存在的问题 java中&#xff0c;按照byte[] 》string 》byte[]的流程转换后&#xff0c;byte数据与最初的byte不一致。 多说无益&#xff0c;上代码&#xff0c;本地macos机器执行&#xff0c;统一使用的UTF-8编码。 import java.nio.charset.S…

逻辑操作符

目录 && --- 逻辑与操作符 || --- 逻辑或操作符 && --- 逻辑与操作符 逻辑与操作符有并且的意思&#xff0c;一般用于判断语句中 逻辑与操作符运行规则是都要为真&#xff0c;才会继续执行或计算 360笔试题&#xff1a; 有关前置(--)&#xff0c;后置(-…

树莓派安装windows系统

第1步&#xff1a; https://uupdump.net/下载对应的系统文件&#xff0c;所有选择项都默认选择。 第2步&#xff1a; 解压下载后的文件&#xff0c;双击运行下面文件。等待下载完成&#xff0c;等待过程很漫长&#xff0c;很考验耐心。 第3步&#xff1a; 提示已经finish了&…

Streamer-Sales 销冠 —— 卖货主播大模型来了,一键让你成为销冠!

今天给大家推荐一个在GitHub上非常火的卖货主播大模型 Streamer-Sales&#xff0c;旨在让你成为销冠。 这是一个能够根据商品特点进行解说的卖货主播大模型&#xff0c;通过生成的细腻、独到的解说词&#xff0c;激发用户的购买欲望。 相关链接 项目地址&#xff1a;github.c…

一文入门Nanomsg通信库

转载自本人博客&#xff1a;https://www.jjy2023.cn/2024/06/27/%e4%b8%80%e6%96%87%e5%85%a5%e9%97%a8nanomsg%e9%80%9a%e4%bf%a1%e5%ba%93/ 1. Nanomsg介绍 Nanomsg官方在线文档&#xff1a;https://nanomsg.org/index.html 本文全部代码用C实现。 以前一直在使用ZeroMQ库处理…

关于Unity运行时动态修改材质的小秘密

一、问题背景 在以往的Unity项目中涉及到修改材质的需求时&#xff0c;也只是改改材质贴图&#xff0c;材质颜色等&#xff0c;也没遇到那么多动态修改材质的坑。最近在做Unity App Demo时也遇到了要修改材质的小需求&#xff0c;本以为几分钟就能完成了&#xff0c;却花费了我…

Cesium Model 中的剪裁平面 (ClippingPlane)

Cesium Model 中的剪裁平面 (ClippingPlane) 参考: https://www.cnblogs.com/webgl-angela/p/9197672.html Cesium Model 中的剪裁平面 (ClippingPlane) // 相关类: class ClippingPlaneCollection {} class ClippingPlane {}// 剪裁的整体流程: Model.prototype.update () …