【ES6+】006-ES6新特性：Promise

淡淡的烟草味﹌ 2023-10-05 16:05 64阅读 0赞

目录

一、Promise

1、概述

2、基本使用

二、Promise封装读取文件

1、一般写法

代码实现：

运行结果：

2、Promise封装

代码实现：

运行结果：

三、Promise封装Ajax请求

1、原生请求

代码实现：

运行结果：

2、Promise封装Ajax请求

代码实现：

运行结果：

四、Promise.prototype.then

1、代码实现及相关说明

代码实现：

运行结果：

五、Promise实践练习

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

代码实现：

运行结果：

2、Promise实现

代码实现：

运行结果：

六、Promise对象catch方法

1、代码示例及相关说明

代码实现：

运行结果：

一、Promise

1、概述

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

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

2、基本使用

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Promise</title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             // 实例化 Promise 对象
  10.             // Promise 对象三种状态：初始化、成功、失败
  11.             const p = new Promise(function(resolve,reject){
  12.                 setTimeout(function(){
  13.                     // 成功
  14.                     // let data = "数据";
  15.                     // 调用resolve，这个Promise 对象的状态就会变成成功
  16.                     // resolve(data);
  17.                     // 失败
  18.                     let err = "失败了！";
  19.                     reject(err);
  20.                 },1000);
  21.             });
  22.             // 成功
  23.             // 调用 Promise 对象的then方法，两个参数为函数
  24.             p.then(function(value){ // 成功
  25.                 console.log(value);
  26.             }, function(season){ // 失败
  27.                 console.log(season);
  28.             });
  31.         </script>
  32.     </body>
  33. </html>

二、Promise封装读取文件

1、一般写法

代码实现：

  1. // 1、引入 fs 模块
  2. const fs = require("fs");
  4. // 2、调用方法，读取文件
  5. fs.readFile("resources/text.txt",(err,data)=>{
  6.     // 如果失败则抛出错误
  7.     if(err) throw err;
  8.     // 如果没有出错，则输出内容
  9.     console.log(data.toString());
  10. });

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70

2、Promise封装

代码实现：

  1. // 1、引入 fs 模块
  2. const fs = require("fs");
  4. // 2、调用方法，读取文件
  5. // fs.readFile("resources/text.txt",(err,data)=>{
  6. //     // 如果失败则抛出错误
  7. //     if(err) throw err;
  8. //     // 如果没有出错，则输出内容
  9. //     console.log(data.toString());
  10. // });
  12. // 3、使用Promise封装
  13. const p = new Promise(function(resolve,data){
  14.     fs.readFile("resources/text.txt",(err,data)=>{
  15.         // 判断如果失败
  16.         if(err) reject(err);
  17.         // 如果成功
  18.         resolve(data);
  19.     });
  20. });
  22. p.then(function(value){
  23.     console.log(value.toString());
  24. },function(reason){
  25.     console.log(reason); // 读取失败
  26. })

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1

三、Promise封装Ajax请求

1、原生请求

代码实现：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Promise封装Ajax请求</title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             // 请求地址：https://api.apiopen.top/getJoke
  10.             // 原生请求
  11.             // 1、创建对象
  12.             const xhr = new XMLHttpRequest();
  14.             // 2、初始化
  15.             xhr.open("GET","https://api.apiopen.top/getJoke");
  17.             // 3、发送
  18.             xhr.send();
  20.             // 4、绑定事件，处理响应结果
  21.             xhr.onreadystatechange = function(){
  22.                 // 判断状态
  23.                 if(xhr.readyState == 4){
  24.                     // 判断响应状态码 200-299
  25.                     if(xhr.status>=200 && xhr.status<=299){
  26.                         // 成功
  27.                         console.log(xhr.response);
  28.                     }else{
  29.                         // 失败
  30.                         console.error(xhr.status);
  31.                     }
  32.                 }
  33.             }
  35.         </script>
  36.     </body>
  37. </html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2

2、Promise封装Ajax请求

代码实现：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Promise封装Ajax请求</title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             // 请求地址：https://api.apiopen.top/getJoke
  10.             const p = new Promise(function(resolve,reason){
  11.                 // 原生请求
  12.                 // 1、创建对象
  13.                 const xhr = new XMLHttpRequest();
  15.                 // 2、初始化
  16.                 xhr.open("GET","https://api.apiopen.top/getJoke");
  18.                 // 3、发送
  19.                 xhr.send();
  21.                 // 4、绑定事件，处理响应结果
  22.                 xhr.onreadystatechange = function(){
  23.                     // 判断状态
  24.                     if(xhr.readyState == 4){
  25.                         // 判断响应状态码 200-299
  26.                         if(xhr.status>=200 && xhr.status<=299){
  27.                             // 成功
  28.                             resolve(xhr.response);
  29.                         }else{
  30.                             // 失败
  31.                             reason(xhr.status);
  32.                         }
  33.                     }
  34.                 }
  35.             });
  36.             p.then(function(value){
  37.                 console.log(value.toString());
  38.             },function(reason){
  39.                 console.log(reason); // 读取失败
  40.             })
  41.         </script>
  42.     </body>
  43. </html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3

