Promise用法

起因:回调地狱,在回调中嵌套回调,写起来很复杂
有大佬创造了Promise(承诺、期约),让异步操作更加优雅

Promise的使用

Promise是一个构造函数,用new关键字实例化一个Promise对象

语法:
new Promise((resolve,reject)=>{ resolve() || reject() }):
Promise.resolve() || Promise.reject()

1、 Promise接受一个函数作为参数
2、 在参数函数中接受两个函数参数: resolve:成功函数、reject:失败函数
3、 Promise实例有两个非常重要的属性:state:状态 result:结果

在这里插入图片描述

Promise有三种状态
1、pending:准备,待解决
2、fulfilled:解决,已完成
3、rejected:失败,已拒绝

Promise状态的改变

通过调用resolve()和reject()改变当前Promise对象的状态

在这里插入图片描述

Promise的结果

使用参数来设置promise的结果值

在这里插入图片描述

Promise的方法

Promise原型对象上的方法catch()、finally()、then()

then方法(核心)

then()接受两个参数:分别是一个成功函数和一个失败函数

在这里插入图片描述

Promise实例的结果值指向then()方法的参数函数的参数

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

then()方法还返回一个新的Promise实例

因为then方法返回一个新的Promise实例,该实例还可以接着使用then方法,当然,必须等到上一个then方法的返回值,也就是新的Promise实例的状态改变后,下一个then方法才会接着执行
(跟之前的回调地狱一样,一个回调后继续执行下一个回调,只不过写起来更优雅更直观了,还可以使用链式写法,让代码更加优雅)

在then方法中,通过return将返回的新Promise实例的状态改为fulfilled状态并且设置新实例的结果值

在这里插入图片描述

如果then方法中代码出现错误,则返回的promise实例为rejected拒绝状态
也可以直接return一个new Promise(()=>{})来设置返回值的状态和结果值
如果不设置return 也会执行下一个then方法的值,状态为fulfilled(这个保留疑问)

catch方法

只接受一个参数,一个失败函数处理程序

1、 在promise实例处于rejected拒绝状态时会执行
2、 当Promise执行体出现错误代码时会执行

catch方法等同于Promise.prototype.then(null,onRejected)
开发中一般用catch方法,也就是then方法里面只写成功时候执行的代码,失败时执行的代码写在catch方法中

在这里插入图片描述

Finally()方法

Finally()方法在promise实例状态转为fulfilled或者fulfilled时都会执行。可以避免成功函数和失败函数中的冗余代码

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promise是一种异步编程的解决方案,它可以避免回调地狱,使得异步操作更加清晰和易于维护。Promise有三种状态:pending(进行)、fulfilled(已成功)和rejected(已失败)。当Promise处于pending状态时,可以转换为fulfilled或rejected状态,一旦转换为其一种状态,就不可再转换为其他状态。 Promise的基本用法如下: ```javascript const promise = new Promise((resolve, reject) => { // 异步操作 if (/* 异步操作成功 */) { resolve(value); // 将Promise状态设置为fulfilled,并将异步操作的结果传递给回调函数 } else { reject(error); // 将Promise状态设置为rejected,并将错误信息传递给回调函数 } }); promise.then((value) => { // 异步操作成功时的回调函数 }, (error) => { // 异步操作失败时的回调函数 }); ``` 另外,Promise还提供了一些静态方法,如Promise.resolve和Promise.reject,可以方便地创建已经处于fulfilled或rejected状态的Promise对象,以及Promise.all和Promise.race等方法,可以处理多个Promise对象的状态。 下面是一个使用Promise的例子,通过异步加载图片并在加载完成后显示图片: ```javascript function loadImageAsync(url) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = function() { resolve(img); }; img.onerror = function() { reject(new Error('Could not load image at ' + url)); }; img.src = url; }); } loadImageAsync('https://example.com/image.jpg') .then((img) => { document.body.appendChild(img); }) .catch((error) => { console.error(error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值