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五子棋之坐标校正

Java五子棋之坐标校正

上篇针对了Java项目中的解构思维，在这篇内容中我们不妨从整体项目中拆解拿出一个非常重要的五子棋逻辑实现：坐标校正，我们如何使漫无目的鼠标点击变得有序化和可控化呢？ 目录 一、从鼠标监听到获取坐标 1.MouseListener和MouseAdapter 2.mousePressed方法 二、坐标校正的具体实现方法 1.关于fillOval方法 2.坐标获取 3.坐标转换 4.坐
阅读更多...
Spring Cloud：构建分布式系统的利器

Spring Cloud：构建分布式系统的利器

引言 在当今的云计算和微服务架构时代，构建高效、可靠的分布式系统成为软件开发的重要任务。Spring Cloud 提供了一套完整的解决方案，帮助开发者快速构建分布式系统中的一些常见模式（例如配置管理、服务发现、断路器等）。本文将探讨 Spring Cloud 的定义、核心组件、应用场景以及未来的发展趋势。 什么是 Spring Cloud Spring Cloud 是一个基于 Spring
阅读更多...
Javascript高级程序设计(第四版)--学习记录之变量、内存

Javascript高级程序设计(第四版)--学习记录之变量、内存

原始值与引用值 原始值：简单的数据即基础数据类型，按值访问。 引用值：由多个值构成的对象即复杂数据类型，按引用访问。 动态属性 对于引用值而言，可以随时添加、修改和删除其属性和方法。 let person = new Object();person.name = 'Jason';person.age = 42;console.log(person.name,person.age);//'J
阅读更多...
java8的新特性之一（Java Lambda表达式）

java8的新特性之一（Java Lambda表达式）

1：Java8的新特性 Lambda 表达式： 允许以更简洁的方式表示匿名函数（或称为闭包）。可以将Lambda表达式作为参数传递给方法或赋值给函数式接口类型的变量。 Stream API： 提供了一种处理集合数据的流式处理方式，支持函数式编程风格。 允许以声明性方式处理数据集合（如List、Set等）。提供了一系列操作，如map、filter、reduce等，以支持复杂的查询和转
阅读更多...
UE3脚本UnrealScript UC语法点滴

UE3脚本UnrealScript UC语法点滴

持续更新 目录 类定义修饰符  1.dependson(CLASSNAME） 2.config(ININAME) 3.native 4.notplaceable 5.inherits(CLASSNAME1[,CLASSNAME2,...]) 类对象实例创建 类默认属性设置 变量 1.声明 var local 2.修饰符 config  3.array 类型变量 以及
阅读更多...
C++必修：模版的入门到实践

C++必修：模版的入门到实践

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ 🎈🎈养成好习惯，先赞后看哦~🎈🎈 所属专栏：C++学习 贝蒂的主页：Betty’s blog 1. 泛型编程 首先让我们来思考一个问题，如何实现一个交换函数？ void swap(int& x, int& y){int tmp = x;x = y;y = tmp;} 相信大家很快就能写出上面这段代码，但是如果要求这个交换函数支持字符型
阅读更多...
Java面试八股之怎么通过Java程序判断JVM是32位还是64位

Java面试八股之怎么通过Java程序判断JVM是32位还是64位

怎么通过Java程序判断JVM是32位还是64位 可以通过Java程序内部检查系统属性来判断当前运行的JVM是32位还是64位。以下是一个简单的方法： public class JvmBitCheck {public static void main(String[] args) {String arch = System.getProperty("os.arch");String dataM
阅读更多...
详细分析Springmvc中的@ModelAttribute基本知识（附Demo）

详细分析Springmvc中的@ModelAttribute基本知识（附Demo）

目录 前言1. 注解用法1.1 方法参数1.2 方法1.3 类 2. 注解场景2.1 表单参数2.2 AJAX请求2.3 文件上传 3. 实战4. 总结 前言 将请求参数绑定到模型对象上，或者在请求处理之前添加模型属性 可以在方法参数、方法或者类上使用 一般适用这几种场景： 表单处理：通过 @ModelAttribute 将表单数据绑定到模型对象上预处理逻辑：在请求处理之前
阅读更多...
eclipse运行springboot项目，找不到主类

eclipse运行springboot项目，找不到主类

解决办法尝试了很多种，下载sts压缩包行不通。最后解决办法如图： help--->Eclipse Marketplace--->Popular--->找到Spring Tools 3---->Installed。
阅读更多...
JAVA读取MongoDB中的二进制图片并显示在页面上

JAVA读取MongoDB中的二进制图片并显示在页面上

1：Jsp页面： <td><img src="${ctx}/mongoImg/show"></td> 2：xml配置： <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"xmlns:xsi="http://www.w3.org/2001
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2