JS PromiseLike 的判定与使用

目录

  • 一. $.ajax()返回值遇到的问题
  • 二. Promise A+ 规范
  • 三. 判断是否为PromiseLike
    • 3.1 判断ES6的new Promise()
    • 3.2 判断包含then方法的对象
    • 3.3 判断$.ajax()返回的对象


一. $.ajax()返回值遇到的问题

当我们执行如下js代码时,可以看到$.ajax()执行后,得到的response对象并不为空,并且response对象的responseJSON属性也确实是有值的。

但是,当我们执行response.responseJSON后,得到的居然是undefined
并且我们使用await 对response对象等待后,得到的就直接是response.responseJSON中的值。

setTimeout(async () => {const response = $.ajax({url: "https://api.github.com/users/fengyehong123",type: 'GET',});console.log(response);console.log(response.responseJSON);  // undefinedconst result = await response;console.log(result);}, 1000);

⏹执行效果如下:

在这里插入图片描述

🤔上述现象是因为 $.ajax()得到的对象是一个 Promise Like对象,Promise Like对象和ES6的new Promise()一样,都是对 Promise A+ 规范的实现,因此可以使用 await 进行等待。


二. Promise A+ 规范

官网: https://promisesaplus.com/

ES6的new Promise()也好,$.ajax()函数返回的Promise Like对象也好,
都只是Promise A+规范的一种实现,该规范告诉我们如何自己实现一个Promise。


三. 判断是否为PromiseLike

⏹如果一个值的类型为 object 或者 function
并且 该值还存在一个then方法
那么 该值就是一个 PromiseLike 对象。

// 判断是否为 Promise Likefunction isPromiseLike(value) {if(value === null) {return false;}if ((typeof value === 'object' || typeof value === 'function') && (typeof value.then === 'function')){return true;}return false;
}

3.1 判断ES6的new Promise()

⏹ES6 的 new Promise() 是 Promise A+ 规范的实现,所以肯定是一个 PromiseLike 对象

const promise_obj = new Promise((resolve, reject) => {resolve('枫叶红');
});
console.log(isPromiseLike(promise_obj) ? "promise_obj是PromiseLike对象" : "promise_obj非PromiseLike对象");

3.2 判断包含then方法的对象

⏹定义一个对象,对象里面有一个then方法,方法里面是耗时操作。符合该对象是一个Promise Like对象。

const then_response = {then: function(resolve, reject) {setTimeout(() => {resolve('贾飞天');}, 1000)}
}
console.log(isPromiseLike(then_response) ? "then_response是PromiseLike对象" : "then_response非PromiseLike对象"
);
// then_response是PromiseLike对象(async (response) => {/*此处的response实际上是then_response因为 then_response 是一个 Promise Like 对象要想await的话,必须包裹在 函数中因此此处定义了一个立即执行函数,还可以避免给函数取名的麻烦*/const result = await response;console.log(result);
})(then_response);

3.3 判断$.ajax()返回的对象

// ⏹两秒之后发送ajax请求
setTimeout(async () => {const response = $.ajax({url: "https://api.github.com/users/fengyehong123",type: 'GET',});// 是一个PromiseLike对象console.log(isPromiseLike(response) ? "response是PromiseLike对象" : "response非PromiseLike对象");// response是PromiseLike对象// 正因为是 PromiseLike对象 ,所以才可以进行awaitconst result = await response;console.log(result);
}, 2000);

⏹也就是说,我们之后的$.ajax()函数可以这么写

// ajax的请求对象
const jqRequest = $.ajax({url,method: 'GET'
});// doneCallBack,failCallBack,alwaysCallback 是从外部传入的回调函数
jqRequest.done(function(data, textStatus, jqXHR) {doneCallBack && doneCallBack(data);
}).fail(function(jqXHR, textStatus, errorThrown) {failCallBack && failCallBack();
}).always(function() {alwaysCallback && alwaysCallback();
});

⏹也可以这么写,从而可以避免回调的方式

