ES6 之 Promise 与 Class 类

已于 2023-07-07 19:32:27 修改
阅读量232 收藏
点赞数
文章标签： es6 javascript 前端
于 2023-05-04 17:48:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62872263/article/details/130162801
版权

初始Promise

认识 Promise
Promise 是异步操作的一种解决方案。

什么时候使用Promise
Promise一般用来解决层层嵌套的回调函数（回调地狱 callback hell）的问题

Promise 基本用法

实例化构造函数生成的实例对象
第一步：先实例化对象，然后后边加一个回调函数，回调函数内有两个形参；
语法：实例化构造函数内有一个回调函数

const p = new Promise((resolve, reject) => {
            resolve({usernme:'Alex'})
        })    // p 就是我们需要的 实例化对象

Promise 的状态 即是形参又是Promise内的函数
一开始是从：pending 等待状态；
执行resolve函数后：变成 fulfilled 满足状态；
或者是执行reject函数：变成 rejected 拒绝状态；

Promise 的状态一旦完成变化，就不会再改变了

resolve 和 reject 函数的参数
这两个函数是 可以传参给后面相对应的than()中的回调函数当作实参，需要设置形参来接收。

const p = new Promise((resolve, reject) => {
            reject(new Error('reason'))
        })

        p.then(()=>{
            console.log('success');
        },(err)=>{
            console.log('error',err);
        })

以下是3个 实例对象的方法：

then () 方法 ——非常重要

给实例对象 p 调用方法then，方法里有两个回调函数。

p.then(()=>{},()=>{})      // 里面有两个回调

  1. 什么时候执行？
    pending -> fulfilled 时，执行then的第一个回调函数；
    pending -> rejected时，执行then的第二个回调函数；
    状态不改变，then() 的回调函数都不会被执行

  2. 执行后的返回值
    then方法执行后返回一个新的Promise对象，可以继续接着then或catch，且then()是可以用return向后传值的

const p = new Promise((resolve,reject)=>{
            resolve()
        })
        
const p2 = p.then(
      ()=>{},
      ()=>{}
      ).then()
  1. then 方法返回的Promise对象的状态改变
    用then方法返回的Promise对象的状态来改变下一个then方法的回调：
    规则：在 then 的回调函数中，return后面的东西，会用Promise包装一下;
    比如：return undefined;
    等价于 返回了一个新的Promise对象，并默认用resolve ( ) 满意状态包装一下返回值
return new Promise((resolve,reject)=>{
                resolve(undefined)
            })

默认返回的永远都是成功状态的Promise对象。

示例：

const p = new Promise((resolve,reject)=>{
            reject()
        })
        
        const p2 = p.then(
            ()=>{},
            ()=>{
                return 123;
            }
            ).then(
            (date)=>{
                console.log(date);
            },
            ()=>{}   
            )

如果要返回的拒绝状态那就设置返回一个完整Promise构成函数，调用reject() 函数即可

return new Promise((resolve,reject)=>{
            reject('reason');
        })

实际开发中，一般用then的满足状态，只写一个回调函数

catch () 方法 —— 非常重要

专门用来捕获 rejected 状态的，catch本质上就是then的一个特例。
一般总是建议，Promise 对象后面要跟catch方法，这样可以处理Promise内部发生的错误。

new Promise ((resolve,reject)=>{
            reject('jhgkjh')
        })
        .catch(err =>{
            console.log(err);
        })

finally ()
当Promise状态发生变化时，不论如何变化都会执行。

Promise 的构造函数方法

  1. Promise.resolve ()方法
    是成功状态Promise的一种简写形式

参数：一般参数

Promise.resolve('foo').then(data => {console.log(data);})

参数：Promise对象
当Promise.resolve()接收的是Promise对象时，直接返回这个Promise对象，什么都不做

const p1 = new Promise (resolve =>{
            setTimeout(resolve,1000,'我执行了')
        })
        
        Promise.resolve(p1).then(data =>{
            console.log(data);
        })
        
        Promise.resolve(p1)===p1

传入对象的状态接管后面then的控制权，后面then会根据传递的Promise对象的状态变化决定执行哪一个回调

