欢迎您访问电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
您现在的位置是：首页 > 编程 > 

【ES6+】006

2025-07-26 00:13:53
【ES6+】006 一、Promise1、概述Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果； Promise 构造函数: Promise (excutor) {}； Promise.prototype.then 方法； Promise.prototype.catch 方法； 2、基本使用代码语

【ES6+】006

一、Promise

1、概述

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果；

  1. Promise 构造函数: Promise (excutor) {}；
  2. Promise. 方法；
  3. Promise. 方法；

2、基本使用

代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Promise</title>
	</head>
	<body>
		<script>
			// 实例化 Promise 对象
			// Promise 对象三种状态：初始化、成功、失败
			ct p = new Promise(function(resolve,reject){
				setTimeout(function(){
					// 成功
					// let data = "数据";
					// 调用resolve，这个Promise 对象的状态就会变成成功
					// resolve(data);
					// 失败
					let err = "失败了！";
					reject(err);
				},1000);
			});
			// 成功
			// 调用 Promise 对象的then方法，两个参数为函数
			(function(value){ // 成功
				cole.log(value);
			}, function(season){ // 失败
				cole.log(season);
			});
			
			
		</script>
	</body>
</html>
二、Promise封装读取文件

1、一般写法

代码实现：
代码语言：javascript代码运行次数：0运行复制
// 1、引入 fs 模块
ct fs = require("fs");

// 2、调用方法，读取文件
fs.readFile("resources/",(err,data)=>{
	// 如果失败则抛出错误
	if(err) throw err;
	// 如果没有出错，则输出内容
	cole.log(());
});
运行结果：

2、Promise封装

代码实现：
代码语言：javascript代码运行次数：0运行复制
// 1、引入 fs 模块
ct fs = require("fs");

// 2、调用方法，读取文件
// fs.readFile("resources/",(err,data)=>{
// 	// 如果失败则抛出错误
// 	if(err) throw err;
// 	// 如果没有出错，则输出内容
// 	cole.log(());
// });

// 、使用Promise封装
ct p = new Promise(function(resolve,data){
	fs.readFile("resources/",(err,data)=>{
		// 判断如果失败
		if(err) reject(err);
		// 如果成功
		resolve(data);
	});
});

(function(value){
	cole.log(());
},function(reason){
	cole.log(reason); // 读取失败
})
运行结果：
三、Promise封装Ajax请求

1、原生请求

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Promise封装Ajax请求</title>
	</head>
	<body>
		<script>
			// 请求地址：/getJoke
			// 原生请求
			// 1、创建对象
			ct xhr = new XMLHttpRequest();
			
			// 2、初始化
			("GET","/getJoke");
			
			// 、发送
			xhr.send();
			
			// 4、绑定事件，处理响应结果
			 = function(){
				// 判断状态
				if(xhr.readyState == 4){
					// 判断响应状态码 200-299
					if(xhr.status>=200 && xhr.status<=299){
						// 成功
						cole.log(xhr.respe);
					}else{
						// 失败
						(xhr.status);
					}
				}
			}
			
		</script>
	</body>
</html>
运行结果：

2、Promise封装Ajax请求

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Promise封装Ajax请求</title>
	</head>
	<body>
		<script>
			// 请求地址：/getJoke
			ct p = new Promise(function(resolve,reason){
				// 原生请求
				// 1、创建对象
				ct xhr = new XMLHttpRequest();
				
				// 2、初始化
				("GET","/getJoke");
				
				// 、发送
				xhr.send();
				
				// 4、绑定事件，处理响应结果
				 = function(){
					// 判断状态
					if(xhr.readyState == 4){
						// 判断响应状态码 200-299
						if(xhr.status>=200 && xhr.status<=299){
							// 成功
							resolve(xhr.respe);
						}else{
							// 失败
							reason(xhr.status);
						}
					}
				}
			});
			(function(value){
				cole.log(());
			},function(reason){
				cole.log(reason); // 读取失败
			})
		</script>
	</body>
</html>
运行结果：
四、Promise.

1、代码实现及相关说明

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Promise.</title>
	</head>
	<body>
		<script>
			// 创建 Promise 对象
			ct p = new Promise((resolve,reject) => {
				setTimeout(() => {
					resolve("用户数据");
				},1000);
			});
			// 调用then方法，then方法的返回结果是promise对象，
			// 对象的状态有回调函数的结果决定;
			ct result = (value => {
				cole.log(value);
				// 1、如果回调函数中返回的结果是 非promise 类型的数据，
				// 状态为成功，返回值为对象的成功值resolved
				// [[PromiseStatus]]:"resolved"
				// [[PromiseValue]]:12
				// return 12;
				// 2、如果...是promise类型的数据
				// 此Promise对象的状态决定上面Promise对象p的状态
				// return new Promise((resolve,reject)=>{
				// 	// resolve("ok"); // resolved
				// 	reject("ok"); // rejected
				// });
				// 、抛出错误
				// throw new Error("失败啦！");
				// 状态：rejected
				// value：失败啦！
			},reason => {
				(reason);
			})
			
			// 链式调用
			// then里面两个函数参数，可以只写一个
			(value=>{},reason=>{}).then(value=>{},reason=>{});
			
			cole.log(result);
		</script>
	</body>