document.querySelector('#btn').addEventListener('click', async function() {const url = "https://api.github.com/users/fengyehong123";// 后端的返回值let result = null;try {result = await $.ajax({url,type: 'GET',});} catch (error) {const {responseJSON} = error;console.log(`请求失败!原因是: ${responseJSON}`);} finally {console.log("请求完成!");}if(!result) {// 进行相应的业务处理return;}console.log("返回的最终值为:");console.log(result);
});

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

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

相关文章

Unity收费对谁影响最大

Unity的收费政策对以下几类人群影响最大: 游戏开发商:Unity收费政策中最直接的影响对象就是游戏开发商。对于那些使用Unity引擎制作游戏的开发商来说,他们将需要考虑新的许可证费用和服务费用,这可能会对他们的盈利和发展产生影响…

【分子指纹】化学分子指纹的概念和应用

Drug Discov Today|化学分子指纹的概念和应用 2022年9月13日,哈尔滨医科大学药物基因组信息学教研室陈秀杰教授、哈尔滨医科大学生物信息科学与技术学院解洪波副教授团队在期刊Drug Discovery Today上发表论文“Concepts and applications of chemical fi…

计算机网络之运输层

一、概述 物理层、数据链路层以及网络层它们共同解决了将主机通过异构网络互联起来所面临的的问题,实现了主机到主机的通信 但实际上在计算机网络中进行通信的真正实体是位于通信两端主机中的进程 如何为运行在不同主机上的应用进程提供直接的通信服务时运输层的任务…

GoLand 2023.2.5(GO语言集成开发工具环境)

GoLand是一款专门为Go语言开发者打造的集成开发环境(IDE)。它能够提供一系列功能,如代码自动完成、语法高亮、代码格式化、代码重构、代码调试等等,使编写代码更加高效和舒适。 GoLand的特点包括: 1. 智能代码补全&a…

Grafana如何实现折线柱状图

程序员的公众号:源1024,获取更多资料,无加密无套路! 最近整理了一份大厂面试资料《史上最全大厂面试题》,Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

配电室智慧运维

配电室智慧运维是一种基于先进技术和智能化管理理念的配电室运维模式。依托电易云-智慧电力物联网,它结合云计算、物联网、大数据等技术,对配电室进行全方位的智能化管理和运维,旨在提高配电室的运行效率、安全性和可靠性。 配电室智慧运维的…

MDK AC5和AC6是什么?在KEIL5中添加和选择ARMCC版本

前言 看视频有UP主提到“AC5”“AC6”这样的词,一开始有些不理解,原来他说的是ARMCC版本。 keil自带的是ARMCC5,由于ARMCC5已经停止维护了,很多开发者会选择ARMCC6。 在维护公司“成年往事”项目可能就会遇到新KEIL旧版本编译器…

Dubbo引入Zookeeper等注册中心简介以及DubboAdmin简要介绍,为后续详解Dubbo各种注册中心做铺垫!

文章目录 一:Dubbo注册中心引言 1:什么是Dubbo的注册中心? 2:注册中心关系图解 3:引入注册中心服务执行流程 4:Dubbo注册中心好处 5:注册中心核心作用 二:注册中心实现方案 …

【Pytorch】Visualization of Feature Maps(3)

学习参考来自: Image Style Transform–关于图像风格迁移的介绍github:https://github.com/wmn7/ML_Practice/tree/master/2019_06_03 文章目录 风格迁移 风格迁移 风格迁移出处: 《A Neural Algorithm of Artistic Style》(ar…

RTT打印在分区跳转后无法打印问题

场景: RTT打印仅占用JLINK的带宽,比串口传输更快更简洁,同时RTT可以使用jscope对代码里面的变量实时绘图显示波形,而采用串口打印波形无法实时打印。同时可以保存原始数据到本地进行分析,RTT在各方面完胜串口。 问题描…

springboot+vue热带野生动物园景点预约门票订票系统

热带野生动物园景点预约订票系统为野生动物园提供景点管理服务的系统,通过登录系统,管理该野生动物园所有的景点信息、景点分类信息、野生动物园新闻、通知公告、回复会员留言等,并可以通过订单管理查看会员预定的订单信息,对订单…