ES6-promise-学习笔记

最新推荐文章于 2024-06-07 09:18:52 发布
最新推荐文章于 2024-06-07 09:18:52 发布
阅读量819 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39289876/article/details/122584488
版权

文章目录

基本介绍

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

  1. Promise 构造函数: Promise (excutor) {}
  2. Promise.prototype.then 方法
  3. Promise.prototype.catch 方法
    resolve是成功，reject是失败，这两是function的两个形参，但都是function
    在这里插入图片描述

在这里插入图片描述
调用失败的函数
在这里插入图片描述
在这里插入图片描述

promise封装和读取文件

通过原始读取不用promise

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

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

这里data是buffer，可以通过头tostring转为字符串
在这里插入图片描述使用promise方法

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

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

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

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

在这里插入图片描述
多个任务时promise才有优势，不用一直向内缩进

Promise封装AJAX

<!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>

Promise的then方法

<!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);
        // });

        //链式调用
        p.then(value=>{

        }).then(value=>{

        });


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

多个内容读取

//引入 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);
            resolve([value, data]);
        });
    })
}).then(value => {
    console.log(value.join('\r\n'));
});

在这里插入图片描述

Promise catch

<!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>
雨浅听风吟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6-ES10--学习笔记
qq_45728623的博客
08-06 373
一、概述 1、什么是ECMA ECMA（European Computer Manufacturers Association）中文名称为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。 2、什么是ECMAScript ECMAScript 是由 Ecma 国际通过 ECMA-262 标准化的脚本程序设计语言； 百度百科：https://baike.baidu.com/history/ECMAScript/1889420/144946978 3、什么是
ES6-learning：学习ES6的笔记
02-05
ES6 《深刻理解ES6》学习笔记本文用于汇总链接到各个子章节的内容，欢迎大家题issues和PR，如果对你有帮助，也可以给star支持:) ，感谢原作者以及社区里提供翻译人员。目录 思维导图第一章块级绑定第二章弦和正则...
ES6笔记-Promise对象（入门-同步异步-Promise基本使用-链式调用-事件循环-面试案例）
qq_33290233的博客
04-05 766
Promise对象 主要用于异步计算 可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 可以在对象之间传递和操作promise，帮助我们处理队列 异步回调的问题： 之前处理异步是通过纯粹的回调函数的形式进行处理 很容易进入到回调地狱中，剥夺了函数return的能力 问题可以解决，但是难以读懂，维护困难 稍有不慎就会踏入回调地狱 - 嵌套层次深，不好维护 promise promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外） 并未剥夺函数return的能力，因此
ES6学习笔记-Promise
qq_37609418的博客
07-11 206
异步编程解决方案。，就是一个容器。里面保存着某个未来才会结束的事情。从语法上说。Promise是一个对象从它可以获取异步操作的信息。特点：对象的状态不受外界影响。对象代表一个异步操作。三种状态：只有异步操作的结果，可以决定当前是哪一种状态。任何其他操作都无法改变一旦状态改变，就不会再变，任何时候都可以得到这个结果。对象的状态改变，只有两种可能：从变为和从变为。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。缺点： 构造函数接受一个函数作为参数，该函数
promise、async和await
dianfu5248的博客
08-12 110
async:async function 声明将定义一个返回 AsyncFunction 对象的异步函数。当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。(async函数返回一个 Pro...
ES6笔记 - Promise模式
大灰狼的小绵羊哥哥的博客
03-06 3592
http://coderlt.coding.me/2016/07/17/ES6-promise/Promise 为异步编程提供统一的解决方案，比传统的回调和事件更加合理有效。 多重嵌套的回调函数，代码是横向发展，不是纵向发展，容易乱成一团，不便管理，称之为”callback hell”，回调地狱或回调恶梦。 Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许
ES6-11 学习笔记
m0_60394632的博客
07-19 185
学习ES5-11S时候做的笔记，第一遍过注重各个新特性的用法，实际案例在将来开发中遇到将会补充上来
ES6-ES11个人学习笔记
PrototypeOne的博客
10-02 1884
let变量声明和声明特性 //声明变量 let a; let b,c,d; let e=100; let f=521,g='iloveyou',h=[]; //1.变量不能重复声明 let star='罗志祥' let star='小猪'//var可以重复声明 //2.块级作用域 全局 函数 eval //3.不存在变量提升 //4.不影响作用域链 { let school='尚硅谷' function fn(){ console.log(school) } fn();//会
ES6-10学习笔记
qiao
03-17 503
一、ES6 1、全局变量 //两种生成全局变量的方法（都是写在函数体外） var a=123; b=456; //两种方法生成全局变量的区别： //1、 //没有使用 var 生成的全局变量，是作为window的属性存在， //不是真正意义上的全局变量，可以用 delete b (或者delete window.b)删除，删除之后获取b则是 not defind， //而通过 var 生成的全...
ES6-ES11 学习笔记
weixin_43571751的博客
04-26 596
ES6-ES11 学习笔记概述什么是 ECMAScriptES6新特性1. let关键字不允许重复声明块儿级作用域（局部变量）不存在变量提升不影响作用域链let应用使用var创建变量使用let创建变量2. const关键字声明必须赋初始值不允许重复声明值不允许修改块儿级作用域（局部变量）3. 变量和对象的结构赋值什么是解构赋值4. 模板字符串字符串中可以出现换行符可以使用 ${xxx} 形式引用变量5. 简化对象和函数写法6. 箭头函数箭头函数定义箭头函数的特点箭头函数的应用需求1需求27. ES6中函数参
es6-notes:ES6+ 学习笔记 https
05-07
ES下一个学习笔记 数字 大批 目的 功能 班级 象征 放 地图 正则表达式 代理人 反映 承诺 发电机 迭代器 模块 ES2016（ES7） Array.prototype.includes（） 求幂运算符 ES2017（ES8） 细绳 目的 异步等待 尾随...
ES6 学习笔记.pdf
07-05
这是一份关于JavaScript ES6 的整理笔记，包括块级作用域，解构，promise，class，proxy
es6学习笔记之Async函数基本教程
01-21
本文介绍的是关于es6中Async函数的相关内容，非常出来供大家参考学习，需要的朋友们下面来看看详细的介绍： async 函数 async 函数，使得异步操作变得更加方便。它是 Generator 函数的语法糖。 Generator 函数，...
es6学习笔记之Async函数的使用示例
12-10
从最早的回调函数，到 Promise 对象，再到 Generator 函数，每次都有所改进，但又让人觉得不彻底。它们都有额外的复杂性，都需要理解抽象的底层运行机制。 异步I/O不就是读取一个文件吗，干嘛要搞得这么复杂？异步...
基于jeecgboot-vue3的Flowable流程-待办任务（一）
宁波阿成的博客
06-03 441
基于jeecgboot-vue3的Flowable流程-待办任务（一）
手写最小的 Agent 系统 — Tiny Agent
安静的软件工程师
06-03 736
手写最小的 Agent 系统 — Tiny Agent
Ruoyi-Vue-Plus 下载启动后菜单无法点击展开，
06-07 158
1.框架下载后运行2.使用mock数据3.进入页面后无法点击菜单本以为是动态路由或者菜单逻辑出了问题，最后发现是websocket的问题。
Typescript高级: 深入理解extends keyof语法
Wang的专栏
06-02 828
在TypeScript中，extends关键字是类型系统中一个极其重要的组成部分它不仅用于类的继承，也是类型兼容性检查和泛型约束的关键机制特别是当它与keyof关键字结合，形成的结构时它为类型系统带来了强大的灵活性和表达能力，让我们能够在泛型中对对象的属性进行操作和约束。
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、付费专栏及课程。

余额充值