b站视频-尚硅谷Web前端Promise从入门到精通-笔记

已于 2022-07-27 19:35:39 修改
阅读量707 收藏 6
点赞数 1
分类专栏： # b站视频-尚硅谷强哥Promise视频笔记 b站视频笔记 文章标签： 前端 javascript 开发语言
于 2022-07-10 21:14:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44286392/article/details/125709644
版权

目录

前言

在继续学习React-ajax、axios之前，先来学习promise
看的是b站尚硅谷李强老师的视频：Promise从入门到自定义

一、Promise视频简介

包含以下内容：

  1. Promise介绍与基本使用
  2. Promise API
  3. Promise关键问题
  4. Promise自定义封装
  5. async与await

二、Promise的介绍

ES6引入的进行异步编程的解决方案，从语法上说它是一个构造函数。
异步编程包括但不限于：文件操作、数据库操作、AJAX、定时器

为什么要用Promise？
支持链式调用，可以解决回调地狱问题。如下图，回调地狱不便于阅读和异常处理。
回调地狱

三、Promise的初体验

实现：
点击按钮, 1s 后显示是否中奖(30%概率中奖)
若中奖弹出 恭喜您中奖
若未中奖弹出 谢谢参与

//  Promise是构造函数，所以可以进行对象的实例化
// resolve和reject都是函数类型的数据
const p=new Promise((resolve,reject)=>{
    setTimeout(()=>{
    // 30%  1 2 ... 30
    // 获取从1-100的一个随机数
    let n=rand(1,100)
    // 判断
    if(n<=30){
        resolve(n); // 将 promise 对象的状态设置为 『成功』
    }else{
        reject(n); // 将 promise 对象的状态设置为 『失败』
    }
    },1000);
});

// 调用then方法
// 成功就调用第一个回调函数，失败调用第二个回调
p.then((value)=>{
    alert('恭喜您中奖,您的中奖号码为'+value);
},(reason)=>{
    alert('谢谢参与,您的号码为'+reason);
});

四、Promise实践练习

1. fs读取文件

Node.js—fs模块

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

p.then(value=>{
    console.log(value.toString());
},reason=>{
    console.log(reason);
})

在这里插入图片描述

2. AJAX请求

<script type="text/javascript">
        //接口地址 https://api.apiopen.top/getJoke
        //获取元素对象
        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){
                        // 判断响应状态码 
                        if(xhr.status>=200&&xhr.status<300){
                            // 控制台输出响应体
                            // console.log(xhr.response);
                            resolve(xhr.response);
                        }else{
                            // 控制台输出响应体
                            // console.log(xhr.status);
                            reject(xhr.status);
                        }
                    }
                }
                });
            p.then(value=>{
                console.log(value);
            },reason=>{
                console.warn(reason);
            });
        });
    </script>

五、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);
});

六、util.promisify方法进行promise风格转化

util.promisify是在node.js 8.x版本中新增的一个工具，用于将老式的Error first callback转换为Promise对象，让老项目改造变得更为轻松。
关于util.promisify

//  引入util模块
const util=require('util');
// 引入fs模块
const fs=require('fs');
//返回一个新的函数
let mineReadFile=util.promisify(fs.readFile);

mineReadFile('./resource/content.txt').then(value=>{
    console.log(value.toString());
});

七、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);
   });

八、Promise对象状态属性介绍

promise的状态：实例对象中的一个属性 『PromiseState』

  • pending 未决定的
  • resolved / fullfilled 成功
  • rejected 失败

Promise 对象的值：实例对象中的另一个属性 『PromiseResult』
保存着异步任务『成功/失败』的结果

  • resolve
  • reject

九、Promise工作流程

在这里插入图片描述

十、Promise的API

1.构造函数-then-catch