const p1 = new Promise (resolve =>{
            setTimeout(resolve,1000,'我执行了')
        })
        
        new Promise (resovle => resovle(p1)).then(data =>{
        console.log(data);    
        })
  1. Promise.reject () 方法
    是拒绝状态Promise的一种简写形式
Promise.reject('reason')

参数：
不管什么参数，都会原封不动地向后传递，作为后续方法的参数

Promise.all ()—— 非常重要

有什么用？
Promise.all() 关注多个Promise对象的状态变化
可以传入多个Promise实例，包装成一个新的Promise实例返回

  1. 基本用法
    Promise.all() 的状态变化与所有传入的Promise实例对象状态有关
    所有状态都成resolve，最终的状态才会变成rosolved
    只要有一个变成rejected，最终的状态就变成rejected
const delay = ms => {
            return new Promise(resolve => {
                setTimeout(resolve, ms)
            })
        }

        const p1 = delay(1000).then(data => {
            console.log('p1来了');
            return 'p1'
        })

        const p2 = delay(2000).then(data => {
            console.log('p2来了');
            return 'p2'
        })

        const p = Promise.all([p1, p2]);
        p.then(
            (date) => {
                console.log(date); 
            },
            (err) => {
                console.log(err);
            },
        )

const delay = ms => {
            return new Promise(resolve => {
                setTimeout(resolve, ms)
            })
        }

        const p1 = delay(1000).then(data => {
            console.log('p1来了');
            return 'p1'
        })

        const p2 = delay(2000).then(data => {
            console.log('p2来了');
            return Promise.reject('sfsf')
        })

        const p = Promise.all([p1, p2]);
        p.then(
            (date) => {
                console.log(date);
            },
            (err) => {
                console.log(err);

Promise.race () 方法

基本用法
Promise.race() 的状态取决于第一个完成的Promise实例对象，
如果第一个完成的成功了，那最终的就成功；如果第一个完成的失败了，那最终的就失败

const delay = ms => {
            return new Promise(resolve => {
                setTimeout(resolve, ms)
            })
        }

        const p1 = delay(1000).then(data => {
            console.log('p1来了');
            return Promise.reject('第一个实例对象来决定状态')
        })

        const p2 = delay(2000).then(data => {
            console.log('p2来了');
            return 'p2'
        })

        const racePromise=Promise.race([p1,p2])
        racePromise.then(
            (data)=>{
                console.log(data);
            },
            (err)=>{
                console.log(err);
            }
        )

Promise.allSettled () 方法

基本用法：
Promise.allSettled() 的状态与传入的Promise状态无关
永远都是成功的
它只会忠实的记录下各个Promise的表现

Promise 的注意事项

resolve 或 reject 执行后的代码
实际上还可以可以执行后面的代码语句，但还是
推荐在调用resovle 或 reject函数的时候加上return，不再执行它们后面的代码。

Promise.all/race/allSettled的参数问题
参数如果不是Promise数组，会将不是Promise的数组转变成Promise 对象

Promise.all([1,2,3]).then(datas =>{
            console.log(datas);
        })

不只是数组，任何可遍历的都可以作为参数

Promise.all(new Set([1,2,3])).then(datas =>{
            console.log(datas);
        })

Promise.all/race/allSettled的错误处理

错误既可以单独处理，也可以统一处理
一旦被处理，就不会在其他地方再处理一遍

Promise 的应用

异步加载图片

const loadimgAsync = url =>{
// Promise内不需要写太多的语句，只须写明什么情况一下调用resolve（）函数，什么情况下调用reject（）函数即可，具体的语句要在then()方法里来写
            return new Promise((resolve,reject)=>{
                // 实例化一个图像构成函数
                const img = new Image();
                
                // 成功加载的时候
                img.onload = ()=>{
                    resolve(img);
                } 
				//加载错误时
                img.onerror = ()=>{
                    reject(new Error(`Could not load image at ${url}`));
                } 
                // 把实参传给对象的src属性
                img.src = url;

            })
        };
        const myImg = document.querySelector('img');

        loadimgAsync('https://pic4.zhimg.com/80/v2-60cebf105e36cb2983964c95960ec75b_1440w.webp')
        .then(img=>{
            // console.log(img.src);
            setTimeout(()=>{
                myImg.src = img.src
            },2000)
        }
        // 还要写错误的情况下捕获语法
        ).catch(error=>{
            console.log(error);
        })

Class 类

认识Class

类可以看做是对象的模版，用一个类可以创建出许多不同的对象

Class的基本用法

所有的类都必须有构造方法
实例化时执行构造方法，但可以不写出来

class Person{
            constructor(name,age){
                this.name=name;
                this.age=age;
                this.speak=()=>{
                    // 一般在构造方法中定义属性，方法不在构造方法中定义
                }
            }
            // 各实例共享的方法
            speak(){}
        }

        const p = new Person('zs',18);
        const ls = new Person('ss',28);
        console.log(ls.name);
        console.log(p.age);
        console.log(ls.speak());

Class 与构造函数

本质相同，都是函数
Class类更加简单直观

class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            // 各实例共享的方法
            speak() { }
        }

Class的两种定义形式

声明形式

class Person {
            constructor(){}

            speak(){}
        }

表达式形式

const Person = class{
            constructor(){
                console.log('constuctor');
            }

            speak(){}
        }
        new Person()

匿名类 （立即执行的类）

new (class{
            constructor(){
                console.log('sfsf');
            }
        })();

实例属性、静态方法和静态属性

1.实例属性

class Person{
            // 可以直接例出 实例属性的默认值； 与构造方法平行
            age =0;
            sex = 'male'
            constructor(age, sex){
                // 构造方法里的属性必须加this. 才知道给实例对象添加属性
                // this指向的是实例对象
                this.age = 18;
                this.sex = sex;
            }

        }
        const p=new Person(20,'Alex');
        console.log(p.age);
  1. 静态方法
    也就是类的方法，先在方法前用static声明 ，然后直接用类来调用
class Person{
          static speak(){
                console.log('人类可以说话');
                // 这里的this指向的是类
            }
        }
        
        Person.speak()
  1. 静态属性（选学）
    也就是类的属性 用类的方法来写， return 值即可

私有属性和方法

为什么需要私有属性和方法
一般情况下，类的属性和方法都是公开的
公有的属性和方法可以被外界修改，造成风险

  1. 模拟私有属性和方法
    _ 开头表示私有
constructor(name, age) {
                this._name = name;
                this._age = age;
                this.say = function () {
                    
                }

            }

将私有属性和方法移出类
这是第二种方法
都放在匿名函数中，使外部不能直接访问到它

(function () {
            let name = '';
            class Person {
                constructor(username) {
                    // this.name = name;
                    name=username
                }
                speak() {
                    console.log('speak');
                }

                getName(){
                    return name
                }

            }
            // 暴露出来
            window.Person=Person
        })()
        
        const p = new Person('Alex');
        console.log(p.getName());

extends

子类继承父类 （父类的所有属性和方法都继承了）

class Person{
            constructor(name,sex){
                this.name=name;
                this.sex=sex;

                this.say = function(){
                    console.log('say');
                }
            }

            speak(){
                console.log('speak');
            }

            static speak(){
                console.log('static peaek');
            }
        }
	//类的属性
        Person.version = '1.0';


        class Programmer extends Person{
            constructor(name,sex){
                super(name,sex)
            }
        }
        const zs=new Programmer('zs','男')

        console.log(zs.name);
        console.log(zs.sex);
        zs.say();
        zs.speak();
        Programmer.speak()
        console.log(Programmer.version);

改写继承的属性或方法
同名的会覆盖父类的属性

class Programmer extends Person{
            constructor(name,sex,feature){
                super(name,sex)
                //this要放在super后边，子类this添加独有属性
                this.feature = feature;
            }
		//同名覆盖
            speak(){
                console.log('Programmer speak');
            }
        }
        Programmer.version = '2.0'

super

1.作为函数调用
代表着父类的构造方法，只能用在子类的构造方法中
super虽然代表了父类的构造方法，但是内部的this指向仍是子类的实例

2.作为对象使用
2.1在构造方法中使用或一般方法使用
super代表父类的原型对象 Person.prototype，所以父类公共的方法是可以直接被super来调用的
但定义在父类实例上的方法或属性，是无法通过super对象来调用的
通过super调用父类的方法时，方法内部的this指向子类实例

class Person{
            constructor(name,sex){
                this.name=name;
                this.sex=sex;
	//构造方法里的属性和方法如果被子类继承，this指向子类的实例
                this.say = function(){
                    console.log('say');
                }
            }

            speak(){
                console.log('qo speak');
            }

            static speak(){
                console.log('static peaek');
            }
        }

        Person.version = '1.0';


        class Programmer extends Person{
            constructor(name,sex,feature){
            //作为函数，代表父类的构造方法，只能用在子类的构造方法中
                super(name,sex);
             //作为对象，super代表父类的原型对象 Person.prototype
                super.speak()

                this.feature = feature;
//在父类公共方法基础之上，加上独有的方法 
speak(){
	super.speak();
	console.log('doyou peaek');
}
		
            }

2.2 在静态方法中使用
super指向父类的静态方法，而不是作为父类的原型对象
通过super调用父类的静态方法时，方法内部的this指向当前子类

static speak(){
                super.speak();
                console.log('Programmer speak');
            }
            
        }
        Programmer.version = '2.0'

        const zs=new Programmer('zs','男','身休')

        
        Programmer.speak()

3.注意事项
使用super的时候，必须显式指定是作为函数还是作为对象使用，否则会报错

m0_62872263
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ES6 类(Class)基本用法和静态属性+方法详解
12-20
ES6 类(Class)基本用法和静态属性+方法详，博客地址：http://blog.csdn.net/pcaxb/article/details/53759637
3.Promise与Class类
weixin_49537836的博客
03-19 225
一、Promise 二、Class类
【Javascript笔记07】ES6中的Class
JJY的博客
08-24 185
目录ES6中的Class一、class的使用二、类的原型三、getter和setter四、this的指向五、继承 ES6中的Class 一、class的使用 class就是类，是一般面向对象语言所具有的特性，类里面可以包含属性和方法，在JavaScript中也有类似的东西。在ES6之前，通过“类”的概念生成实例对象的方法是通过构造函数实现的： function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = fu
Javascript class获取回调函数数据
weixin_33708432的博客
04-20 845
/********************************************************************** * Javascript class获取回调函数数据 * 说明： * 在使用Javascript class的时候，发现this指针和之前的理解有差异。 * * ...
es6 类class的使用以及promise(异步请求)基础
weixin_44348028的博客
04-07 4321
类的继承 //class类的使用 class ai{ constructor(hp,speed) { this.hp = hp; this.speed = speed; } move(){ //:function可以省略 console.log(`速度是${this.speed}`) } } class addai extends ai{ /...
ES6手写Promise
最新发布
08-08
使用ES6 class语法实现简易版的手写Promise 实现 then 链式调用、catch、finally、和静态方法resolve，reject，注释清晰，逻辑清晰,同时使用queueMicrotask 来排队执行，确保处理微任务逻辑的正确性
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
08-30
在ES6中，类（Class）和继承（Extends）是两种重要的新特性，它们引入了更接近传统面向对象编程的语法，使JavaScript在表达对象和类的关系时更加清晰。 一、类（Class） 1. **基本语法**： 在ES5中，我们通常使用...
es6：ES5与ES6参考
02-05
类与继承 ES6引入了`class`关键字，提供了一种更面向对象的语法糖。虽然在底层仍然是基于原型的继承，但`class`简化了构造函数、方法定义以及继承。`super`关键字用于调用父类的方法或构造函数。 ```javascript ...
es6学习笔记之Async函数的使用示例
08-30
async函数是Generator函数的一种语法糖，它允许你在函数中使用await关键字来等待一个Promise的结果，而无需嵌套回调函数或手动管理Promise链。 首先，让我们深入了解一下栗子一。这个例子展示了如何使用async函数从...
es6学习笔记之Async函数基本教程
08-30
ES6中的Async函数是异步编程的一种新方法，它的出现极大地简化了处理异步操作的代码，特别是与Promise对象结合使用时。Async函数是Generator函数的语法糖，它内置了执行器，使得异步操作更加直观和易于理解。 1. ...
ECMAScript 6-promise学习与使用【es6含真实接口】
前端开发工程师
12-19 5507
es6-promise学习与使用 es6-promise介绍与基本使用 promise是ES6引入的异步编程的新解决方案，语法上市promise是一个构造函数，用来封装异步操作并可以获取奇成功或失败的结果【解决回调地狱问题】 Promise构造函数 ：Promise {excutor}{ } Promise.prototype.then方法 Promise.prototype.catch方法 ...
JavaScript ES6 class类(this关键字)总结
tonny7501的博客
01-06 3919
ES6实现了class关键词,使js模块化编程更加简洁, 下面是关于class继承的一小点总结, 详细请参照这位大神的详细介绍(点击) 具体class的原理这边就不写了, 看上面的链接即可, 这边只是个人的一点总结吧 class类的this 在JS中this关键字用的非常多, jq中的this, 原生js的this和class中的this代表的含义都不一样, 问题就出现在如果这3中情况都用在...
（10）es6——面向对象Class
浪头的博客
04-21 1399
什么是面向过程编程? 面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步步的实现，作为前端人员来说对于这种方式应该已经不陌生了。 使用的时候再一个个的依次调用就可以了。 比如：打开冰箱门-->大象装进去-->关上冰箱门。 总结：面向过程就是按照我们分析好了的步骤，按照步骤解决问题。 // 声明3个回调函数，三个回调函数分别对应程序的三个过程 const open_the_door = function() { console.log("开门"); }; const
es6里面处理多层回调的多种方法及其缺点
qq_37016928的博客
06-16 1749
  const fs = require('fs'); //第一种的常用的回调函数，本身没有什么问题，但是问题是出现多个回调函数的嵌套式时，会形成回调地狱，既不利于读也不利于管理 function fn() { fs.readFile('./req.html',(err,data)=>{ if(err){ return err; ...
es6中class使用详解
sysuzhyupeng的博客
02-14 1267
class基本语法 function Parent(job){ this.job = job } Parent.prototype.showJob = function(){ alert(this.job); } var p = new Parent('teacher');通过class关键字的语法糖，es6的写法为 class Paren
在ES6类中绑定事件
目尽地平线
08-19 1万+
如何在ES6的类中写事件回调函数？如何访问类的this变量 ？如何隐藏事件回调函数，使外部不能访问
TypeScript ES6-Promise 递归遍历文件夹中的文件
weixin_33724570的博客
10-29 951
貌似很多人都爱用这个作为写文章的初尝试，那来吧。遍历文件夹下的所有文件，步骤如下：1、传入一个路径，读取路径里面所有的文件；2、遍历读取的文件，判断当前文件是文件还是文件夹；3、if: 前目录为文件，输出当前文件绝对路径，return；4、else: 当前目录为文件夹，获取文件夹路径，继续递归遍历该文件夹下的文件；5、直至遍历完目录中的所...
JS中的回调函数，以及ES6中通过promise处理回调
热门推荐
liwusen的博客
01-06 2万+
简要介绍：ES6中，可以通过promise来处理回调函数，回调函数经常用于异步操作中，间接来说，可以通过promise优化异步操作。1.什么是JS中的回调函数？回调函数是作为参数传递给另外一个函数，并且改回调函数在函数主题执行完后再执行。举例来说：function callback(m,n){ alert("我是回调函数，我在执行"); return m+n }function myFuncti
es6-promise.auto.js
09-04
es6-promise.auto.js是一个JS库，用于自动检测和加载ES6 Promise的polyfill。它的作用是在不支持ES6 Promise的浏览器中自动加载相应的polyfill，以确保代码的兼容性。这个库通过检测浏览器是否原生支持Promise来确定是否需要加载polyfill，并且在加载之前会先检查是否已经加载过，以避免重复加载。这样，我们就可以在任何环境中使用ES6 Promise的特性，无需手动引入polyfill。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [（14）es6——promise](https://blog.csdn.net/weixin_44242181/article/details/124382494)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值