JavaScript高级语法之异步Promise(1:入门)

2024-06-22 17:38
文章标签 java 入门 语法 script 异步 高级 promise

本文主要是介绍JavaScript高级语法之异步Promise(1:入门)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 1 callback hell(回调地狱)
    • 1.1 问题引入
    • 1.2 promise简介
  • 2 Promise使用
    • 2.1 创建一个Promise容器
    • 2.2 then方法
    • 2.3 then方法链式操作
    • 2.4 then方法链式操作的异常处理
    • 2.5 触发resolve条件
    • 2.6 Jquery中使用Promise

1 callback hell(回调地狱)

1.1 问题引入

层层嵌套回调函数，最直观的就是如下图所示，不利于代码的维护和美观，不过在回调中 可以确保代码的执行顺序：
回调地狱示例图
假如用nodejs来读取3个文件，由于NodeJS中的文件读取是异步操作，要每一个成功后，在依次读取后面的代码示例如下：

const fs = require('fs');//加载文件模块
const path = require('path');//加载路径模块
//自定义的读取方法，第一参数为路径，第二参数为成功读取的回调，第二位失败读取的回调
function getFileByPath(fpath, succCb, errCb) {fs.readFile(fpath, 'utf-8', (err, dataStr) => {if (err) return errCb(err)succCb(dataStr)})
}// 此处是开始读取的主要代码
//此处有点像开始时的回调地狱的样子了
getFileByPath(path.join(__dirname, './files/1.txt'), function (data) {//先读取文件1.txtconsole.log(data);getFileByPath(path.join(__dirname, './files/2.txt'), function (data) {//读取文件1.txt成功后，在读取文件2.txtconsole.log(data);getFileByPath(path.join(__dirname, './files/3.txt'), function (data) {//读取文件2.txt成功后，在读取文件3.txtconsole.log(data);})})
})

1.2 promise简介

  1. Promise 是一个 构造函数，既然是构造函数， 那么，我们就可以 new Promise() 得到一个 Promise 的实例；
  2. 在 Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）
  3. 在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，也就说，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法
  4. Promise 表示一个异步操作；每当我们 new一个 Promise 的实例，这个实例，就表示一个具体的异步操作；
  5. 既然Promise创建的实例，是一个异步操作，那么，这个 异步操作的结果，只能有两种状态：

状态1： 异步执行成功了，需要在内部调用成功回调函数 resolve 把结果返回给调用者；
状态2： 异步执行失败了，需要在内部调用 失败回调函数 reject 把结果返回给调用者；
由于Promise 的实例，是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把成功 或 失败的结果，返回给调用者；

  1. 可以在 new 出来的 Promise 实例上，调用 .then() 方法，预先为这个 Promise 异步操作，指定成功（resolve） 和 失败（reject） 回调函数；

2 Promise使用

ES6中使用Promise函数的原理
Promise 函数本身不是异步，主要是内部装的异步函数
Promise 函数容器示例图：
在这里插入图片描述

2.1 创建一个Promise容器

  • Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
  • 它们是两个函数，由JavaScript引擎提供，不用自己部署。
  • resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将 异步操作的结果，作为参数传递出去
  • reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从Pending变为Rejected），在异步操作失败时调用，并将 异步操作报出的错误，作为参数传递出去 。
    注意: 容器一旦创建，就会立即执行
var fs =require('fs') //nodejs里面的语法
//定义的读取文件的方法
var p= new Promise(function(resolve,reject){//异步代码fs.readFile('a.txt','utf-8',function(err,data){if(err){reject(err)}else{resolve(data)}})
})

2.2 then方法

then方法可以接受两个回调函数，第一个是异步操作成功时（变为resolved状态）时的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（可以省略）。一旦状态改变，就立即调用相应的回调函数
then方法每次都是返回一个新的Promise实例
例如下面代码，若Promise实例对象p成功了就调用then方法第一个参数function(data) 若失败则调用第二个参数 function(err)

p.then(function(data){console.log(data)},function(err){console.log(err)})

示例图如下：
在这里插入图片描述

2.3 then方法链式操作

