尚硅谷Promise笔记

news2025/1/24 5:48:11

文章目录

  • 一、Promise介绍与基本使用
    • 1-1.初体验之promise封装ajax请求
    • 1-2.Promise对象状态属性PromiseState的值有三个
    • 1-3.Promise对象状态属性PromiseResults
  • 二、Promise API
    • 2-1.Promise构造函数Promise(excutor){}
    • 2-2.Promise.prototype.then 方式：(onResolved,onRenjected) => {}
    • 2-3.Promise.prototype.catch 方式：(onRejected) => {}
    • 2-4.Promise.resolve(参数) => {}
    • 2-5.Promise.reject(参数) => {}
    • 2-6.Promise.all(数组) => {}
    • 2-7.Promise.race(数组) => {}
  • 三、Promise关键问题
    • 3-1.如何修改对象的状态
    • 3-2.能否执行多个回调
    • 3-3.改变promise状态和指定回调函数谁先谁后
    • 3-4.promise.then方法返回结果由什么决定
    • 3-5.Promise如何让串联多个操作任务
    • 3-6.异常穿透
    • 3-7.中断promise链
  • 四、Promise自定义封装
  • 五、async与await
    • 5-1.async表达式
    • 5-2.await表达式
    • 5-3.async和await实战结合

一、Promise介绍与基本使用

抽象表达
Promise是一门新的技术
Promise是JS中进行异步编程的新解决方案
备注：旧方案是单纯使用回调函数

具体表达
从语法上来说Promise是一个构造函数
从功能上来说Promise对象用来封装一个异步操作并可以获取其成功失败的结果值

基本使用
fs文件操作
定时器
ajax请求
操作mysql

作用
解决回调地狱

