ES6（ECMASript 6 新特性---Promise）

已于 2022-08-21 16:45:01 修改
阅读量448 收藏 1
点赞数 1
分类专栏： ES6 文章标签： es6
于 2022-08-21 16:44:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51249285/article/details/126452403
版权

文章目录

2.12. Promise

2.12.1 Promise 介绍与基本使用

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

异步编程 主要指的是IO的代码（文件IO，数据库IO，网络请求）。解决方案：解决回调地狱问题。

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

创造了一个Promise实例

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

eg. 1-Promise基本语法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Promise基本语法</title>
</head>
<body>
    <script>
        //实例化 Promise 对象
        const p = new Promise(function(resolve, reject){
          // 封装一个异步操作 这里用定时器做一个表示  
            setTimeout(function(){
                // 得到一些数据
                // let data = '数据库中的用户数据';
                
                // 可以调用resolve, reject这两个函数来改变Promise对象的状态（初始化，成功，失败）
                // resolve(data);
                // 当调用完resolve函数，Promise对象状态就变成了成功，成功之后就可以调用promise 对象的 then 方法

                let err = '数据读取失败';
                
                // 如果失败，调用reject函数，调用完，Promise对象状态就变成了失败，调用then方法里面的第二个回调函数
                reject(err);
            }, 1000);
        });

        //调用 promise 对象的 then 方法
        // then方法接收两个参数，两个都是函数类型的值，而且每一个函数都有一个形参，成功的一般叫value，失败的叫reason
        p.then(function(value){
            console.log(value);
        }, function(reason){
            console.error(reason);
        })
    </script>
</body>
</html>

2.12.2 Promise封装读取文件

会用到nodejs里面的一些api,读取的是：resources文件夹里面的 为学.md

//1. 引入 fs 模块
const fs = require('fs');

// 2. 调用方法读取文件(没有使用promise)
// fs.readFile('./resources/为学.md', (err, data)=>{
//     //如果失败, 则抛出错误
//     if(err) throw err;
//     //如果没有出错, 则输出内容
//     console.log(data.toString());
// });

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

p.then(function(value){
    console.log(value.toString());
}, function(reason){
    console.log("读取失败!!");
});

操作显示：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

上面代码中 2 调用方法读取文件 的方法代码少一些，但是一般都是用promise封装，因为单个任务看不出来效果，如果有多个异步任务，使用调用方法读取文件方法，代码就要不断缩减，使用promise封装，就不会持续缩进。

2.12.3 Promise封装Ajax

使用原生Ajax，向url发送请求

<!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>Document</title>
</head>
<body>
  <script>
    // 使用原生Ajax，向url发送请求
    const xhr = new XMLHttpRequest();

    xhr.open("GET", "https://api.apiopen.top/getJoke");

    xhr.send();

    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        if(xhr.status >= 200 && xhr.status < 300 ) {
          console.log(xhr.response);
        }else {
          console.error(xhr.status);
        }
      }
    }
  </script>
</body>
</html>

接口失效，然后有点问题（代码没有问题），还未解决

使用Promise方式对这个进行个封装

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送 AJAX 请求</title>
</head>

<body>
    <script>
        // 接口地址: https://api.apiopen.top/getJoke
        const p = new Promise((resolve, reject) => {
            //1. 创建对象
            const xhr = new XMLHttpRequest();

            //2. 初始化
            xhr.open("GET", "https://api.apiopen.top/getJ");

            //3. 发送
            xhr.send();

            //4. 绑定事件, 处理响应结果
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    //判断响应状态码 200-299
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //表示成功
                        resolve(xhr.response);
                    } else {
                        //如果失败
                        reject(xhr.status);
                    }
                }
            }
        })
        
        //指定回调
        p.then(function(value){
            console.log(value);
        }, function(reason){
            console.error(reason);
        });
    </script>
</body>

</html>

2.12.4 Promise-then方法

eg. Promise-then方法.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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('用户数据');
                // reject('出错啦');
            }, 1000)
        });

        //调用 then 方法  then方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
        //1. 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值

        // const result = p.then(value => {
        //     console.log(value);
        //     //1. 非 promise 类型的属性
        //     // return 'iloveyou';
        //     //2. 是 promise 对象
        //     // return new Promise((resolve, reject)=>{
        //     //     // resolve('ok');
        //     //     reject('error');
        //     // });
        //     //3. 抛出错误
        //     // throw new Error('出错啦!');
        //     throw '出错啦!';
        // }, reason=>{
        //     console.warn(reason);
        // });

        //链式调用 
        // then 方法在指定回调可以只指定一个，可以不写失败
        p.then(value=>{

        }).then(value=>{

        });


    </script>
</body>
</html>

回调执行特点
在这里插入图片描述
在这里插入图片描述