</html>
运行结果：
五、Promise实践练习

1、“回调地狱”方式写法

代码实现：
代码语言：javascript代码运行次数：0运行复制
// 1、引入 fs 模块
ct fs = require("fs");

// 2、调用方法，读取文件
fs.readFile("resources/",(err,data1)=>{
	fs.readFile("resources/",(err,data2)=>{
		fs.readFile("resources/",(err,data)=>{
			let result = data1 + data2 + data;
			cole.log(result);
		});
	});
});
运行结果：

2、Promise实现

代码实现：
代码语言：javascript代码运行次数：0运行复制
// 1、引入 fs 模块
ct fs = require("fs");

// 2、调用方法，读取文件
// fs.readFile("resources/",(err,data1)=>{
// 	fs.readFile("resources/",(err,data2)=>{
// 		fs.readFile("resources/",(err,data)=>{
// 			let result = data1 + data2 + data;
// 			cole.log(result);
// 		});
// 	});
// });

// 、使用Promise实现
ct p = new Promise((resolve,reject)=>{
	fs.readFile("resources/",(err,data)=>{
		resolve(data);
	});
});

(value=>{
	return new Promise((resolve,reject)=>{
		fs.readFile("resources/",(err,data)=>{
			resolve([value,data]);
		});
	})
}).then(value=>{
	return new Promise((resolve,reject)=>{
		fs.readFile("resources/",(err,data)=>{
			// 存入数组
			value.push(data);
			resolve(value);
		});
	})
}).then(value=>{
	cole.log(value.join("\r\n"));
})
运行结果：
六、Promise对象catch方法

1、代码示例及相关说明

代码实现：
代码语言：javascript代码运行次数：0运行复制
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Promise对象catch方法</title>
	</head>
	<body>
		<script>
			// Promise对象catch方法
			ct p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					// 设置p对象的状态为失败，并设置失败的值
					reject("失败啦~！");
					
				},1000);
			})
			// (value=>{
			// 	cole.log(value);
			// },reason=>{
			// 	cole.warn(reason);
			// });
			
			(reason=>{
				cole.warn(reason);
			});
		</script>
	</body>
</html>
运行结果：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。 原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除fspromise对象函数数据

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1197576.html

相关标签：无
上传时间： 2025-07-23 09:24:15

上一篇：Word中单页横向排版设置指南

下一篇：【ES6+】005

推荐阅读

留言与评论（共有 20 条评论）
注册新账号 登录
本站网友 西安日语
26分钟前 发表
Promise.1
本站网友 紫云家园
9分钟前 发表
则输出内容 // cole.log(()); // }); //
本站网友 不得了
23分钟前 发表
Promise (excutor) {}； Promise. 方法； Promise. 方法； 2
本站网友 三峡青年网
28分钟前 发表
这个Promise 对象的状态就会变成成功 // resolve(data); // 失败 let err = "失败了！"; reject(err); }
本站网友 杨霄
5分钟前 发表
则输出内容 // cole.log(()); // }); //
本站网友 马尔代夫双人游
5分钟前 发表
原始发表：2025-01-06
本站网友 都发发企业名录网
9分钟前 发表
使用Promise封装 ct p = new Promise(function(resolve
本站网友 倩碧无油黄油
3分钟前 发表
则输出内容 // cole.log(()); // }); //
本站网友 东莞夜总会
12分钟前 发表
概述Promise 是 ES6 引入的异步编程的新解决方案
本站网友 知不足然后能自反也
20分钟前 发表
基本使用代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Promise</title> </head> <body> <script> // 实例化 Promise 对象 // Promise 对象三种状态：初始化
本站网友 补铁的水果有哪些
27分钟前 发表
"resolved" // [[PromiseValue]]
本站网友 亚东国际公寓
26分钟前 发表
原始发表：2025-01-06
本站网友 高温津贴
14分钟前 发表
(err
本站网友 头发软适合什么发型
1分钟前 发表
function(season){ // 失败 cole.log(season); }); </script> </body> </html>二
本站网友 嘀咕图片墙
24分钟前 发表
如有侵权请联系 cloudcommunity@tencent 删除前往查看fspromise对象函数数据
本站网友 成人长片
29分钟前 发表
Promise实践练习1
本站网友 有时候是什么歌
4分钟前 发表
读取文件 // fs.readFile("resources/"
本站网友 浏览器排行2015
7分钟前 发表
data1)=>{ // fs.readFile("resources/"
本站网友 外科
27分钟前 发表
"resolved" // [[PromiseValue]]