ES6中promise的用法详解

本文详细介绍了ES6中的Promise对象,包括它的概念、为什么使用、优点以及Promise的属性和API。通过实例解析了Promise的状态转换、链式调用、异常处理和Promise.all()、Promise.race()方法。同时探讨了async/await的使用,展示了如何通过它们简化异步编程。
摘要由CSDN通过智能技术生成

目录

前言

一.promise是什么?

(1)回调监狱

(2)promise定义

二.为什么要使用promise?

三.promise的优点

四. promise的属性

(1)PromiseState:

(2)PromiseResult 

五.Promise对象的API

(1)catch

(2)Promise.resolve()

(3)Promise.reject()

(4)Promise.all()

(5)Promise.race()

六.promise对象的注意事项

(1)怎样改变 promise 的状态?

(2)promise 指定多个成功/失败回调函数的调用顺序

(3) promise 状态和指定的改变,回调函数的执行顺序

1>  正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调;

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

3>何时才能得到数据? 

(4)promise.then()返回新的 promise 的结果状态如何决定? 

 (5)promise 串连多个操作任务

(6)promise 的异常传透

(7) 中断promise调用链

七.使用async和await关键字

(1)async关键字

 (2)await关键字


前言

Promise对象的存在使得我们在处理异步操作的时候写法更加简洁,且结合asyncawait关键字使用的话会让代码更加清晰和优雅。

一.promise是什么?

(1)回调监狱

在学习promise之前,我们需要先来看一下我们以前在JS中是如何处理异步操作的,我们通常会使用回调函数,但回调函数虽然能够解决我们实现异步操作队列化的需求。但当出现一个方法中嵌套着多个回调函数的时候,此时代码的结构就会冗余,也就是出现回调地狱的问题。

 然而Promise对象的产生则能够帮助我们较为优雅地解决多个回调函数嵌套的问题,让我们的JS代码结构更加清晰,维护起来更加方便。

(2)promise定义

Promise 是一种异步编程的解决方案,一般来说,我们封装一个网络请求的函数,因为不能立刻返回结果,所以我们可以将其传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调回去。其实它就是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。

二.为什么要使用promise?

由于ajax和axios请求很重要。通俗来说,可能因为网速的不同,得到的返回值的时间也会不同,但是下一步要执行的代码依赖于上一次请求返回值,只有等结果出来了才知道如何下一步操作。

三.promise的优点

  • .Promise 对象提供了简洁的API,使得控制异步操作更加容易;
  • 避免多层异步调用嵌套问题(回调地狱);

四. promise的属性

Promise对象上主要有着PromiseStatePromiseResult两个属性。

(1)PromiseState:

PromiseState 表示Promise对象中函数的执行结果,主要有以下三个状态:

  • pending: 一个等待状态,或者进行中状态,表示还没有得到结果;
  • fulfill(resolve):一个满足状态,当主动回调resolve时,就处于该状态,并且会回调.then();

  • reject:一个拒绝状态,当主动回调reject时,就处于该状态,并且会回调.catch();

 注:

  • 这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆。
  • 一个 promise 对象只能改变一次状态, 无论变为成功还是失败, 都会有一个结果数据, 成功的结果数据一般称为 value, 失败的结果数据一般称为 reason。

(2)PromiseResult 

PromiseResult 表示Promise对象函数中传递给resolve或者reject方法的参数,一般会在then方法中通过value或者reason形参来接收到这个参数。

五.Promise对象的API

(1)catch

可以在then中指定失败的回调函数,还可以通过Promise对象.then().catch()来进行失败函数的执行:

    <script>
        const p = new Promise((resolve,reject)=>{
            reject('aaa'); 
        })
        p.then(value=>{
            console.log(value);
        }).catch(reason=>{
            console.error(reason);
        })
    </script>

注:如果在then和catch中都指定了失败的回调函数,那么只会执行then方法中定义的回调函数。

(2)Promise.resolve()

Promise中提供了一个resolve方法来快速创建Promise对象,resolve方法中可以接受参数,如果传入的参数为非Promise类型的对象, 则返回的结果为成功promise对象。如果传入的参数为 Promise 对象, 则参数的结果决定了resolve 的结果。

    <script>
        const p1 = Promise.resolve('aaa');
        const p2 
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值