深入了解JavaScriptPromise

2024-04-02 19:04:59 805人浏览薄情痞子

摘要

目录一什么是 Promise？二为什么有 Promise？三 Promise常用api四 Promise常用的两个用法总结一什么是 Promise？一个 Promise 对

一什么是 Promise？

一个 Promise 对象就像容器一样，在容器中写着一段执行具体操作的代码，并且在这段代码执行结束后，会执行两个回调函数，一个是操作成功的回调函数（resolve），一个是操作失败的回调函数（reject）

二为什么有 Promise？

Promise 的出现是为了解决异步编程中，主要使用的回调机制的几个问题：

Callback hell

Callback hell：Promise 可以把一层层嵌套的 callback 变成 .then().then()…，从而使代码编写和阅读更直观

错误处理难：Promise 比 callback 在错误处理上更清晰直观
同时进行多个异步操作的代码编写困难：Promise 可以简单处理此情况

三 Promise常用api

.then() promise中方法执行完以后，可以执行，里面有两个参数，分别是成功的回调函数和失败的回调函数。
resolve 使用 promise.resolve 方法可以快速的返回一个promise对象
reject 使用 promise.reject 方法可以快速的返回一个promise对象
all 同时执行多个并行异步操作。

四 Promise常用的两个用法

1 如何解决 callback hell？

.then()没有返回值的函数，会使得 Promise 链不再延续，此时你再往后面调用 .then() 是没有作用的。


Promise.resolve('foo').then(function(s) {
  console.log(s);
}).then(function(s) {
  // Never executed
  console.log(s);
});

.then()中有返回值函数，会使 Promise 链可以继续


Promise.resolve('foo').then(function(s) {
  console.log(s);
  return s + 'bar';
}).then(function(s) {
  console.log(s);
});

// foo
// foobar

.then()有返回值且返回值为另一个 Promise 对象的函数，也会使 Promise 继续·。与前者的区别在于，再次调用.then()时可能会触发的是异步操作，因此不是马上触发下一轮resolve()


Promise.resolve('foo').then(function(s) {
  return new Promise((resolve, reject) => {
      console.log(s);
      setTimeout(() => {
          resolve(s + 'bar')
        }, 1000);
    });
}).then(function(s) {
  console.log(s);
});


// foo
// foobar (在 "foo" 显示了 1s 后显示)

2 Promise.all() 实现并发同步接收返回值
应用场景描述（你需要同时调多个接口的数据，并在前端对数据进行处理，这就需要等待所有接口返回数据后才能操作。）


// demo
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});
 
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

Promise.all() 与 sync await区别


//sync await   操作时间2秒
async function Index2() {
      console.time()
      const p1 =await new Promise((resolve, reject) => {
        console.log('这里是p1')
        setTimeout(() => {
          resolve('这里是p1的返回')
        }, 1000)
      })
      const p2 =await new Promise((resolve, reject) => {
        console.log('这里是p2')
        setTimeout(() => {
          resolve('这里是p2的返回')
        }, 1000)
      })
      console.log(p1)
      console.log(p2) 
      console.timeEnd()
   }
    Index2();

在这里插入图片描述


//  使用Promise.all()来实现调用。操作时间1秒
 function Index() {
      console.time()
      const p1 = new Promise((resolve, reject) => {
        console.log('这里是p1')
        setTimeout(() => {
          resolve('这里是p1的返回')
        }, 1000)
      })
      const p2 = new Promise((resolve, reject) => {
        console.log('这里是p2')
        setTimeout(() => {
          resolve('这里是p2的返回')
        }, 1000)
      })
      Promise.all([p1, p2]).then((val) => {
        console.log(val)
        console.timeEnd()
      })
}

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: 深入了解JavaScriptPromise

本文链接: https://lsjlt.com/news/161036.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

猜你喜欢

深入了解JavaScriptPromise

目录一什么是 Promise？二为什么有 Promise？三 Promise常用api四 Promise常用的两个用法总结一什么是 Promise？一个 Promise 对...

99+

2024-04-02
深入了解zhparser

瀚高数据库目录环境文档用途详细信息环境系统平台：N/A 版本：14 文档用途本文参考《zhparser全文检索》，文章ID：051686104；对其进行互补，对zhparser进行进一步...

99+

2023-10-27

postgresql 数据库 php
深入了解mysql索引

1、索引原理索引被用来快速找出在一个列上用一特定值的行。没有索引，MySQL不得不首先以第一条记录开始，然后读完整个表直到它找出相关的行。表越大，花费时间越多。对于一个有序字段，可以运用二分查找（Binary Se...

99+

2022-05-14

MySQL 索引
深入了解PNG图片

本篇内容主要讲解“深入了解PNG图片”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“深入了解PNG图片”吧! 1、PNG图片类型PNG...

