详解promise与手写实现

news2024/9/23 9:32:03

详解promise与手写实现

  • Promise
    • 1、Promise介绍与基本使用
      • 1.1 Promise概述
      • 1.2 Promise的作用
      • 1.3 Promise的使用
    • 2、Promise API
    • 3、Promise关键问题
    • 4、Promise自定义封装
    • 5、async与await
      • 5.1. mdn文档
      • 5.2.async函数
      • 5.3.await表达式
      • 5.4.注意

Promise

1、Promise介绍与基本使用

1.1 Promise概述

理解

  1. 抽象表达:

    1)Promise是一门新的技术(ES6规范)

    2)Promise是Js中进行异步编程的新解决方案

    • 备注:旧方案是单纯使用回调函数

  2. 具体表达:

    1)从语法上来说: Promise是一个构造函数

    2)从功能上来说: promise对象用来封装一个异步操作(fs 文件操作、数据库操作、AJAX 、定时器 )并可以获取其成功/失败的结果值

Promise的状态改变

  1. pending 变为resolved
  2. pending变为reject
  • 说明:只有这2种，且一个promise对象只能改变一次；无论变为成功还是失败，都会有一个结果数据；成功的结果数据一般称为value，失败的结果数据一般称为reason

Promise的基本流程

在这里插入图片描述

1.2 Promise的作用

  • 指定回调函数的方式更加灵活
    1. 旧的:必须在启动异步任务前指定
    2. promise:启动异步任务=>返回promie对象=>给promise对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
  • 支持链式调用，可以解决回调地狱问题
    1. 什么是回调地狱 – 回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
    2. 回调地狱的缺点 – 不便于阅读，不便于异常处理
    3. 解决方案 – promise链式调用
    4. 终极解决方案 – async/await

1.3 Promise的使用

  • Promise实践练习-fs模块
const fs = require('fs');

//回调函数 形式
// fs.readFile('./resource/content.txt', (err, data) => {
//     // 如果出错 则抛出错误
//     if(err)  throw err;
//     //输出文件内容
//     console.log(data.toString());
// });

//Promise 形式
let p = new Promise((resolve , reject) => {
    fs.readFile('./resource/content.txt', (err, data) => {
        //如果出错
        if(err) reject(err);
        //如果成功
        resolve(data);
    });
});

//调用 then 
p.then(value=>{
    console.log(value.toString());
}, reason=>{
    console.log(reason);
});
  • Promise封装练习-fs模块
/**
 * 封装一个函数 mineReadFile 读取文件内容
 * 参数:  path  文件路径
 * 返回:  promise 对象
 */
function mineReadFile(path){
    return new Promise((resolve, reject) => {
        //读取文件
        require('fs').readFile(path, (err, data) =>{
            //判断
            if(err) reject(err);
            //成功
            resolve(data);
        });
    });
}

mineReadFile('./resource/content.txt')
.then(value=>{
    //输出文件内容
    console.log(value.toString());
}, reason=>{
    console.log(reason);
});
  • Promise实践练习-AJAX请求
		const btn = document.querySelector('#btn');

        btn.addEventListener('click', function(){
            //创建 Promise
            const p = new Promise((resolve, reject) => {
                //1.创建对象
                const xhr = new XMLHttpRequest();
                //2. 初始化
                xhr.open('GET', 'https://api.apiopen.top/getJoke');
                //3. 发送
                xhr.send();
                //4. 处理响应结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断响应状态码 2xx   
                        if(xhr.status >= 200 && xhr.status < 300){
                            //控制台输出响应体
                            resolve(xhr.response);
                        }else{
                            //控制台输出响应状态码
                            reject(xhr.status);
                        }
                    }
                }
            });
            //调用then方法
            p.then(value=>{
                console.log(value);
            }, reason=>{
                console.warn(reason);
            });
        });
  • Promise封装AJAX操作
		/**
         * 封装一个函数 sendAJAX 发送 GET AJAX 请求
         * 参数   URL
         * 返回结果 Promise 对象
         */
        function sendAJAX(url){
            return new Promise((resolve, reject) => {
                const xhr = new XMLHttpRequest();
                xhr.responseType = 'json';
                xhr.open("GET", url);
                xhr.send();
                //处理结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断成功
                        if(xhr.status >= 200 && xhr.status < 300){
                            //成功的结果
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            });
        }
    
        sendAJAX('https://api.apiopen.top/getJok')
        .then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        });