由于then方法每次都是返回一个新的Promise实例，所以可以进行链式操作，在形参回调函数中可以返回信息，但是只是会对下个then链中的回调函数产生影响
then方法绑定两个回调函数：操作成功时的回调函数(function(data)，操作失败时的回调函数function(err)（ 可以省略 ）。这两个函数都接受异步操作传回的值作为 参数

p.then(function(data){console.log(data)return 'hello'},function(err){console.log(err)}).then(function(data){console.log(data)   //hello})

上面的代码解析：

  • 当 p 读取成功的时候
  • 当前函数中 return 的结果就可以在后面的 then 中 function 接收到
  • return普通对象

当你 return 123 后面就接收到 123
return 'hello' 后面就接收到hello
没有 return 后面收到的就是 undefined

  • return Promise对象
    当 return 一个 Promise 对象的时候，后续的 then 中的方法的第一个参数会作为 p2 的 resolve
    链式操作示例图如下所示：
    promise链式操作示意图

2.4 then方法链式操作的异常处理

po.then(step1).then(step2).then(step3).then(console.log,console.error);
  • po的状态一旦变为resolved，就依次调用后面每一个then指定的回调函数,每一步都必须等到前一步完成，才会执行
  • 最后一个then方法的回调函数console.log和console.error，用法上有一点重要的区别
  • console.log只显示回调函数step3的返回值，而console.error可以显示step1、step2、step3之中任意一个发生的错误。
  • 假定step1操作失败，抛出一个错误，这时step2和step3都不会再执行了(因为它们是操作成功的回调函数，而不是操作失败的回调函数)
  • Promises对象开始寻找，接下来第一个操作失败时的回调函数，在上面代码中是console.error
  • 这就是说，Promises对象的错误有传递性。
    正是因为错误的传递性，可以在最后修改如下,可以确保异常打印出来：
po.then(step1).then(step2).then(step3).then(null,console.error);

或者使用catch处理捕获异常
catch 的作用： 如果前面有任何的 Promise 执行失败，则立即终止所有 promise 的执行，并马上进入catch去处理Promise中抛出的异常；

po.then(step1).then(step2).then(step3).catch(function(err){console.log(err.message);});

2.5 触发resolve条件

Promise对象中的两个函数也是有默认定义的resolve，reject
比如resolve("promise测试成功")返回的还是这个信息promise测试成功
在then链中的某个方法添加了括号后，就会立即执行，相当于传入了该方法的结果，因此可以理解直接跳过这个加括号的方法，而带着前面返回的信息调用下个then链方法
比如：p.then("1").then("2").then((value)=>{console.log(value)})此处value是接收刚开始那里p对象的地方的，由于没有触发.then("1").then("2")的resolve函数，因此不会对后续有影响

var p = new Promise(function(resolve,reject){resolve("promise测试成功");
});
function dosome(){console.log("回调函数");return true;
}p.then(dosome).then(function (value){console.log("测试，测试====="+value);
});
运行结果
//回调函数
//测试，测试=====true
p.then(dosome()).then(function (value){console.log("测试，测试====="+value);
});
运行结果
//回调函数
//测试，测试=====promise测试成功

2.6 Jquery中使用Promise

在ajax中使用示例，代码示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><input type="button" value="获取数据" id="btn"><!--  引入jQuery的包 --><script src="./node_modules/jquery/dist/jquery.min.js"></script><script>$(function () {$('#btn').on('click', function () {$.ajax({url: './data.json',type: 'get',dataType: 'json'}).then(function (data) {console.log(data)})})});</script>
</body>
</html>

所需要的数据

{"name": "小强","age": 18
}

这篇关于JavaScript高级语法之异步Promise(1:入门)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1084970。

相关文章

Java实现字节字符转bcd编码

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码（Binary-Coded Decima
阅读更多...
SpringBoot全局域名替换的实现

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja
阅读更多...
Java使用Javassist动态生成HelloWorld类

Java使用Javassist动态生成HelloWorld类

《Java使用Javassist动态生成HelloWorld类》Javassist是一个非常强大的字节码操作和定义库,它允许开发者在运行时创建新的类或者修改现有的类,本文将简单介绍如何使用Javass... 目录1. Javassist简介2. 环境准备3. 动态生成HelloWorld类3.1 创建CtC
阅读更多...
JavaScript中的高级调试方法全攻略指南

JavaScript中的高级调试方法全攻略指南

《JavaScript中的高级调试方法全攻略指南》什么是高级JavaScript调试技巧,它比console.log有何优势,如何使用断点调试定位问题,通过本文,我们将深入解答这些问题,带您从理论到实... 目录观点与案例结合观点1观点2观点3观点4观点5高级调试技巧详解实战案例断点调试：定位变量错误性能分
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
Java使用jar命令配置服务器端口的完整指南

Java使用jar命令配置服务器端口的完整指南

《Java使用jar命令配置服务器端口的完整指南》本文将详细介绍如何使用java-jar命令启动应用,并重点讲解如何配置服务器端口,同时提供一个实用的Web工具来简化这一过程,希望对大家有所帮助... 目录1. Java Jar文件简介1.1 什么是Jar文件1.2 创建可执行Jar文件2. 使用java
阅读更多...
SpringBoot实现不同接口指定上传文件大小的具体步骤

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》：本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2
阅读更多...
Java实现在Word文档中添加文本水印和图片水印的操作指南

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java：高效Word文档处理的利器代码实战：使用Java为Wo
阅读更多...
SpringBoot日志级别与日志分组详解

SpringBoot日志级别与日志分组详解

《SpringBoot日志级别与日志分组详解》文章介绍了日志级别（ALL至OFF）及其作用,说明SpringBoot默认日志级别为INFO,可通过application.properties调整全局或... 目录日志级别1、级别内容2、调整日志级别调整默认日志级别调整指定类的日志级别项目开发过程中，利用日志
阅读更多...
Java中的抽象类与abstract 关键字使用详解

Java中的抽象类与abstract 关键字使用详解

《Java中的抽象类与abstract关键字使用详解》：本文主要介绍Java中的抽象类与abstract关键字使用详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、抽象类的概念二、使用 abstract2.1 修饰类 => 抽象类2.2 修饰方法 => 抽象方法，没有
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2