1-1.初体验之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>Document</title>
</head>
<body>
    <script>
        function sendAjax(url){
            // return一个promise对象
            // resolve ==> 解决
            // reject ==> 拒绝
            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('请求地址')
    </script>
</body>
</html>

1-2.Promise对象状态属性PromiseState的值有三个

  1. pending 待定的状态
  2. resolve 成功的状态
  3. reject 失败的状态

1-3.Promise对象状态属性PromiseResults

PromiseResults对象存储的是成功或者失败的结果
可以通过resolve和reject修改其结果

二、Promise API

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

1. excutor函数：执行器
2. resolve函数：内部定义成功时我们调用的函数 valule => {}
3. reject函数：内部定义失败时我们调用的函数 reason => {}
4. 说明：executor会在Promise内部立即同步调用，异步操作在执行器中执行

2-2.Promise.prototype.then 方式：(onResolved,onRenjected) => {}

 1. onResolved函数：成功的回调函数 (value) =>{}
 2. onRejected函数：失败的回调函数 (reason) =>{}
 3. 说明：指定用于得到成功value的成功回调和用于得到失败reason的失败回调返回一个新的promise对象

2-3.Promise.prototype.catch 方式：(onRejected) => {}


 1. onRejected函数：失败的回调函数 (reason) =>{}

2-4.Promise.resolve(参数) => {}

1.传入非primise对象，例如：字符串，num ，布尔等，返回都是成功的回调
2.传入一个promise对象，返回的结果根据promise的结果而决定

// 传入非primise对象，例如：字符串，num ，布尔等，返回都是成功的回调
        let p = Promise.resolve(520)
        
        // 传入一个promise对象，返回的结果根据promise的结果而决定
        let p1 = Promise.resolve(new Promise((resolve,reject)=>{
            // resolve('ok')
            reject('error')
        })) 

        console.log('p',p);
        console.log('p1',p1);

请添加图片描述

2-5.Promise.reject(参数) => {}

1.不管传入什么返回的都是错误的回调
2.传入string ， number ， 布尔 ， undefine，或者promise对象返回的都是错误的回调

let p = Promise.reject('123')
        let p1 = Promise.reject((resolve,reject)=>{
            resolve('ok')
        })
        console.log(p);
        console.log(p1);

在这里插入图片描述

2-6.Promise.all(数组) => {}

包含n个数组
说明：返回一个新的promise，只有所有的promise都成功才成功，有一个失败就都失败

		let p1 = new Promise((resolve,reject)=>{    
            resolve('ok1')
        })
        let p2 = new Promise((resolve,reject)=>{    
            resolve('ok2')
        })
        let p3 = new Promise((resolve,reject)=>{    
            resolve('ok3')
        })
        const res =  Promise.all([p1,p2,p3])
        console.log(res);

请添加图片描述
请添加图片描述

2-7.Promise.race(数组) => {}

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

let p1 = new Promise((resolve,reject)=>{    
            resolve('ok1')
        })
        let p2 = new Promise((resolve,reject)=>{    
            resolve('ok2')
        })
        let p3 = new Promise((resolve,reject)=>{    
            reject('ok3')
        })
        const res =  Promise.race([p1,p2,p3])
        console.log(res);

在这里插入图片描述

三、Promise关键问题

3-1.如何修改对象的状态

三个方法：
1.resolve ==> pending ==> 转换为 resolve
2.reject ==> pending ==> 转换为 reject
3.throw ==> pending ==> 转换为 throw抛出一个错误

			let p = new Promise((resolve,reject)=>{
            // resolve('success') pending ==> 转换为 resolve
            // reject('error')    pending ==> 转换为 reject
            throw('我出错了')    //pending ==> 转换为 throw
        	})
        console.log(p);

3-2.能否执行多个回调

可以：只要promise的状态确定了

let p = new Promise((resolve,reject)=>{
            resolve('ok')
        })
        p.then(res=>{
            console.log(res);
        })
        p.then(res=>{
            console.log(res);
        })

请添加图片描述

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


 1. 都有可能，正常情况下时先指定回调函数再改变状态，但是也可以先改变状态再指定回调
 2. 如何先该状态再指定回调
	（1）在执行器中直接调用resolve()/reject()
	（2）延长更长的时间才调用then() 
 3. 什么时候才可以得到数据
	（1）如果先指定回调，那当状态发生改变时，回调函数就会调用，得到数据
	（2）如果先改变状态，那当指定回调时，回调函数就会调用，得到数据

执行器中如果是同步任务，就会先改变状态再执行回调

let p = new Promise((resolve,reject)=>{
            resolve('ok')
        })
        p.then(res=>{
            console.log(res);
        })

执行其中如果是异步任务，就会先执行回调再改变状态

let p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('ok')
            },1000)
        })
        p.then(res=>{
            console.log(res);
        })

3-4.promise.then方法返回结果由什么决定

1.抛出问题 ==> PromiseState:"reject"
throw '出错了'
2.返回结果是非Promise类型的对象 ==> PromiseState:"fulfilled"
return 123
3.返回结果是一个Promise对象 ==> PromiseState:"resolve/reject"

let p = new Promise((resolve, reject) => {
            resolve('ok')
        })
        let results = p.then((value) => {
            // console.log(value);
            // 1.抛出问题 ==> PromiseState:"reject"
            // throw '出错了'
            // 2.返回结果是非Promise类型的对象 ==> PromiseState:"fulfilled"
            // return 123
            // 3.返回结果是一个Promise对象 ==> PromiseState:"resolve/reject"
            return new Promise((resolve,reject)=>{  
                // resolve('success')
                reject('error')
            })
        }, reason => {
            console.log(reason);
        })
        console.log(results);

请添加图片描述

3-5.Promise如何让串联多个操作任务

 1. promise的then()返回一个新的promise，可以开成then()的链式调用
 2. 通过then的链式调用串联多个同步/异步任务

let p = new Promise((resolve,reject) => {
            setTimeout(()=>{
                resolve('ok')
            },1000)
        })
        p.then(value => {
            console.log(value); // ==> ok
            return new Promise((resolve,reject) => {
                resolve('success')
            })
        }).then(value=>{
            console.log(value); // ==> success
        }).then(value=>{
            console.log(value); // ==> undefine
        })

在这里插入图片描述