关于then返回的结果

返回结果是由回调函数的执行结果决定的。then返回结果是promise对象，对象状态由回调函数的执行结果决定

Promise一共有三种状态： 未决定的：pending 成功：resolved、fulfilled 失败：rejected

  • 如果回调函数中返回的结果是 非 promise 类型的属性, 状态为成功, 返回值为对象的成功的值
  • 如果是 Promise对象 内部返回Promise状态就决定then方法返回的Promise状态

在这里插入图片描述
在这里插入图片描述

2.12.5 Promise实践-读取多个文件

挨个读取文件夹里面的md文件

1 引用 fs 模块

//引入 fs 模块
const fs = require('fs');

fs.readFile('./resources/为学.md', (err,data1)=>{
  fs.readFile('./resources/插秧诗.md', (err,data2)=>{
    fs.readFile('./resources/观书有感.md', (err,data3)=>{
      // 对上面三个文件做一个连接
      let result = data1 + data2 + data3;
      console.log(result);
    });
  });
});

在这里插入图片描述

实际项目一般不会这种写法，回调地狱。但有这种场景，比如数据库读取，先读取用户，才能有后续的读取内容

跟教学视频学习时老师的是直接 右键 run code 实现，但我的显示 undefined，这个问题没有解决。 然后换了个方式，打开终端，输入指令 node 6-Promise实践-读取多个文件.js，读取文件成功。

使用 promise 实现

// 引入 fs 模块
const fs = require("fs");

// fs.readFile('./resources/为学.md', (err, data1)=>{
//     fs.readFile('./resources/插秧诗.md', (err, data2)=>{
//         fs.readFile('./resources/观书有感.md', (err, data3)=>{
//             let result = data1 + '\r\n' +data2  +'\r\n'+ data3;
//             console.log(result);
//         });
//     });
// });

// 使用 promise 实现
const p = new Promise((resolve, reject) => {
    fs.readFile("./resources/为学.md", (err, data) => {
        resolve(data);
    });
});

p.then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            resolve([value, data]);
        });
    });
}).then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            //压入
            value.push(data);
            resolve(value);
        });
    })
}).then(value => {
    console.log(value.join('\r\n'));
});

在这里插入图片描述

如果出现buffer的情况在这里插入图片描述

加一个toString()即可 (value. toString())

2.12.6 Promise对象catch方法

指定Promise对象失败的一个回调

eg. Promise-catch方法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>catch方法</title>
</head>
<body>
    <script>
        const p = new Promise((resolve, reject)=>{
            setTimeout(()=>{
                //设置 p 对象的状态为失败, 并设置失败的值
                reject("出错啦!");
            }, 1000)
        });

        // p.then(function(value){}, function(reason){
        //     console.error(reason);
        // });

        p.catch(function(reason){
            console.warn(reason);
        });
    </script>
</body>
</html>

由then方法不指定第一个参数，结果就跟catch一样