99+

2024-04-02
深入了解Java.Util.Date详情

目录Java.Util.Date有什么问题什么是“瞬间”常见问题如何将Date日期转换为其他时区？如何将Date日期转换为其他格式？前言：很少有类能像jav...

99+

2024-04-02
深入了解Python--元组

...

99+

2023-01-30

Python
JavaHashtable机制深入了解

目录概述介绍和使用核心机制实现机制扩容机制源码解析成员变量构造函数put方法get方法remove方法总结概述 HashTable是jdk 1.0中引入的产物，基本上现在很少使用了，...

99+

2024-04-02
React深入了解原理

目录VDOM（虚拟dom）Fiber架构初始化渲染更新时render阶段commit阶段VDOM（虚拟dom） react和vue都是基于vdom的前端框架。 web界面由DOM树来...

99+

2024-04-02
深入了解mysql长事务

前言：本篇文章主要介绍MySQL长事务相关内容，比如说我们开启的一个事务，一直没提交或回滚会怎样呢，出现事务等待情况应该如何处理，本篇文章将给你答案。注意：本篇文章并不聚焦于谈论事务隔离级别以及相关特性。而是...

99+

2022-05-20

mysql 事务 mysql 长事务
深入了解Redis的性能

简介多少次你发现自己在几个月的开发和无数的努力后陷入了毫无性能而言的web应用？多少次你在好奇如果你无法向普通用户传达快与最快的标准，你的客户还应该把你当作专家？多少你听到有关Google和Faceboo...

99+

2022-06-04

性能 Redis
深入了解Android中的AsyncTask

AsyncTask,即异步任务,是Android给我们提供的一个处理异步任务的类。通过此类,可以实现UI线程和后台线程进行通讯,后台线程执行异步任务,并把结果返回给UI线程。&...

99+

2022-06-06

asynctask Android
深入了解python装饰器

目录一、装饰器1.相关知识点2.语法糖3.装饰器模板4.有参装饰器一、装饰器 1.相关知识点 *args：负责将多余的位置实参汇总，赋值给args**kwargs：负责将多余的关键字...

99+

2024-04-02
深入了解Node中的Buffer

最开始的时候 JS 只在浏览器端运行，对于 Unicode 编码的字符串容易处理，但是对于二进制和非 Unicode 编码的字符串处理困难。并且二进制是计算机最底层的数据格式，视频/音频/程序/网络包都是以二进制来存储的。所以 Node 需...

99+

2023-05-14

前端 Node.js
深入了解Python的继承

目录面向对象三大特性：1、单继承1.1 继承的概念、语法和特点1）、继承的语法2）、专业术语总结面向对象三大特性：封装根据职责将属性和方法封装到一个抽象的...

99+

2024-04-02
深入了解Angular（新手入门指南）

项目目录结构|-- project |-- .editorconfig // 用于在不同编辑器中统一代码风格 |-- .gitignore // git中的忽略文件列表 |-- README.md // markdown格式的说明文件...

99+

2023-05-14

Angular Angular.js
深入了解PHP：从入门到精通

深入了解PHP：从入门到精通引言：PHP是一种广泛应用于web开发的服务器端脚本语言，它简单易学，适用于初学者，也提供了丰富的功能和扩展性，能够满足复杂的开发需求。本文将从入门到精通，通过具体的代码示例，带您逐步了解PHP的各个方面。一、基...

99+

2023-12-19

PHP 入门精通
深入了解 TiDB SQL 优化器

分享嘉宾：张建 PingCAP TiDB优化器与执行引擎技术负责人编辑整理：Druid中国用户组第6次大数据MeetUp 出品平台：DataFunTalk 导读：本次报告张老师主要从原理上带大家深入了解 TiDB SQL 优化器中的...

99+

2014-10-26

深入了解 TiDB SQL 优化器
深入了解Mysql逻辑架构

　　Mysql现在是大多数公司企业在用的数据库，之所以用Mysql，一点是因为Mysql是开源软件，一些有能力的公司会基于已有的Mysql架构，进行修改、调整改成适合自己公司的业务需要。一点是因为Mysql免费，相...

99+

2022-05-30

MySQL 架构 MySQL 逻辑架构
深入了解C语言指针

目录指针是什么？指针和指针类型指针运算总结指针是什么？总结：指针就是个变量，变量里面是地址，指针就是地址。（存放在指针的值都被当成地址处理）。注：指针的大小在32位平台是4个字节...

99+

2024-04-02
C语言深入了解函数

目录1. 函数的概念2. 函数的分类从定义角度分从参数角度分类从返回值角度分3. 函数的定义4. 函数的声明5. 函数的调用6. 递归函数1. 函数的概念函数是c语言的功能单位，实...

99+

2024-04-02