3-6.异常穿透


 1. 串联多个任务后，直接再最后面添加一个catch就可以捕获之前的错误


let p = new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('ok')
                // reject('error')
            },1000)
        })
        p.then(value => {
            console.log(111); 
            throw('出错了')
        }).then(value=>{
            console.log(222);
        }).then(value=>{
            console.log(333);
        }).catch(reason=>{
            console.warn(reason);
        })

在这里插入图片描述

3-7.中断promise链


 1. 一直.then就会形成promise链
 2. 中断promise链只有一个方式就是return一个pending的promise对象
 3. 如果返回的是其他的值都是一个成功的对象，都会往下执行


 let p = new Promise((resolve,reject)=>{
                resolve('ok')
        })
        p.then(value => {
            console.log(111); 
            return new Promise(()=>{
                
            })
        }).then(value=>{
            console.log(222);
        }).then(value=>{
            console.log(333);
        }).catch(reason=>{
            console.warn(reason);
        })

在这里插入图片描述

四、Promise自定义封装

在本博客的资源里面有手写好的Promise

五、async与await

5-1.async表达式

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

         async function main(){
            // 1.如果返回值是以恶搞非promise类型的数据
            // return '123'
            // 2.如果返回的是一个promise象
            // return new Promise((resolve,reject)=>{
            //     // resolve('ok')
            //     reject('error')
            // })
            // 3.抛出异常
            throw '出错了'
        }
        //返回的是一个promise对象
        let res = main()
        console.log(res);

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

5-2.await表达式


 1. await右侧的表达式一般为promise对象，但是也可以是其他的值
 2. 如果表达式时peomise对象，await返回的是promise成功的值
 3. 如果表达式是其他值，直接将此值作为await的返回值
 4. await必须写在async函数中，但是async函数中可以没有await
 5. 如果await的peomise失败了，就会抛出异常，需要通过try，catch捕获处理


async function main(){
            let p = new Promise((resolve,reject)=>{
                // resolve('ok')
                reject('error')
            })
            // 1.右侧为promise的情况
            // let res = await p
            // 2.右侧为其他数据类型
            // let res1 = await 66
            // 3.如果promise是失败的状态
            try {
                let res3 = await p
            } catch (error) {
                console.log(error);
            }
        }
        main()

5-3.async和await实战结合

访问文件并且拼接

const fs = require('fs')
const util = require('util')
const myReadFile = util.promisify(fs.readFile)

async function main(){
    let data1 = await myReadFile('./实战/resource/1.html')
    let data2 = await myReadFile('./实战/resource/2.html')
    console.log(data1+data2);
}

main()

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

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

相关文章

App 黑白化技术实践

App 黑白化技术实践

前言 很高兴遇见你~ 最近打开各大 App 会发现它们都做了黑白化&#xff0c;如下支付宝的处理&#xff1a; 可以看到应用设置了全局灰色调&#xff0c;表达了一种对逝者的哀悼&#xff0c;非常的应景和人性化。作为程序猿&#xff0c;我们来探索一下它从技术角度是怎么实现的。…
阅读更多...
[附源码]Python计算机毕业设计SSM基于java旅游信息分享网站（程序+LW)

[附源码]Python计算机毕业设计SSM基于java旅游信息分享网站（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
汇编语言第2章—寄存器

汇编语言第2章—寄存器

8086CPU有14个寄存器&#xff0c;分别是&#xff1a;AX、BX、CX、DX、SI、DI、SP、BP、IP、CS、SS、DS、ES、PSW。2.1 通用寄存器 8086CPU的所有寄存器都是16位的&#xff0c;可以存放两个字节。AX、BX、CX、DX这4个寄存器通常用来存放一般性的数据&#xff0c;称为通用…
阅读更多...
【Spring】AOP记录日志

【Spring】AOP记录日志

我的aop记录日志&#xff0c;可以记录&#xff1a;【 操作类型、操作描述、参数、登录项目的用户ip】 当然记录什么靠你自己决定。 一.自定义一个注解 Target({ElementType.METHOD,ElementType.PARAMETER}) Retention(RetentionPolicy.RUNTIME) Documented public interface A…
阅读更多...
两位前阿里 P10 的成长经历的启发

