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.mzph.cn/news/163104.shtml

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

相关文章

Linux python安装 虚拟环境 virtualenv

根目录创建 venvs 文件夹 sudo mkdir /venvs 进入 /venvs 目录 cd /venvsp 创建虚拟环境,前提要按照 python3 安装 的 命令 sudo apt install python3 sudo python3 -m venv 虚拟环境名 激活虚拟环境 sourcepippip /venvs/zen-venv/bin/activatepinpi 安装flask pip…

【C语言】深入解开指针(四)

🌈write in front :🔍个人主页 : 啊森要自信的主页 ✏️真正相信奇迹的家伙,本身和奇迹一样了不起啊! 欢迎大家关注🔍点赞👍收藏⭐️留言📝>希望看完我的文章对你有小小的帮助&am…

ubuntu借助overlay方案实现重启自动还原

配置重启还原OS 首先:sudo apt install overlayroot 安装一下软件 然后编辑配置文件:/etc/overlayroot.conf * overlayroottmpfs or overlayroottmpfs:PARAMETERS write all changes to a temporary (ram only) backing device A tmpfs mount will …

ubuntu22.04安装wvp-gb28181-pro 2023-11-23最新版本(一键安装)

下载程序 输入下面命令,输入普通用户密码,切换到 root用户 sudo su git clone -b ubuntu_wvp_online_install_2023_0425 https://gitcode.net/zenglg/ubuntu_wvp_online_install.git 等待下载完成 安装 进入到克隆下来的路径中 cd /home/tuners/ub…

让国内AI模型解题:滑动窗口中找出最大值,文心一言,通义千问错误率100%,讯飞星火略胜一筹

最近,一些大厂陆续放出了自己的AI模型,处于日常的使用和准确度,我通过一道试题来看一下文心一言、讯飞星火和通义千万的回答结果 本道题是一道很经典的算法题,请在滑动窗口中找出最大值 文心一言 第一次给出答案 package main…

vue中v-if与v-for的优先级?

​🌈个人主页:前端青山 🔥系列专栏:Vue篇 🔖人终将被年少不可得之物困其一生 依旧青山,本期给大家带来vue篇专栏内容:vue中v-if与v-for的优先级? 目录 v-if和v-for的优先级是什么? 一、作用 二、优先级…

移动机器人,开启智能柔性制造新篇章

智能制造是当今工业发展的必然趋势,而柔性制造则是智能制造的重要组成部分。在这个快速变革的时代,如何提高生产效率、降低成本、增强灵活性成为了制造业的关键挑战。富唯智能移动机器人应运而生,为柔性制造注入了新的活力。 基于富唯智能AI-…

凸问题与非凸问题

凸函数:曲线上任意两点连线上的点对应的函数值不大于该两点对应的函数值得连线上的值,例如yx^2; 非凸函数:曲线上任意两点连线上的点对应的函数值既有大于该两点对应的函数值得连线上的值的部分也有小于的部分,例如&am…

Re51:读论文 Language Models as Knowledge Bases?

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称:Language Models as Knowledge Bases? ArXiv网址:https://arxiv.org/abs/1909.01066 官方GitHub项目:https://github.com/facebookresearch/LAMA 本文是2019年…

软件测试个人求职简历该怎么写,模板在这里

1、个人资料 姓名:xxx性别:x 手机号码:138888888xx邮箱:xxx 学历:本科专业:电子商务 英语:四级当前工作:测试工程师 从业时间:4年期望薪资:面议 求职意向软件…

FIB表与快速转发表实验

实验名称:FIB表与快速转发表实验 网络拓扑图: 实验步骤: 1、配置接口的IP地址 R1: R2: 2、配置OSPF路由协议 在R1宣告网段 在R2宣告网段 3、查看邻居状态,一直处于2-way状态,要等待30秒&…

SAP 权限设置维护

权限设置维护 su21 点击创建自己的 对象类(OBJECT CLASS ) Z... 在点击创建授权对象 输入对象名 z... 对象名文本 字段名:ACTVT 点击允的许活 按钮 里面增删改查等权限.... 保存 .权限对象 保存后需要 pfcg 配置权限对象 分…

如何将音频添加到视频并替换视频中的音轨

随着视频流媒体网站的流行和便携式设备的发展,你可能越来越倾向于自己制作视频并在互联网上分享。有时,你可能还需要编辑视频并为其添加背景音乐,因为音乐总是对视频的感知起着神奇的作用。 那如何给视频添加音频呢?或者如何用新…

阿里云跨账号建立局域网

最近有活动,和好友一并薅了下阿里云的羊毛。琢磨着两台机器组一个局域网,于是有了这个需求,把步骤记录一下: 假设两台机器叫A和B,我们开始进行建立和组网 1. 建立ECS 把A机器公共环境装好,然后使用《实例与…

深入解析Java 8中HashMap的底层原理

引言 HashMap是Java中常用的集合类,用于存储键值对。其底层实现经过多次优化,包括哈希算法、数组扩容、链表转红黑树等。本文将深入研究HashMap的底层原理,并详细探讨如何解决哈希碰撞的技术。 1. 哈希算法 HashMap的核心是哈希算法&#…

【运动规划】191 自适应跟踪kinodynamicrrt的路径

分层法: two layer approach 自适应控制,跟随轨迹。运动规划:扩展自由空间(基于速度约束缩小自由空间)为控制部分留余量,确保安全。 控制设计: 考虑平移和旋转,速度环控制&#xff…

银河麒麟安装Docker

# 配置阿里云 Centos8 镜像源,需要额外的一些依赖,而这些依赖在麒麟官方的源里面是没有的 sudo curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-8.repo# 配置阿里云 docker 镜像源 sudo yum-config-manager --add-r…

【23真题】Top3!最高148分,数二英二!

今天分享的是23年西安交通大学815的信号与系统数字信号处理试题及解析。众所周知,Top3一共有10所,其中就包括了西安交大! 本套试卷难度分析:平均分为117-128分,最高分为148分!22年西安交大909/815的真题我…

2022-4-11 南科大现代控制与最优估计

CLEAR_LAB B站视频 矩阵的分块矩阵操作 diagonal 对角阵 identity matrix 单位矩阵 矩阵克罗内克积

【LeetCode二叉树进阶题目】606. 根据二叉树创建字符串,102. 二叉树的层序遍历,107. 二叉树的层序遍历 II

二叉树进阶题目 606. 根据二叉树创建字符串解题思路及实现 102. 二叉树的层序遍历解题思路及实现 107. 二叉树的层序遍历 II解题思路及实现 606. 根据二叉树创建字符串 描述 给你二叉树的根节点 root ,请你采用前序遍历的方式,将二叉树转化为一个由括号…