2、Promise API

  1. Promise构造函数: Promise (excutor){}

    (1)executor函数:执行器(resolve, reject)=>{}

    (2)resolve函数:内部定义成功时我们调用的函数value =>{}

    (3)reject 函数:内部定义失败时我们调用的函数reason => {}

    • 说明: executor 会在 Promise 内部立即同步调用,异步操作在执行器中执行

  2. Promise.prototype.then方法:(onResolved, onRejected)=>{}

    (1)onResolved 函数:成功的回调函数(value)=>{}

    (2)onRejected 函数:失败的回调函数(reason)=>{}

    • 说明:指定用于得到成功value 的成功回调和用于得到失败reason的失败回调返回一个新的promise对象

  3. Promise.prototype.catch方法:(onRejected)=>{}

    • onRejected 函数:失败的回调函数(reason)=> {}

    • 说明: then()的语法糖，相当于: then(undefined, onRejected)

  4. Promise.resolve方法:(value)=>{}

  • value:成功的数据或promise对象

  • 说明:返回一个成功/失败的promise对象

  1. Promise.reject方法: (reason)=>{}

  • reason:失败的原因

  • 说明:返回一个失败的promise对象

  1. Promise.all方法:(promises)=>{}

  • promises:包含n个promise的数组

  • 说明:返回一个新的promise，只有所有的promise都成功才成功，只要有一个失败了就直接失败

  1. Promise.race方法:(promises)=>0

    • promises:包含n个promise的数组
    • 说明:返回一个新的promise，第一个完成的promise 的结果状态就是最终的结果状态

3、Promise关键问题

  1. 如何改变promise 的状态?

    (1)resolve(value):如果当前是pending就会变为resolved

    (2)reject(reason):如果当前是pending 就会变为rejected

    (3)抛出异常:如果当前是pending 就会变为rejected

  2. 一个promise指定多个成功/失败回调函数，都会调用吗?

    当promise改变为对应状态时都会调用

  3. 改变promise状态和指定回调函数谁先谁后?

    (1)都有可能，正常情况下是先指定回调再改变状态(异步任务)，但也可以先改状态再指定回调(同步任务)

    (2)如何先改状态再指定回调?

    • 在执行器中直接调用resolve()/reject()
    • 延迟更长时间才调用then()

    (3)什么时候才能得到数据?

    • 如果先指定的回调，那当状态发生改变时，回调函数就会调用，得到数据(异步任务)
    • 如果先改变的状态，那当指定回调时，回调函数就会调用，得到数据(同步任务)

  4. promise.then()返回的新promise的结果状态由什么决定?

    (1)简单表达:由 then()指定的回调函数执行的结果决定

    (2)详细表达:

    • 如果抛出异常，新promise变为rejected, reason为抛出的异常
    • 如果返回的是非promise的任意值，新promise变为resolved, value为返回的值
    • 如果返回的是另一个新promise，此promise的结果就会成为新promise的结果

  5. promise如何串连多个操作任务?

    (1)promise 的 then()返回一个新的promise，可以开成then()的链式调用

    (2)通过 then的链式调用串连多个同步/异步任务

  6. promise异常传透?

    (1)当使用promise的then链式调用时，可以在最后指定失败的回调

    (2)前面任何操作出了异常，都会传到最后失败的回调中处理

  7. 中断promise链?

    (1)当使用promise的then链式调用时，在中间中断，不再调用后面的回调函数

    (2)办法:在回调函数中返回一个pendding状态的 promise对象

4、Promise自定义封装

  • 自定义Promise
//声明构造函数
function Promise(executor) {
    //添加属性
    this.PromiseState = 'pending';
    this.PromiseResult = null;
    //声明属性
    this.callbacks = [];
    //保存实例对象的 this 的值
    const self = this;// self _this that
    //resolve 函数
    function resolve(data) {
        //判断状态
        if (self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'fulfilled';// resolved
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //调用成功的回调函数
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onResolved(data);
            });
        });
    }
    //reject 函数
    function reject(data) {
        //判断状态
        if (self.PromiseState !== 'pending') return;
        //1. 修改对象的状态 (promiseState)
        self.PromiseState = 'rejected';// 
        //2. 设置对象结果值 (promiseResult)
        self.PromiseResult = data;
        //执行失败的回调
        setTimeout(() => {
            self.callbacks.forEach(item => {
                item.onRejected(data);
            });
        })
    }
    try {
        //同步调用『执行器函数』
        executor(resolve, reject);
    } catch (e) {
        //修改 promise 对象状态为『失败』
        reject(e);
    }
}