两位前阿里 P10 的成长经历的启发

目录 汤峥嵘的成长经历 关键节点一&#xff1a;到美国留学 关键节点二&#xff1a;美国工作十年 关键节点三&#xff1a;八年阿里时光 关键节点四&#xff1a;加入途牛和 VIPABC 毕玄的成长经历 关键节点一&#xff1a;小公司里脱颖而出 关键节点二&#xff1a;加入淘宝…
阅读更多...
FineReport数据分析教程- 图表刷新接口

FineReport数据分析教程- 图表刷新接口

1. 概述 1.1 预期效果 点击按钮可以刷新普通报表或决策报表中的图表&#xff0c;以普通报表为例&#xff0c;效果如下图所示&#xff1a; 1.2 实现思路 通过FR.Chart.WebUtils.getChart("chartID").dataRefresh()获取要刷新的图表对象&#xff0c;其中chartID为图表…
阅读更多...
程序员如何写一份更好的简历

程序员如何写一份更好的简历

简历中的常见错误 1. 信息过多&#xff0c;缺乏重点 信息过多的常见表现是十几行的技能列表&#xff0c; 我举一个血淋淋的例子&#xff1a; 20 行的技能列表&#xff0c;这位求职者开始就把自己了解的所有工具都列出来&#xff0c;希望能够突显自己的经验和学习能力&#xf…
阅读更多...
pytorch基础操作(五)多层感知机的实现

pytorch基础操作(五)多层感知机的实现

1、多层感知机 1、激活函数的引入 这个多层感知机有4个输⼊&#xff0c;3个输出&#xff0c;其隐藏层包含5个隐藏单元。输⼊层不涉及任何计算&#xff0c;因此使⽤此⽹络产⽣输出只需要实现隐藏层和输出层的计算。因此&#xff0c;这个多层感知机中的层数为2。注意&#xff0…
阅读更多...
小米盒子为什么搜不到电视家？电视安装包解析错误解决方案

小米盒子为什么搜不到电视家？电视安装包解析错误解决方案

不少的朋友在小米电视盒子上安装了美家市场软件商店后&#xff0c;却发现在市场里面没法安装想要的电视盒子直播软件&#xff0c;这是怎么回事呢&#xff1f;其实大部分原因是电视盒子机制的问题限制了安装&#xff0c;导致部分品牌电视盒子装软件时会弹出“无法安装”的提示。…
阅读更多...
Mysql双主整理

Mysql双主整理

目录 1. Mysql binlog参数配置 2. Mysql binlog查看详细内容 3. Mysql双主搭建 4. Mysql双主解决数据回环 4.1 双主同步测试一 4.1.1 测试总结 4.2 双主同步测试二 4.2.1 测试总结 4.3 双主同步测试三 4.3.1 测试总结 1. Mysql binlog参数配置 log-binmysql-bin 打…
阅读更多...
水果FLStudio21.0.0软件最新版有哪些新增功能变化？

水果FLStudio21.0.0软件最新版有哪些新增功能变化？

FL Studio(水果软件)21 引入更快、更精确的音频编辑、改进的内容发现、对 DAW 情绪的控制以及更多鼓舞人心的创意工具。FL Studio是一款功能非常强大的音乐创作编辑软件它就是FL Studio(水果软件)。使用FL Studio中文版可以轻松帮我们制作自己的音乐唱片&#xff0c;拥有强大且…
阅读更多...
【ROS】HelloWord简单实现

【ROS】HelloWord简单实现

C实现 1. 创建工作空间并初始化 创建工作目录demo01_ws&#xff0c;并在该文件夹下创建src文件夹 mkdir -p demo01_ws/src进入到该目录下 cd demo01_ws/初始化 catkin_make这时在demo01_ws目录下除了src文件夹外&#xff0c;多处了两个文件夹。 ![在这里插入图片描述](htt…
阅读更多...
数字化门店转型| 水疗会所管理系统| 小程序搭建

