iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >深入了解JavaScriptPromise
  • 805
分享到

深入了解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://www.lsjlt.com/news/161036.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 深入了解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
  • JavaHashtable机制深入了解
    目录概述介绍和使用核心机制实现机制扩容机制源码解析成员变量构造函数put方法get方法remove方法总结概述 HashTable是jdk 1.0中引入的产物,基本上现在很少使用了,...
    99+
    2024-04-02
  • 深入了解Java.Util.Date详情
    目录Java.Util.Date有什么问题什么是“瞬间”常见问题如何将Date日期转换为其他时区?如何将Date日期转换为其他格式?前言: 很少有类能像jav...
    99+
    2024-04-02
  • 深入了解PNG图片
    本篇内容主要讲解“深入了解PNG图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“深入了解PNG图片”吧! 1、PNG图片类型PNG...
    99+
    2024-04-02
  • 深入了解Python--元组
              ...
    99+
    2023-01-30
    Python
  • React深入了解原理
    目录VDOM(虚拟dom)Fiber架构初始化渲染更新时render阶段commit阶段VDOM(虚拟dom) react和vue都是基于vdom的前端框架。 web界面由DOM树来...
    99+
    2024-04-02
  • 深入了解python装饰器
    目录一、装饰器1.相关知识点2.语法糖3.装饰器模板4.有参装饰器一、装饰器 1.相关知识点 *args:负责将多余的位置实参汇总,赋值给args**kwargs:负责将多余的关键字...
    99+
    2024-04-02
  • 深入了解Python的继承
    目录面向对象三大特性:1、单继承1.1 继承的概念、语法和特点1)、继承的语法2)、专业术语总结面向对象三大特性: 封装 根据 职责 将 属性 和 方法 封装 到一个抽象的...
    99+
    2024-04-02
  • 深入了解Node中的Buffer
    最开始的时候 JS 只在浏览器端运行,对于 Unicode 编码的字符串容易处理,但是对于二进制和非 Unicode 编码的字符串处理困难。并且二进制是计算机最底层的数据格式,视频/音频/程序/网络包都是以二进制来存储的。所以 Node 需...
    99+
    2023-05-14
    前端 Node.js
  • 深入了解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 入门 精通
  • 深入了解C语言指针
    目录指针是什么?指针和指针类型指针运算总结指针是什么? 总结:指针就是个变量,变量里面是地址,指针就是地址。(存放在指针的值都被当成地址处理)。 注:指针的大小在32位平台是4个字节...
    99+
    2024-04-02
  • 深入了解golang这门语言
    随着计算机科学的迅速发展,计算机编程也成为了当今世界不可或缺的部分。在过去的几十年里,许多编程语言都发展得十分迅速,如C语言,Java语言等等,但是,在最近的几年里,一门新的编程语言正在崛起,那就是Go语言,也称为Golang。本文将介绍这...
    99+
    2023-05-14
    go语言 Golang
  • 深入了解JavaObject类的使用
    目录1.equals方法==运算符equals2.hashCode3.toString4.finalize1.equals方法 ==运算符 比较运算符,即可以判断基本类型又可以判断引...
    99+
    2024-04-02
  • 带你深入了解下this.$nextTick!
    我们先看看nextTick究竟是个啥?console.log(this.$nextTick); // 控制台打印 if(fn){ return nextTick(fn, this); }我们可以看出nextTick就是一个方法,方法有两...
    99+
    2023-05-14
    $nextTick Vue
  • 深入了解C++异常处理
    目录基本的异常处理怎么抛出异常捕获和处理异常不存在异常的描述 --- 标识性作用    删减符 ...异常处理中的传参操作  --- 可以写一个变量进去可以抛出自己类的对象标准库当中...
    99+
    2024-04-02
  • 深入了解Python中的变量
    目录1 Python变量概述2 Python变量的命名3 Python变量赋值3.1 Python赋值概述3.2 Python变量的基本格式3.3 Python变量的其他赋值格式3....
    99+
    2024-04-02
  • C语言深入了解函数
    目录1. 函数的概念2. 函数的分类从定义角度分从参数角度分类从返回值角度分3. 函数的定义4. 函数的声明5. 函数的调用6. 递归函数1. 函数的概念 函数是c语言的功能单位,实...
    99+
    2024-04-02
  • 深入了解JavaScript阻塞渲染
    目录到底几个线程主线程的任务Parse HTMLRecaculate StyleLayoutUpdate Layer TreePaintJS为啥阻塞渲染总结前言: 在中文社区,这么多...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作