Promise从入门到提高实战教程

news/2024/9/29 14:14:54/

一、Promiss 介绍

Promise是一门新的技术(ES6规范),是JS中进行异步编程的新解决方案。
从语法上说,他是一个构造函数,Promise对象用来封装一个异步操作并可以获取成功/失败的结果值。(也就是包裹一个异步操作)创造Promise实例时,必须传入一个函数作为参数,一般传递一个匿名函数(箭头函数),这个函数有两个参数,resolve,reject。

回调函数:是指一个函数作为参数传递给另一个函数,并在特定事件发生或条件满足时被调用执行的函数。

二、使用的基本格式

//1、创建方式
new Promise(() => {});  //正确
new Promise();          // 报错
//2、基本结构
new Promise((resolve,reject)=>{})
//3、使用结构框架
let promise = new Promise((resolve, reject) => {// 这里一般包裹一个异步请求if (true) {// 接受/成功将参数返回,供then方法使用resolve("value");} else {// 失败/拒绝将参数返回,供then方法使用reject("error");}
});
promise.then((value)=>{// 接受/成功的时候执行的代码(已经执行了resolve())
},(error)=>{// 失败/拒绝的时候执行的代码(已经执行了reject())
})

Promiss 有三种状态,pending, resolve, reject
执行的结果:
pending—>resolve(fulfilled)
pending—>reject

三、常见异步编程

1)fs:是node下面的一个js模块,对计算机的磁盘进行读写操作

require('fs').readFile('./index.html',(err,data)=>{})

2)数据库操作

3)AJAX

$.get('/server',(data)=>{})

4)定时器 setTimeout()

setTimeout(()=>{},3000)

上面都是使用回调函数来实现的,而且必须在启动异步任务前置顶。

Promise 支持链式调用,可以解决回调地狱问题。

promise:启动异步任务 ==> 返回promise对象 ==> 给promise对象绑定回调函数。

setTimeout(()=>{console.log("等待3秒后显示")setTimeout(()=>{console.log("之后再等待3秒后显示")setTimeout(()=>{console.log("之后再继续等待3秒后显示")},3000)},3000)
},3000)
//不便阅读,不便于异常处理

四、基础实例

总结:Promise的对象包裹一个异步请求,如果成功则调用resolve(), 如果失败则调用reject(),这两个返回都可以携带参数。然后对象调用then方法,它有两个函数类型的参数,第一参数是成功时的返回值第二个参数是失败时的返回值。如果成功了,调用第一个参数里面的代码,如果失败了,调用第二个参数里面的代码。

1、实例1-封装绑定事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo2</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container"><h2 class="page-header">Promise 初体验</h2><button class="btn btn-primary" id="btn">点击抽奖</button></div><script>javascript">//生成随机数function rand(m,n){return Math.ceil(Math.random()*(n-m+1)) + m -1;}//获取元素对象const btn = document.querySelector("#btn")//绑定单击事件btn.addEventListener('click',function(){// 1、使用原始的方法/*setTimeout(()=>{let n = rand(1,100)if(n<=30){alert("恭喜中奖")}else{alert("再接再厉")}},1000)*///2、使用Promiss(包裹一个异步请求)const p = new Promise((resolve,reject)=>{setTimeout(()=>{let n = rand(1,100)if(n<=30){//执行此方法,将Promiss的对象的状态修设置为“成功”resolve(n)  //成功,可以传递参数//alert("恭喜中奖")}else{//执行此方法,将Promiss的对象的状态修设置为“失败”reject(n)   //失败,可以传递参数//alert("再接再厉")}},1000)})/*then接收两个参数,而且这两个参数都是函数类型的值第一个参数是成功时候的回调;第二个参数是失败时候的回调这里的value和reason都是形参,但是一般都使用这个单词,属于潜规则,就和上面的resolve,reject一样,也可以自己随便起名。*/p.then((value)=>{console.log("恭喜中奖" + value)},(reason)=>{console.log("再接再厉" + reason)})})</script>
</body>
</html>