//添加 then 方法
Promise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    //判断回调函数参数
    if (typeof onRejected !== 'function') {
        onRejected = reason => {
            throw reason;
        }
    }
    if (typeof onResolved !== 'function') {
        onResolved = value => value;
        //value => { return value};
    }
    return new Promise((resolve, reject) => {
        //封装函数
        function callback(type) {
            try {
                //获取回调函数的执行结果
                let result = type(self.PromiseResult);
                //判断
                if (result instanceof Promise) {
                    //如果是 Promise 类型的对象
                    result.then(v => {
                        resolve(v);
                    }, r => {
                        reject(r);
                    })
                } else {
                    //结果的对象状态为『成功』
                    resolve(result);
                }
            } catch (e) {
                reject(e);
            }
        }
        //调用回调函数  PromiseState
        if (this.PromiseState === 'fulfilled') {
            setTimeout(() => {
                callback(onResolved);
            })
        }
        if (this.PromiseState === 'rejected') {
            setTimeout(() => {
                callback(onRejected);
            })
        }
        //判断 pending 状态
        if (this.PromiseState === 'pending') {
            //保存回调函数
            this.callbacks.push({
                onResolved: function () {
                    callback(onResolved);
                },
                onRejected: function () {
                    callback(onRejected);
                }
            });
        }
    })
}

//添加 catch 方法
Promise.prototype.catch = function (onRejected) {
    return this.then(undefined, onRejected);
}

//添加 resolve 方法
Promise.resolve = function (value) {
    //返回promise对象
    return new Promise((resolve, reject) => {
        if (value instanceof Promise) {
            value.then(v => {
                resolve(v);
            }, r => {
                reject(r);
            })
        } else {
            //状态设置为成功
            resolve(value);
        }
    });
}

//添加 reject 方法
Promise.reject = function (reason) {
    return new Promise((resolve, reject) => {
        reject(reason);
    });
}

//添加 all 方法
Promise.all = function (promises) {
    //返回结果为promise对象
    return new Promise((resolve, reject) => {
        //声明变量
        let count = 0;
        let arr = [];
        //遍历
        for (let i = 0; i < promises.length; i++) {
            //
            promises[i].then(v => {
                //得知对象的状态是成功
                //每个promise对象 都成功
                count++;
                //将当前promise对象成功的结果 存入到数组中
                arr[i] = v;
                //判断
                if (count === promises.length) {
                    //修改状态
                    resolve(arr);
                }
            }, r => {
                reject(r);
            });
        }
    });
}

//添加 race 方法
Promise.race = function (promises) {
    return new Promise((resolve, reject) => {
        for (let i = 0; i < promises.length; i++) {
            promises[i].then(v => {
                //修改返回对象的状态为 『成功』
                resolve(v);
            }, r => {
                //修改返回对象的状态为 『失败』
                reject(r);
            })
        }
    });
}

5、async与await

5.1. mdn文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async functionhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/await

5.2.async函数

  1. 函数的返回值为promise对象

  2. promise对象的结果由async函数执行的返回值决定

5.3.await表达式

  1. await右侧的表达式一般为promise对象，但也可以是其它的值
  2. 如果表达式是promise对象, await返回的是promise 成功的值
  3. 如果表达式是其它值，直接将此值作为await的返回值

5.4.注意

  1. await 必须写在async函数中，但 async函数中可以没有await
  2. 如果await 的promise失败了，就会抛出异常，需要通过try…catch 捕获处理

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/181727.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

5.1 频率响应概述

5.1 频率响应概述