数字化门店转型| 水疗会所管理系统| 小程序搭建

水疗会所与沐足采耳、洗浴按摩等都属于休息享受型服务&#xff0c;是不少中年人的选择&#xff0c;一天的压力可以得到缓解&#xff0c;同时客单价一般在几百元左右&#xff0c;在水疗会所里可以洗澡蒸桑拿、桌游、乒乓球等&#xff0c;同时随着近些年来生活压力逐渐加大&#…
阅读更多...
【C语言学习】详解二级指针

【C语言学习】详解二级指针

在学习数据结构时&#xff0c;通常会遇到调用函数无法对主函数中的全局变量进行有效的更改操作&#xff0c;这时我们就需要指针&#xff0c;但二级指针对于初学者而言有着一定的学习难度&#xff0c;本文通过代码结合实验调试来详细说明二级指针。 如果一个指针指向另一个指针&…
阅读更多...
[附源码]Node.js计算机毕业设计高校图书服务系统Express

[附源码]Node.js计算机毕业设计高校图书服务系统Express

项目运行 环境配置&#xff1a; Node.js最新版 Vscode Mysql5.7 HBuilderXNavicat11Vue。 项目技术&#xff1a; Express框架 Node.js Vue 等等组成&#xff0c;B/S模式 Vscode管理前后端分离等等。 环境需要 1.运行环境&#xff1a;最好是Nodejs最新版&#xff0c;我…
阅读更多...
Atcoder 前缀和优化DP Candies

Atcoder 前缀和优化DP Candies

Candies - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意&#xff1a; 思路&#xff1a; 考虑DP 状态设计&#xff1a; 首先&#xff0c;因为是线性DP&#xff0c;dp[i]是必不可少的 然后去考虑一下决策&#xff0c;看看是什么东西影响了决策 对于第 i 个位置&#xf…
阅读更多...
stm32f767自举

stm32f767自举

仅作笔记 一&#xff0c;自举。 在M0&#xff0c;M3&#xff0c;M4内核中&#xff0c;是通过boot0和boot1两个引脚的电平组合来确定启动地址的&#xff0c;启动的介质可以是系统存储器&#xff0c;SRAM&#xff0c;主Flash等。 在M7内核中&#xff0c;是通过boot0的电平加 Fla…
阅读更多...
Linux内核调试技术之动态调试

Linux内核调试技术之动态调试

前言 使用printk的打印方式只能通过设置输出等级来进行控制&#xff0c;具备一定的局限性。在实际系统运行过程中&#xff0c;我们更希望能选择性地打开某些子系统或者模块的输出&#xff0c;为此内核提供了动态调试技术。内核中包括pr_debug、dev_dbg接口都使用了动态调试技术…
阅读更多...
javax.crypto.BadPaddingException: Decryption error

javax.crypto.BadPaddingException: Decryption error

问题描述 使用Postman调用Java api解密token时 token值为iRdLmVEYUUvoH1oDF2QhSVhJxXYMRCxzbtJsL01Iun2OLHY/FxNQOrAwF4Bj2cdp1vhsXt9BQtcxmiyuCvyi2Itl2qlvlCT6VwRM6UgQ5SBIiInGlLYCrzDfOoQ74zhxwW7M43vIuLs6W0y7Rt86uZgmAR8gYwMLfvGnRg 执行时报错如下&#xff1a; 原因分析…
阅读更多...
Redis框架（十二）：大众点评项目 阻塞队列+异步处理 实现秒杀优化

Redis框架（十二）：大众点评项目 阻塞队列+异步处理 实现秒杀优化

大众点评项目 阻塞队列异步处理 实现秒杀优化需求&#xff1a;阻塞队列异步处理 实现秒杀优化为什么使用异步处理&#xff1f;为什么使用阻塞队列&#xff1f;为什么使用Lua&#xff1f;业务逻辑及其实现原有逻辑代码 / 优化后逻辑代码完整优化业务代码原有优化业务代码总结Spr…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023