香甜的甲基橙
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6必学必会新特性之Promise介绍及使用
道阻且长
09-02 520
ES6必学必会新特性之Promise介绍及使用
ES6新特性Promise详解
Ran_Cheng_wei的博客
01-13 1066
在ES6当中添加了很多新的API其中很值得一提的当然少不了Promise，因为Promise的出现，很轻松的就给开发人员解决了异步回调地狱的问题，废话不多，直接上代码： 在以前我们有个一个异步函数，而且还会有返回值给别的功能函数使用，函数如下： //异步函数延时两秒执行 function testA() { setTimeout(function () { return 2
ES6-ES11学习入门
2401_84097883的博客
04-19 601
判断数组中是否包含某元素，语法：arr.includes(元素值)；2、指数操作符幂运算的简化写法，例如：2的10次方：2**10；1、async 和 await简化异步函数的写法；2、对象方法扩展对象方法扩展；
ES6值新特性--Promise
sinat_25953607的博客
03-25 170
这里写自定义目录标题promise问题：你了解promise吗？基本用法：状态：Promise对象有以下2个特点：基本的api两个附加方法 promise 问题：你了解promise吗？ promise是一个对象，用来传递异步操作的消息。通过promise提供的统一的API，可以对异步操作的结果做进一步处理，使得控制异步操作更加容易。 promise的构造函数接收一个参数，这个参数是一个函数，并...
ES6特性：Promise
lalala_dxf的博客
05-12 330
Promise 1、简介 Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理和更强大。 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。 Promise对象提供统一的接口，使得控制异步操
fs+es6 class类实现文件的拷贝与找目录中的最大文件
adisonW的博客
07-18 347
const {join, basename} = require('path'); const {readdirSync, statSync, existsSync, mkdirSync, readFileSync, writeFileSync, createReadStream, createWriteStream} = require('fs'); /** * [FileSystem] 用于...
快速学习ES6新特性-Promise
01-07
1.7、Promise 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步...
es6-promise
04-02
es6-promise.auto.js ,可用于微信小程序开发，小程序里需要
前端开源库-es6-promise-pool
08-29
前端开源库-es6-promise-poolES6 Promise池，在限制并发性的池中运行Promise。
es6-promise@4.1.1.zip
06-18
在 JavaScript 中，所有代码都是单线程的，也就是同步执行的。而 Promise 就为异步编程提供了一种解决方案。
study-es6promise:学习es6-promise
06-02
使用es6-promise获取按指定顺序执行异步处理的样本地府代码（pref），然后与城市代码（city）一起获取。 将都道府县代码指定为参数例如节点 sample01-nodejs.js 东京
ES6 | Promise + Set + Map + class类 + 数值扩展 + 对象方法扩展 + 模块化
不爱吃菜的菜菜的博客
06-19 320
是 ES6 引入的异步编程的新解决方案。(解决回调地狱） 所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说， 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 用Promise读取文件 Promise 封装Ajax Promise-then方法 Promise实践-读取多个文件 Promise-catch方法 方法是.then(null, rejection)或.
模块化历程--ES6
刘荣丹的日志
06-06 659
一、模块化需要解决的问题 1. 如何安全的包装一个模块的代码？（不污染模块外的任何代码） 2. 如何唯一标识一个模块？ 3. 如何优雅的把模块的API暴漏出去？（不能增加全局变量） 4. 如何方便的使用所依赖的模块？ 二、模块化的历程 1）CommonJS原来名字为ServerJS服务与后端 1. 模块的标识应遵循的规则（书写规范） 2. 定义全局函数require，通过传入模块标...
ES6特性解释
疯狂紫萧
08-21 756
let和const let在块级作用域有效。不存在之前的var的作用域提升。 const意思是只读的变量。不可以在声明之后再改变值。 const指向对象的时候，对象可以改变属性，但是对象不能变。 { let a=1; } for(let i=0;i<10;i++){ }变量的解构1.数组的解构。 左边的变量对等于右边的值。 值的长度可变，不存在则等于undefined
es6标准入门教程学习（七）
Cu50moon的博客
03-01 116
19.async函数 Generator函数的语法糖（*-> async yield->await）async 函数返回值是个Promise对象，可以用then制定下一步操作 const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile(fileName, function(error,..
普歌-飞灵团队-ES6汇总
fsmj_的博客
08-16 584
ES6新特性 一、let关键字 let 关键字用来声明变量，使用 let 声明的变量有几个特点： 不允许重复声明 块儿级作用域 不存在变量提升（不允许在声明变量前使用） 不影响作用域链 应用场景：以后声明变量使用 let 就对了 二、const关键字 const 关键字用来声明常量，const 声明有以下特点： 必须要赋初始值 一般常量使用大写（潜规则） 不允许重复声明 常量的值不能修改 块儿级作用域 对于对象属性和数组元素的修改, 不算做对常量的修改, 不会报错 应用场景：声明对象或数组类型使
import()实现模块动态加载
weixin_44967971的博客
08-14 2642
CommonJS模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。1.ES6模块为“编译时加载”（也叫静态加载）即ES6可以在编译时候完成模块加载，效率要高于CommonJS模块。即如果上述引用改变fs.stat属性值，原模块值也会改变。命令输入的变量都是只读的，因为它的本质是输入接口。不允许在加载模块的脚本里面，改写接口。CommonJS模块只有在运行时候才能确定输入输出变量，这种加载称为“运行时加载”。模块输出的是一个值的拷贝，模块输出的是值的引用。.
Node fs文件系统模块总结
路虽远，行则必至！
08-22 767
一、fs (文件系统) 在 Node 中，与文件系统的交互是非常重要的，服务器的本质就将本地的文件发送给远程的客户端。 Node 通过 fs 模块来和文件系统进行交互。 该模块提供了一些标准文件访问 API 来打开、 读取、写入文件，以及与其交互。 要使用 fs 模块，首先需要对其进行加载。 const fs = require("fs"); // 加载fs文件系统模块 二、同步和异步调...
【ES6 模块化】Module基本用法
RachelY111的博客
09-04 555
在ES6之前，社区制定了一些模块加载方案，最主要的有CommonJS和AMD两种。前者用于服务器，后者用于浏览器。ES6 module是在浏览器和服务器上的通用解决方案。
es6-promise依赖下载
最新发布
06-09
ES6-Promise是一个用于在JavaScript中实现Promise功能的库，它为浏览器和Node.js环境提供了对Promise规范的支持，特别适用于那些不直接支持ES6 Promise特性的环境。它解决了早期浏览器对Promise的不完全支持问题。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值