四、Promise.prototype.then

1、代码实现及相关说明

代码实现：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Promise.prototype.then</title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             // 创建 Promise 对象
  10.             const p = new Promise((resolve,reject) => {
  11.                 setTimeout(() => {
  12.                     resolve("用户数据");
  13.                 },1000);
  14.             });
  15.             // 调用then方法，then方法的返回结果是promise对象，
  16.             // 对象的状态有回调函数的结果决定;
  17.             const result = p.then(value => {
  18.                 console.log(value);
  19.                 // 1、如果回调函数中返回的结果是 非promise 类型的数据，
  20.                 // 状态为成功，返回值为对象的成功值resolved
  21.                 // [[PromiseStatus]]:"resolved"
  22.                 // [[PromiseValue]]:123
  23.                 // return 123;
  24.                 // 2、如果...是promise类型的数据
  25.                 // 此Promise对象的状态决定上面Promise对象p的状态
  26.                 // return new Promise((resolve,reject)=>{
  27.                 //     // resolve("ok"); // resolved
  28.                 //     reject("ok"); // rejected
  29.                 // });
  30.                 // 3、抛出错误
  31.                 // throw new Error("失败啦！");
  32.                 // 状态：rejected
  33.                 // value：失败啦！
  34.             },reason => {
  35.                 console.error(reason);
  36.             })
  38.             // 链式调用
  39.             // then里面两个函数参数，可以只写一个
  40.             p.then(value=>{},reason=>{}).then(value=>{},reason=>{});
  42.             console.log(result);
  43.         </script>
  44.     </body>
  45. </html>

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 4

五、Promise实践练习

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

代码实现：

  1. // 1、引入 fs 模块
  2. const fs = require("fs");
  4. // 2、调用方法，读取文件
  5. fs.readFile("resources/text.txt",(err,data1)=>{
  6.     fs.readFile("resources/test1.txt",(err,data2)=>{
  7.         fs.readFile("resources/test2.txt",(err,data3)=>{
  8.             let result = data1 + data2 + data3;
  9.             console.log(result);
  10.         });
  11.     });
  12. });

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 5

2、Promise实现

代码实现：

  1. // 1、引入 fs 模块
  2. const fs = require("fs");
  4. // 2、调用方法，读取文件
  5. // fs.readFile("resources/text.txt",(err,data1)=>{
  6. //     fs.readFile("resources/test1.txt",(err,data2)=>{
  7. //         fs.readFile("resources/test2.txt",(err,data3)=>{
  8. //             let result = data1 + data2 + data3;
  9. //             console.log(result);
  10. //         });
  11. //     });
  12. // });
  14. // 3、使用Promise实现
  15. const p = new Promise((resolve,reject)=>{
  16.     fs.readFile("resources/text.txt",(err,data)=>{
  17.         resolve(data);
  18.     });
  19. });
  21. p.then(value=>{
  22.     return new Promise((resolve,reject)=>{
  23.         fs.readFile("resources/test1.txt",(err,data)=>{
  24.             resolve([value,data]);
  25.         });
  26.     })
  27. }).then(value=>{
  28.     return new Promise((resolve,reject)=>{
  29.         fs.readFile("resources/test2.txt",(err,data)=>{
  30.             // 存入数组
  31.             value.push(data);
  32.             resolve(value);
  33.         });
  34.     })
  35. }).then(value=>{
  36.     console.log(value.join("\r\n"));
  37. })

运行结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 6

六、Promise对象catch方法

1、代码示例及相关说明

代码实现：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>Promise对象catch方法</title>
  6.     </head>
  7.     <body>
  8.         <script>
  9.             // Promise对象catch方法
  10.             const p = new Promise((resolve,reject)=>{
  11.                 setTimeout(()=>{
  12.                     // 设置p对象的状态为失败，并设置失败的值
  13.                     reject("失败啦~！");
  15.                 },1000);
  16.             })
  17.             // p.then(value=>{
  18.             //     console.log(value);
  19.             // },reason=>{
  20.             //     console.warn(reason);
  21.             // });
  23.             p.catch(reason=>{
  24.                 console.warn(reason);
  25.             });
  26.         </script>
  27.     </body>
  28. </html>

运行结果：

20201218082919911.png

发表评论

表情：
评论列表 （有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

    相关 es6新特性

    1.let && const •都是块级作用域 •不能重复定义 •避免了变量提升 ① let命令也用于声明对象，但是作用域为局部。 ![在这里插入图片描述][

    红太狼红太狼/ 0 赞/ 467 阅读

    相关 es6新特性

    es6语法 > es6语法用起来是十分方便的，但是有些浏览器还是不支持，但是做大型项目中基本上要用到转码器（babel转码器），可以把es6语法转为es5直接使用。 T

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 463 阅读

    相关 ES6新特性

    1.变量声明let和const 在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

    我会带着你远行我会带着你远行/ 0 赞/ 630 阅读

    相关 ES6新特性

    1.声明变量的关键字：const 和 let JavaScript ES6中引入了另外两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。 co

    电玩女神电玩女神/ 0 赞/ 617 阅读