let p=new Promise((resolve,reject)=>{
            //  同步调用  先输出111 再输出222
            // console.log('111');

            // 修改promise对象的状态
            reject('error');
        });
        // console.log('222');

        // 执行catch方法  (catch只能指定失败的回调函数)
        p.catch(reason=>{
            console.log(reason);
        });

2.Promise.resolve()方法

该方法较特殊，相较于then与catch，它属于Promise这个函数对象，并不属于实例对象。
作用：快速得到一个promise对象

  • 如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
  • 如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
let p1 = Promise.resolve(521);
let p2 = Promise.resolve(new Promise((resolve, reject) => {
     // resolve('OK');
     reject('Error');
 }));
 // console.log(p2);
 p2.catch(reason => {
     console.log(reason);
 })

3.Promise.reject()方法

作用：快速返回一个失败的promise对象。(无论传入什么，返回的都是失败的Promise)

// let p = Promise.reject(521);
        // let p2 = Promise.reject('iloveyou');
        let p3 = Promise.reject(new Promise((resolve, reject) => {
            resolve('OK');
        }));
        
        console.log(p3);

4.Promise.all()方法

(promises) => {}
promises：包含 n 个 promise 的数组
注：返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一个失败了就直接失败

let p1 = new Promise((resolve, reject) => {
     resolve('OK');
 })
 // let p2 = Promise.resolve('Success');
 let p2 = Promise.reject('Error');
 let p3 = Promise.resolve('Oh Yeah');
 
 const result = Promise.all([p1, p2, p3]);

 console.log(result);

5.Promise.race()方法

(promises) => {}
promises：包含 n 个 promise 的数组
注：返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态

let p1 = new Promise((resolve, reject) => {
     setTimeout(() => {
         resolve('OK');
     }, 1000);
 })
 let p2 = Promise.resolve('Success');
 let p3 = Promise.resolve('Oh Yeah');

 const result = Promise.race([p1, p2, p3]);

 console.log(result);

十一、Promise关键问题

1.如何修改对象的状态

let p = new Promise((resolve, reject) => {
     //1. resolve 函数
     // resolve('ok'); // pending   => fulfilled (resolved)
     //2. reject 函数
     // reject("error");// pending  =>  rejected 
     //3. 抛出错误
     // throw '出问题了';
 });

 console.log(p);

2.能否执行多个回调

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

let p = new Promise((resolve, reject) => {
       // resolve('OK');
   });

   ///指定回调 - 1
   p.then(value => {
       console.log(value);
   });

   //指定回调 - 2
   p.then(value => {
       alert(value);
   });

3.改变状态与指定回调的顺序问题(不理解)

b站视频-p20
(1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
(2) 如何先改状态再指定回调?
① 在执行器中直接调用 resolve()/reject()------同步任务
② 延迟更长时间才调用 then()
(3) 什么时候才能得到数据?
① 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
② 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

let p = new Promise((resolve, reject) => {
   setTimeout(() => {
       resolve('OK');
   }, 1000);
});

p.then(value => {
   console.log(value);
},reason=>{
   
})

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

由 then()指定的回调函数执行的结果决定
① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

let p = new Promise((resolve, reject) => {
            resolve('ok');
        });
        //执行 then 方法
        let result = p.then(value => {
            // console.log(value);
            //1. 抛出错误
            // throw '出了问题';
            //2. 返回结果是非 Promise 类型的对象
            // return 521;
            //3. 返回结果是 Promise 对象
            // return new Promise((resolve, reject) => {
            //     // resolve('success');
            //     reject('error');
            // });
        }, reason => {
            console.warn(reason);
        });

        console.log(result);

5.串联多个任务

b站视频-p22
(1) promise 的 then()返回一个新的 promise, 可以看成 then()的链式调用
(2) 通过 then 的链式调用串连多个同步/异步任务

let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

        p.then(value => {
            return new Promise((resolve, reject) => {
                resolve("success");
            });
        }).then(value => {
            console.log(value);
        }).then(value => {
            console.log(value);   // undefined
        })

6.异常穿透

(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
                // reject('Err');
            }, 1000);
        });

        p.then(value => {
            // console.log(111);
            throw '失败啦!';
        }).then(value => {
            console.log(222);
        }).then(value => {
            console.log(333);
        }).catch(reason => {   // 在最后指定一个失败的回调
            console.warn(reason); 
        });

