Promise对象的使用

这篇具有很好参考价值的文章主要介绍了Promise对象的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、什么是Promise

Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理和更强大。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。

二、Promise 的特点

1、对象的状态不受外界影响。 Promise对象代表一个异步操作,有三种状态:pending(进行中)fulfilled(已成功)rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。

2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。 Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。 只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。

三、then 方法

1、它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是fulfilled(已成功)状态的回调函数,第二个参数是rejected(已失败)状态的回调函数,它们都是可选的。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>

    //设置口袋的钱金额
    //var money = 100
    var money = 90

    //购物方法
    function goShop(m) {
        return new Promise((resolve, reject) => {
            if (m >= 100) {
                resolve("购物愉快")
            } else {
                reject("钱不够了")
            }
        });
    }

    //进行购物
    goShop(money).then(msg => console.log(msg), err => console.log(err))

</script>
</html>

运行结果:

Promise对象的使用

2、then方法返回的是一个 新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>

    //设置口袋的钱金额
    var money = 100

    //购物方法
    function goShop(m) {
        return new Promise((resolve, reject) => {
            if (m >= 100) {
                resolve("购物愉快")
            } else {
                reject("钱不够了")
            }
        });
    }

    //进行购物
    goShop(money).then(msg => '恭喜你!' + msg).then(msg => alert(msg))

</script>
</html>

运行结果:

Promise对象的使用

四、catch()方法

1、如果异步操作抛出错误,状态就会变为rejected(已失败),就会调用catch()方法指定的回调函数,处理这个错误。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>

    //设置口袋的钱金额
    var money = 90

    //购物方法
    function goShop(m) {
        return new Promise((resolve, reject) => {
            if (m >= 100) {
                resolve("购物愉快")
            } else {
                throw new Error('钱不够了');
            }
        });
    }

    //进行购物
    goShop(money).then(msg => alert('恭喜你!' + msg)).catch(err => alert('对不起!' + err.message))

</script>
</html>

运行结果:

Promise对象的使用

2、then()方法指定的回调函数,如果运行中抛出错误,也会被catch()方法捕获。

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>

    //设置口袋的钱金额
    var money = 100

    //购物方法
    function goShop(m) {
        return new Promise((resolve, reject) => {
            resolve("消费了:"+m+"元")
        });
    }

    //进行购物
    goShop(money)
        .then(msg => {
            console.log(msg)
            throw new Error('请继续充值');
        })
        .catch(err => alert('对不起!' + err.message))

</script>
</html>

运行结果:

Promise对象的使用
Promise对象的使用文章来源地址https://www.toymoban.com/news/detail-423557.html

到了这里,关于Promise对象的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端面试:【异步编程】Callback、Promise和Async/Await

    嗨,亲爱的JavaScript探险家!在JavaScript开发的旅程中,你会经常遇到异步编程的需求。为了处理异步操作,JavaScript提供了多种机制,包括Callbacks、Promises和Async/Await。本文将深入介绍这些机制,让你能够更好地处理异步任务。 1. Callbacks:传统的异步方式 Callbacks是JavaScript中最早

    2024年02月11日
    浏览(74)
  • 前端异步编程全套:xmlhttprequest > ajax > promise > async/await

    同步与异步区别 同步:按顺序,依次执行,向服务器发送请求--客户端做其他操作 异步:分别执行,向服务器发送请求==同时执行其他操作 原生xmlhttprequest 四步骤 创建ajax对象 设定数据的传输方式(get、post),打开连接open() 获得响应数据 属性 描述 onreadystatechange 当readysta

    2024年02月01日
    浏览(59)
  • ES9学习 -- 对象的剩余参数与扩展运算符 / 正则扩展 / Promise.finally / 异步迭代

    // kerwin {age:100,location: ‘dalian’} 其中…other 可以拿到对象的剩余参数 // {name: ‘xiaoming’,location: ‘dalian’,age: 18] 在实际开发中,我们会使用ajax() 封装一些默认的属性和属性值,以备用户忘记或未传入某些参数。 // { methods: “get”, async: true, url: “/api”} 正则表达式命名捕获

    2024年04月09日
    浏览(38)
  • 【angular教程240111】08异步数据流编程与angular :promise,Rxjs6.x

    【angular教程240111】08异步数据流编程与angular :promise,Rxjs6.x 三级目录 异步与 Rxjs6.x异步数据流编程-Angular Rxjs快速入门 一、 Rxjs介绍 二、 Promise和RxJS 处理异步对比 三、 Rxjs unsubscribe取消订阅 四、 Rxjs 订阅后多次执行 五、 Angualr6.x之前使用Rxjs的工具函数map filter 六、 Angualr6

    2024年02月02日
    浏览(42)
  • Promise对象的使用

    Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理和更强大。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。 1、 对象的状态不受外界影响。 Promise对象代表一

    2023年04月24日
    浏览(30)
  • JS中使用Promise.all控制所有的异步请求都完成后,在执行后续逻辑

    使用场景为,在js中连续的几个异步耗时操作,后面的耗时操作需要使用第一个操作的返回结果。例如调用ajax异步接口,需要先创建完主表,然后拿到主表id在去循环创建明细表,等全部创建完成后,弹出提示来,或者失败提示。 通常情况,在耗时操作完成后在去调用,需要

    2024年02月13日
    浏览(43)
  • JS中Promise对象及其使用方式

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月09日
    浏览(32)
  • 循环异步调取接口使用数组promiseList保存,Promise.all(promiseList)获取不到数组内容,then()返回空数组

    在使用 vue + vant@2.13.2 技术栈的项目中,因为上传文件的接口是单文件上传,当使用批量上传时,只能循环调取接口;然后有校验内容:需要所有文件上传成功后才能保存,在文件上传不成功时点击保存按钮,则提示信息: \\\"文件上传未成功!\\\" 。 我使用 for 循环调取接口,然

    2024年01月18日
    浏览(38)
  • 【异步系列三】10道 Promise 面试题彻底理解 Promise 异步执行顺序

    上一篇文章详细说明了关于 Promise 的概念以及执行顺序,Promise 作为 JavaScript 中的关键特性,无论是在日常工作中还是面试中,我们都必须掌握它。 前段时间在网上看到了一些关于 Promise 的面试题,质量很好,在这里整理到下面,并加上我一些自己的见解,欢迎斧正! 1. 同步

    2024年02月09日
    浏览(47)
  • 什么是异步编程?什么是回调地狱(callback hell)以及如何避免它?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月10日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包