网站首页 > 博客文章 正文
概述：
Promise是ES6引入的异步编程新的解决方案，语法上Promise的一个构造函数，用来封装异步操作并可以获取成功或是失败的结果；
- Promise构造函数：Promise（excutor）{}；
- Promise.prototype.then()方法
- Promise.prototype.catch()方法
基本使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise</title>
</head>
<body>
<script>
//实例化Promise
//Promise的三种状态：初始化，成功，失败
const p = new Promise(function (resolve, reject) {
setTimeout(() => {
// //成功
// let data = "数据";
// //调用resolve，这个Promise对象状态就会变为成功
// resolve(data);
let err = "失败";
reject(err);
}, 1000);
});
//调用Promise的then()方法，两参数为传值
p.then((value) => {
console.log(value); //成功
}, (season) => {
console.log(season); //失败
})
</script>
</body>
</html>Promise封装读取文件：
//1.引入fs模块
const { log } = require("console");
const fs = require("fs");
//2.调用方法，读取文件
fs.readFile("G:/code/ES6/1.txt", (err, data) => {
//如果失败则抛出异常
if (err) {
throw err;
} else {
//正常输出内容
console.log(data.toString());
}
})运行结果：
Promise封装：
//1.引入fs模块
const fs = require("fs");
//2.使用Promise封装
const p = new Promise((resolve, data) => {
fs.readFile("E:/code/ES6/1.txt", (err, data) => {
//如果失败
if (err) reject(err)
//如果成功
resolve(data);
});
});
p.then((value) => {
console.log(value.toString());
}, (reason) => {
console.log(reason);//读取失败
});运行结果：
Promise封装Ajax请求：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise封装Ajax请求</title>
</head>
<body>
<script>
//请求地址：https://api.apiopen.top/getJoke
//原生
//1.创建对象
const xhr = new XMLHttpRequest();
let url = "https://api.apiopen.top/getJoke";
//2.初始化
xhr.open("GET", url);
//3.发送
xhr.send();
//4.绑定事件，处理响应结果
xhr.onreadystatechange = function () {
//判断状态
if (xhr.readyState = 4) {
//判断状态码200-299
if (xhr.states >= 200 && xhr.status <= 299) {
//成功
console.log(xhr.response);
} else {
//失败
console.error(xhr.status);
}
}
}
</script>
</body>
</html>运行结果：
Promise.prototype.then：
代码实现以及相关说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise.prototype.then</title>
</head>
<body>
<script>
//创建Promise对象
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("用户数据");
}, 1000);
});
//调用then方法，返回的是Promise对象
//对象的状态由回调函数的结果决定
const result = p.then(value => {
console.log(value);
//1.如果返回结果中是非Promise类型数据
//状态为成功，返回值为对象的成功值resolved
// [[PromiseStatus]]:"resolved"
// [[PromiseValue]]:123
// return 123
//2.如果...是Promise类型的数据
//此Promise对象的状态决定上面Promise对象p的状态
// return new Promise((resolve, reject) => {
// resolve("ok"); //resolve
// reject("ok"); //reject
// });
//3.抛出异常
throw new Error("失败了！");
//状态：reject
//value：失败了
}, reason => {
console.error(reason);
});
//链式调用
//then()里面的两个函数参数，可以只写一个
p.then(value => {}, resolve => {}).then(value => {}, reason => {});
console.log(result);
</script>
</body>
</html>运行结果：
Promise实践练习：
“回调地狱”方式写法：
//1.引入fs模块
const fs = require("fs");
//2.调用方法，读取文件
fs.readFile("G:/code/ES6/1.txt", (err, data1) => {
fs.readFile("G:/code/ES6/2.txt", (err, data2) => {
fs.readFile("G:/code/ES6/3.txt", (err, data3) => {
let result = data1 + data2 + data3;
console.log(result);
});
});
});运行结果：
Promise实现：
//1.引入fs模块
const fs = require("fs");
//2.使用Promise实现
const p = new Promise((resolve, reject) => {
fs.readFile("G:/code/ES6/1.txt", (err, data) => {
resolve(data)
});
}).then(value => {
return new Promise((resolve, reject) => {
fs.readFile("G:/code/ES6/2.txt", (err, data) => {
resolve([value, data]);
});
})
}).then(value => {
return new Promise((resolve, reject) => {
fs.readFile("G:/code/ES6/3.txt", (err, data) => {
//存入数组
value.push(data);
resolve(value);
});
})
}).then(value => {
console.log(value.join("\r\n"));
});
运行结果：
Promise对象的catch方法：
代码示例及相关说明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise对象的cath方法</title>
</head>
<body>
<script>
//Promise对象的cath方法
const p = new Promise((resolve, reject) => {
setTimeout(() => {
//设置p对象的状态失败，并设置失败的值
reject("失败啦~！");
}, 1000);
});
// p.then(value => {
// console.log(value);
// }, reason => {
// console.warn(reason);
// });
p.catch(reason => {
console.warn(reason);
});
</script>
</body>
</html>运行结果：
猜你喜欢
- 2024-10-27 前端面试大全:手写 Promise（前端手机端面试题）
- 2024-10-27 Javascript ES6中 Generator的?async/await Promise 了解一下?
- 2024-10-27 Promise 中 race 方法的目的是什么
- 2024-10-27 ES6 Promise对象（es6对象操作）
- 2024-10-27 ES6 Promise 的最佳实践（es6 promise作用）
- 2024-10-27 ES6学习(17):彻底搞懂 async 和 await，轻松掌握异步编程!
- 2024-10-27 自己造轮子，超详细、简单的Promise对象原理讲解及代码实现
- 2024-10-27 JavaScript ES6 语法特性介绍（javascript的基本语法遵循的标准是____。）
- 2024-10-27 图解 Promise 实现原理(一):基础实现
- 2024-10-27 可视化的 js:动态图演示 Promises & Async/Await 的过程
欢迎 你 发表评论:
- 06-23MySQL合集-mysql5.7及mysql8的一些特性
- 06-23MySQL CREATE TABLE 简单设计模板交流
- 06-23MYSQL表设计规范（mysql设计表注意事项）
- 06-23MySQL数据库入门(四)数据类型简介
- 06-23数据丢失?别慌!MySQL备份恢复攻略
- 06-23MySQL设计规范（mysql 设计）
- 06-23MySQL数据实时增量同步到Elasticsearch
- 06-23MySQL 避坑指南之隐式数据类型转换
- 最近发表
- 标签列表
-
- powershellfor (55)
- messagesource (56)
- aspose.pdf破解版 (56)
- promise.race (63)
- 2019cad序列号和密钥激活码 (62)
- window.performance (66)
- qt删除文件夹 (72)
- mysqlcaching_sha2_password (64)
- ubuntu升级gcc (58)
- nacos启动失败 (64)
- ssh-add (70)
- jwt漏洞 (58)
- macos14下载 (58)
- yarnnode (62)
- abstractqueuedsynchronizer (64)
- source~/.bashrc没有那个文件或目录 (65)
- springboot整合activiti工作流 (70)
- jmeter插件下载 (61)
- 抓包分析 (60)
- idea创建mavenweb项目 (65)
- vue回到顶部 (57)
- qcombobox样式表 (68)
- vue数组concat (56)
- tomcatundertow (58)
- pastemac (61)
本文暂时没有评论，来添加一个吧(●'◡'●)