7.如何中断promise链

(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象

let p = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('OK');
            }, 1000);
        });

        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)

1.初始结构搭建

2.resolve与reject结构搭建

3.resolve与reject代码实现

4.throw抛出异常改变状态

5.Promise对象状态只能修改一次

6.then方法执行回调

7.异步任务回调的执行(不理解)

8. 指定多个回调的实现

9.同步修改状态then方法结果返回(不理解)

10.异步修改状态then方法结果返回

11.then方法完善与优化

12.catch方法-异常穿透与值传递

13.resolve方法封装

14.reject方法封装

15.all方法封装

16.race方法封装

17.then方法回调的异步执行

18.class版本的实现

十三、async函数

b站视频p43

  • 函数的返回值为 promise 对象，promise 对象的结果由 async 函数执行的返回值决定
    • 如果返回值是一个非Promise类型的数据 fulfilled 成功的结果值即为return值
    • 如果返回的是一个Promise对象 与该promise返回值一致
    • 抛出异常 rejected–结果值即为抛出的异常值

十四、await表达式

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

注：

  1. await 必须写在 async 函数中, 但 async 函数中可以没有 await
  2. 如果 await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理
async function main(){
  let p = new Promise((resolve, reject) => {
      // resolve('OK');
      reject('Error');
  })
  //1. 右侧为promise的情况
  // let res = await p;
  //2. 右侧为其他类型的数据
  // let res2 = await 20;
  //3. 如果promise是失败的状态
  try{
      let res3 = await p;
  }catch(e){
      console.log(e);
  }
}

main();

十五、async与await结合实践

/**
 * resource  1.html  2.html 3.html 文件内容
 */

const fs = require('fs');
const util = require('util');
const mineReadFile = util.promisify(fs.readFile);

//回调函数的方式
// fs.readFile('./resource/1.html', (err, data1) => {
//     if(err) throw err;
//     fs.readFile('./resource/2.html', (err, data2) => {
//         if(err) throw err;
//         fs.readFile('./resource/3.html', (err, data3) => {
//             if(err) throw err;
//             console.log(data1 + data2 + data3);
//         });
//     });
// });

//async 与 await
async function main(){
    try{
        //读取第一个文件的内容
        let data1 = await mineReadFile('./resource/1x.html');
        let data2 = await mineReadFile('./resource/2.html');
        let data3 = await mineReadFile('./resource/3.html');
        console.log(data1 + data2 + data3);
    }catch(e){
        console.log(e.code);
    }
}

main();

十六、async与await结合发送AJAX请求

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

        //段子接口地址 https://api.apiopen.top/getJoke
        let btn = document.querySelector('#btn');

        btn.addEventListener('click',async function(){
            //获取段子信息
            let duanzi = await sendAJAX('https://api.apiopen.top/getJoke');
            console.log(duanzi);
        });

写在后面

十二-十六开始看不懂了，没怎么看，以后有机会再慢慢看吧。
接下来去学习axios-从入门到源码分析