一、研究放大电路频率响应的必要性 在放大电路中&#xff0c;由于电抗元件&#xff08;如电容、电感线圈等&#xff09;及半导体管极间电容的存在&#xff0c;当输入信号的频率过低或过高时&#xff0c;不但放大倍数的数值会变小&#xff0c;而且还将产生超前或者滞后的相移&a…
阅读更多...
LightOJ 1197 - Help Hanzo (区间筛）

LightOJ 1197 - Help Hanzo (区间筛）

题目链接&#xff1a;Help Hanzo - LightOJ 1197 - Virtual Judge (vjudge.net) 题意 多组数据&#xff0c;每组输入两个数a&#xff0c;b&#xff0c;求区间a&#xff0c;b内的素数个数。 其中. 思路 首先我们看到数据范围就能知道&#xff0c;传统的质数筛肯定行不通了 …
阅读更多...
苹果营收下降，但仍赚钱！

苹果营收下降，但仍赚钱！

导读苹果公司今天发布2016财年第四财季财报&#xff0c;财报数据虽然略微超过分析师预期&#xff0c;但苹果公司的股价在盘后交易中曾上涨不过财报发布后很快下跌。 敲黑板概括苹果公司的财报的重点有&#xff1a;营收和盈利同比双双下滑、连续第三个季度下滑并出现2001年来首次…
阅读更多...
高阶数据结构 位图的模拟实现

高阶数据结构 位图的模拟实现

作者&#xff1a;学习同学 专栏&#xff1a;数据结构进阶 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;模拟实现高阶数据结构位图 位图的模拟实现bitset类要实现的接口函数总览bitset类的模拟实现位图结构构造函数set reset flip …
阅读更多...
全国地级市1999—2020年用地面积指标（建设用地\居住用地\绿地\建成区等）

全国地级市1999—2020年用地面积指标（建设用地\居住用地\绿地\建成区等）

在之前的文章中我们介绍过基于2000-2021年《中国城市统计年鉴》整理的人口相关指标&#xff0c;包括人口及户数数据和人口变动数据&#xff08;可查看之前推送的文章&#xff09;。 本次我们对2000—2021年的《中国城市统计年鉴》中的用地面积相关的指标进行了整理&#xff0c…
阅读更多...
lego-loam学习笔记(二)

lego-loam学习笔记(二)

前言&#xff1a; 对于lego-loam中地面点提取部分的源码进行学习。 地面点提取在src/imageProjection.cpp中的函数groundRemoval()。内容比较少&#xff0c;容易理解。 size_t lowerInd, upperInd;float diffX, diffY, diffZ, angle; lowerInd表示低线数的点云&#xff1b; …
阅读更多...
从网络摄像头拉流的几种方法（python代码）

从网络摄像头拉流的几种方法（python代码）

文章目录摘要&#x1f407;1、直接使用OpenCV&#x1f407;2、使用ffmpeg&#x1f407;2.1、安装方法 &#x1f407;2.1.1、安装ffmpeg-python &#x1f407;2.1.2、安装FFmpeg &#x1f407;2.2、代码实现&#x1f407;3、多线程的方式读取图片&#x1f407;4、多进程的方式拉…
阅读更多...
DocuWare 智能文档控制——杜绝成堆的文件和文件混乱，保证业务连续性，创建企业新阶段

DocuWare 智能文档控制——杜绝成堆的文件和文件混乱，保证业务连续性，创建企业新阶段

一、智能文档控制——杜绝成堆的文件和文件混乱&#xff0c;保证业务连续性&#xff0c;创建企业新阶段 清晰有条理和即时可用的信息是成功的业务流程的关键&#xff0c;随时随地安全管理业务文档&#xff0c;快速查找并智能使用它们。 1、安全存储 使用安全的集中式平台存放…
阅读更多...
44.Isaac教程--姿态估计

44.Isaac教程--姿态估计

二维骨骼姿态估计 ISAAC教程合集地址: https://blog.csdn.net/kunhe0512/category_12163211.html 文章目录二维骨骼姿态估计应用概述推理运行推理在嵌入式平台上运行推理消息类型小码推理示例训练步骤 1. 先决条件 安装 Docker 容器步骤 2. 安装步骤 3. 下载 COCO 2017 和预处理…
阅读更多...
高效学 C++｜函数参数的引用传递和函数重载

高效学 C++｜函数参数的引用传递和函数重载

在节前拜读张哥dvlinker的博客_CSDN博客-VC常用功能代码封装,C相关,C软件调试与异常排查从入门到精通系列教程领域博主的C专栏后&#xff0c;毅然决然&#xff0c;想在春节期间系统的学习下C入门知识&#xff0c;本文算是学习过程的小结及感悟&#xff01; C语言中函数的声明形…
阅读更多...
pytorch深度学习一机多显卡训练设置，流程

pytorch深度学习一机多显卡训练设置，流程

最近在学习在服务器的ubuntu环境上配置用多个显卡训练&#xff0c;之前只用一个显卡训练实在是太慢了点 先看看服务器上有几个显卡&#xff1a; nvidia-smi即可得到具体的显卡信息&#xff1a; 每个显卡之前有对应的编号。 然后得知自己服务器上总共有多少显卡后&#xff0…
阅读更多...
第一章：Go语言简介

第一章：Go语言简介

Go语言&#xff08;或 Golang&#xff09;起源于 2007 年&#xff0c;并在 2009 年正式对外发布。Go 是非常年轻的一门语言&#xff0c;它的主要目标是“兼具 Python 等动态语言的开发速度和 C/C 等编译型语言的性能与安全性”。 Go语言是编程语言设计的又一次尝试&#xff0c…
阅读更多...
41-剑指 Offer 43. 1～n 整数中 1 出现的次数

41-剑指 Offer 43. 1～n 整数中 1 出现的次数

题目 输入一个整数 n &#xff0c;求1&#xff5e;n这n个整数的十进制表示中1出现的次数。 例如&#xff0c;输入12&#xff0c;1&#xff5e;12这些整数中包含1 的数字有1、10、11和12&#xff0c;1一共出现了5次。 示例 1&#xff1a; 输入&#xff1a;n 12 输出&#x…
阅读更多...
【Activiti工作流引擎】基本认识Activiti

【Activiti工作流引擎】基本认识Activiti

Activiti工作流引擎 表的命名结构 ACT_RE &#xff1a;RE’表示 repository。这个前缀的表包含了流程定义和流程静态资源 &#xff08;图片&#xff0c;规则&#xff0c;等等&#xff09;。 ACT_RU&#xff1a;RU’表示 runtime。这些运行时的表&#xff0c;包含流程实例&am…
阅读更多...
海外拥有最庞大社区人群的Verasity（$VRA），后市值得期待

海外拥有最庞大社区人群的Verasity（$VRA），后市值得期待

在2023年开年以来&#xff0c;随着主流标的回暖进一步带动大盘的上涨&#xff0c;并且加密货币总市值重回1亿美元以上。而加密货币市场大多数资产都迎来普涨。我们看到&#xff0c;短时的上涨虽然为市场重新注入信心&#xff0c;但能够持续具备上涨趋势的标的并不多。此前&…
阅读更多...
layui框架实战案例(18)：保存草稿和单选radio复选框checkbox无focus属性快速聚焦跳转的解决方案

layui框架实战案例(18)：保存草稿和单选radio复选框checkbox无focus属性快速聚焦跳转的解决方案

系列文章目录 layui动态表格翻页和搜索的代码分析layui框架实战案例(3)&#xff1a;layui上传错误请求上传接口出现异常解决方案layui框架实战案例(9)&#xff1a;layPage 静态数据分页组件layui框架实战案例(10)&#xff1a;短信验证码60秒倒计时layui框架实战案例(11)&#…
阅读更多...
SSE(Server-sent Events)实现Web消息推送（SpringBoot）

SSE(Server-sent Events)实现Web消息推送（SpringBoot）

本文参考自&#xff1a; Web消息推送之SSE_魅Lemon的博客-CSDN博客_sse推送 【IT老齐237】超好用Web服务端主动推送技术SSE_哔哩哔哩_bilibili 1、Web消息推送简介 短轮询 长轮询 iframe流 SSE MQTT websocket 2、SSE原理介绍 2.1、概念 SSE(Server Sent Event)&…
阅读更多...
43.Isaac教程--图像变形

43.Isaac教程--图像变形

图像变形 ISAAC教程合集地址: https://blog.csdn.net/kunhe0512/category_12163211.html 文章目录图像变形几何畸变图像投影透视畸变校正径向畸变校正切向畸变校正其他相机固有参数焦距主点&#xff08;投影中心&#xff09;未失真输出的光学特性输出主点输出焦距输出图像大小输…
阅读更多...
最快的树视图组件：Flexible TreeView.NET Crack

最快的树视图组件：Flexible TreeView.NET Crack

为什么要使用灵活的 TreeView&#xff1f; 灵活性 市场上其他类似树视图的组件所不具备的无与伦比的可扩展性和独特功能。 表现 市场上最快的树视图组件。 仅需 0.39 秒即可添加 100,000 个节点。 简单 尽管是一个非常强大的树视图组件&#xff0c;但 Flexible TreeView 被设计…
阅读更多...
Java开发基于rmi的数据库中间件设计源码,并利用中间件建立一个数据库应用（Java web项目）,分布式对象技术课程实践

Java开发基于rmi的数据库中间件设计源码,并利用中间件建立一个数据库应用（Java web项目）,分布式对象技术课程实践

基于rmi的数据库中间件设计 介绍 分布式对象技术课程实践&#xff1a;基于rmi的数据库中间件设计&#xff0c;并利用中间件建立一个数据库应用&#xff08;Java web项目&#xff09;。 软件架构 前端&#xff1a;React后端&#xff1a;Springboot数据库中间件&#xff1a;J…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023