2、实例2-封装fs读取文件

读取某个文件夹下的文件,并返回内容

const fs = require('fs');
const { resolve } = require('path');
// 1、回调函数的形式
/*
fs.readFile('./resource/content.txt',(err,data)=>{//err 是读取错误, 直接抛出错误if(err) throw err;// 如果没有错误,直接输出内容,他输出的buffer(十六进制)。//console.log(data); //<Buffer e6 88 91 e6 98 af 74 78 74 e6 96 87 e4 bb b6 e4 b8 ad e7 9a 84 e5 86 85 e5 ae b9>console.log(data.toString())
})
*/
//2, Promise的形式
const p = new Promise((resolve,reject)=>{fs.readFile('./resource/content.txt',(err,data)

http://www.ppmy.cn/news/1531947.html

相关文章

【FastAPI】使用 SQLAlchemy 和 FastAPI 实现 PostgreSQL 中的 JSON 数据 CRUD 操作

在现代 web 开发中&#xff0c;处理 JSON 数据变得越来越普遍。本文将指导你如何使用 FastAPI 和 SQLAlchemy 实现对 PostgreSQL 数据库中 JSON 数据的增删改查&#xff08;CRUD&#xff09;操作。 环境准备 首先&#xff0c;确保你已经安装了所需的库。在终端中运行以下命令…

RPA助力企业办公流程自动化:真实应用案例展示

在当今快速变化的商业环境中&#xff0c;企业面临着前所未有的挑战和机遇。数字化转型已成为企业提升竞争力、优化运营效率和增强客户体验的关键策略。RPA数字员工作为这一转型过程中的重要工具&#xff0c;正在帮助企业实现办公流程的自动化&#xff0c;从而加速数字化转型的步…

node后端react前端简单实例

安装node mkdir my-node-server cd my-node-server npm init -y npm install express cors 创建 server.js文件 const express require(express); const cors require(cors); const app express(); const PORT 4000; app.use(cors()); // 允许跨域请求 app.get(/api…

[java][git]git学习

Git 什么是Git? Git是一款源代码管理工具(版本控制工具) 我们写的代码需要使用Git进行管理。 源代码有必要管理起吗&#xff1f;1.02.0 //svn,vss,vcs… git有必要&#xff0c;因为人工的去处理不同的版本&#xff0c;做相应备份会很麻烦。Git是linux之父当年为了维护linux—…

浅谈C++之线程管理

一、基本介绍 C11 提供了强大的多线程支持&#xff0c;涵盖了线程的创建、同步、共享数据管理等&#xff0c;极大简化了多线程编程的复杂性。 线程&#xff1a;一个程序执行流的最小单位。每个线程都有自己的程序计数器、栈、寄存器等。多线程&#xff1a;程序可以同时执行多个…

JIT(Just-In-Time)

JIT&#xff08;Just-In-Time&#xff09;即时编译是一种在程序运行时动态编译字节码为机器码的技术&#xff0c;常用于提高代码执行效率。它结合了解释型语言的灵活性与编译型语言的高效性。 JIT 的工作原理 字节码执行&#xff1a;JIT 编译器首先会以字节码的形式执行代码&…

BERT训练环节(代码实现)

1.代码实现 #导包 import torch from torch import nn import dltools #加载数据需要用到的声明变量 batch_size, max_len 1, 64 #获取训练数据迭代器、词汇表 train_iter, vocab dltools.load_data_wiki(batch_size, max_len) #其余都是二维数组 #tokens, segments, vali…

WPF DataGridTextColumn 时间列格式设置

WPF DataGridTextColumn 时间列格式设置 可以使用 Binding.StringFormat 来进行设置&#xff1a; <DataGridTextColumn Header"记录时间" Binding"{Binding ErrTime,StringFormatyyyy年MM月dd日 HH:mm:ss}"></DataGridTextColumn>