七里香777
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day03-layout 定位、层级、字体、图标字体
qq_43361287的博客
10-31 375
layout 定位、字体定位相对定位绝对定位绝对定位布局固定定位粘滞定位元素的层级字体图标字体 定位 相对定位 绝对定位 绝对定位布局 固定定位 粘滞定位 元素的层级 字体 图标字体
尚硅谷新版Web前端HTML5+CSS3知识点集合篇【p9-p10】
tudouzibututou的博客
12-14 466
尚硅谷新版Web前端HTML5+CSS3知识点集合笔记篇 尚硅谷新版Web前端HTML5+CSS3全套基础教程完整版(初学者零基础入门) p9(18:31) 一、进制 1.十进制 -特点：满10进1 单位数字10个(0-9） 2.二进制（计算机底层进制） -特点：满2进1 -单位数字2个(0、1） -所有数据在计算机底层都会以二进制形式保存 -可以将内存想象成多个小格子储存的容器，每一个小格子都可以存储一个1或一个0 -这一个小格子在我们内存中被称为1位(bit) -8个bit=1byte(字节） -102
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
chen_nnn的博客
02-17 1275
笔者在哔哩哔哩弹幕网学习前端器件内所做的学习笔记，分享出来供大家参考。
尚硅谷web前端学习——HTML
qq_46258819的博客
08-02 413
HTML 一、块和行内元素 1、块元素（block element):网页中一般用块元素来布局 2、行内元素:用来包裹文字，嵌套于块元素中而不用于行内元素间嵌套 3、块元素独占一行，行内元素不换行 4、p标签中不能放任何块元素 e.g. < p > <h 1> 嘿嘿 </h 1> </ p> 注：这样的写法是错误的，但可以运行，因为浏览器会帮你修正这些错误 二、meta标签——设置元数据 1、meta主要设置网页中的一些元数据（元数据不是给用户看的） 2、主要
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】
01-08
尚硅谷（李立超）——HTML5&CSS3笔记总结【持续更新】 本文适合前端菜鸟食用，小编自己整理的李立超老师视频的笔记，手打不易，那就望您每年快乐吧。逃） 一、进制 1.十进制（日常使用）： 特点：满10进1 计数：0 1 2 3 4 5 6 7 8 9 10 11 12 13 14…19 20 单位数字：10个（0-9） 2.二进制（计算机底层的进制）： 特点：满2进1 计数：0 1 10 11 100 101 110 111 单位数字：2个（0-1） 扩展：所有数据在计算机底层都会以二进制的形式保存。可以将内存想象成一个含有多个小格子的容器，每一个小格子中可以存储一个0或一个1，这一个小格
前端开源库-es6-promise-pool
08-29
前端开源库-es6-promise-poolES6 Promise池，在限制并发性的池中运行Promise。
前端开源库-promise-queue-plus
08-29
前端开源库-promise-queue-plusPromise Queue Plus，基于Promise的队列。支持超时、重试等。
gulp-stream-promise：将gulp-stream转换为Promise
02-03
为此，首先我们将每个吞没的蒸汽转换为Promise.all() ，然后通过Promise.all()组合它们以获得一个Promise.all() ，最后在Task函数中返回此多Promise.all() 。 该程序包用于将gulp流转换为promise。 用法 安装： $...
react-hoc-form-validatable:使用Promise验证高阶组件
05-14
所以从0.5.0开始需要react> 16.3.0 v0.4.0 validateLang现在是HOCForm中的可选道具 cancelablePromise修复未处理的拒绝承诺。 cancelablePromise现在仅在内部使用。 异步规则无需使用cancelablePromise 。
redux-track-promise:将promise状态同步到redux状态
05-16
redux-track-promise 一个小型redux库，其中包含一个化setPending器来处理setPending ， resolve和reject动作，以及一个trackPromise方法，该方法接受Promise并在承诺状态发生变化时分派这些动作。 我曾经写过很多...
学习【尚硅谷HTML5前端视频】主讲人李立超（上篇）
why_su的博客
01-04 8758
这位老师讲解的是真心好 地址(｡◕ˇ∀ˇ◕)。 1，这里使用 UTF-8 编码。 使用谷歌欧朋浏览器显示正常，但使用火狐，Edge，IE就是乱码，使用Sarifi浏览器也是乱码 这是为神马呢？ 因为谷歌欧朋浏览器默认解码是UTF-8，火狐IE（在中文系统）默认解码是GB2312，Sarifi浏览器默认解码是ISO-8859-1 解决方法：告诉浏览器编码格式 &lt;meta ch...
Redis高性能数据库/极速缓存技术-李强强-专题视频课程
qq_40139556的博客
07-10 542
Redis是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。从2010年3月15日起，Redis的开发工作由VMware主持。从2013年5月开始，Redis的开发由Pivotal赞助。...
尚硅谷Web前端Promise教程从入门到精通——笔记
weixin_58325898的博客
09-03 728
文章参考尚硅谷的promsie教程，其中包括些个人理解，有需要的同学可以自取~ 内容包括：Promise属性，Promise工作流程，Promise相关API，async和await
WEB前端开发[全套]-李强强-专题视频课程
qq_40139556的博客
03-13 520
本课程包括Html/CSS、Javascript、jQuery、 Node.js、Express JS 和 React及项目实战等方面，云知梦大牛讲师讲师带你掌握HTML及CSS基础、到网页布局+实践、到JavaScript开发阶段、在到进阶阶段之jQuery、后教你网站实践及优化调试，为您打开WEB前端工程师大门。...
b站视频-尚硅谷Web前端axios从入门到源码分析-笔记
weixin_44286392的博客
07-12 802
b站尚硅谷强哥axios视频笔记-从入门到源码分析
JavaScript异步编程的新解决方案-Promise笔记
BlackStar的博客
03-09 269
引言 这是我在B站上看的李强老师的【尚硅谷Web前端Promise教程从入门到精通】课程，记录的笔记，如果有什么不对的地方，希望大家可以提出来，一起互勉!!! 目录 一、Promise是什么？ 1.抽象表达 2.具体表达 二、异步编程的应用情景 三、为什么要用Promise？ 3、util.promisify 方法的介绍 四、promise 的状态改变 五、promise 对象的值 六、 如何使用Promise？ 1、API 2、Promis...
官宣：教父级讲师李明加入尚硅谷
尚硅谷铁杆粉丝的博客
01-17 5433
今天，2019年1月15日，教育培训行业又有大事件发生——教父级讲师、职场导师：李明，正式加入尚硅谷！随着李明老师的到来，尚硅谷师资团队更加星光璀璨：佟刚、韩顺平、李明、宋红康、周阳……你知道的技术大牛，均已在尚硅谷亲执教鞭。风云际会，大咖面授，堪称学子们难得的机遇。 李明，昵称“明哥”，久负盛名的Linux/LAMP技术大牛、教父级讲师、职场导师。国内早期的UNIX/Linux从业者，中国UN...
前端开发记录
qq_25806839的博客
05-31 264
【代码】前端开发记录。
浏览器阻止屏幕息屏,js阻止浏览器息屏,Web网页阻止息屏
最新发布
lianmindiandi
06-04 157
比如打开一个浏览器页面(比如大屏),想让它一直显示着,而不是过几分钟不操作就屏幕黑了.(电脑有设置电脑不操作就会多长时间就会息屏睡眠,如果要求每个客户都去操作一下电脑设置一下从不睡眠,这很不友好和现实.而且我也只想客户在大屏的时候才这样,其他页面就正常,按电脑设定走)如果想看看效果,可以试试,最好把电脑息屏改成1分钟,要不然等太久了, 累啊…(除非等待时间玩把手游😁)这是看了前端css大佬张鑫旭写的一波文章,观后有感😄,如果大家不认识,百度一波。是不是很简单,但是这里面还有一些注意点,
尚硅谷promise笔记
09-10
尚硅谷的Promise笔记涵盖了Promise的基本结构、状态和值、then方法、基本实现以及零碎知识。在笔记中，还介绍了Promise的用法和底层实现原理，包括中断promise链的方式和catch方法的使用。 总结起来，尚硅谷的Promise笔记提供了对Promise的全面理解和应用，帮助读者掌握Promise的使用方法和底层实现原理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值