• JS Promise


    1.Promise是什么

    Promise是用来表示一个对象,用来表示一个异步操作的结果(成功/失败)。

    ES6中引入。

    2.为什么需要Promise

    JS是单线程工作的。存在这样的需求:1.请求网络数据。2.等待网络数据返回后,针对数据进行操作。

    如果在主线程中同步顺序执行,会导致主线程的阻塞,用户体验不好。所以采用异步执行。而问题就是,需要保证在异步操作完成后,再执行对应的数据处理操作。

    之前异步操作是采用回调函数(callback)的方法进行的,结构复杂。使用Promise可以更好的实现。

    3.使用Promise的好处有哪些

    1.链式调用

    2.回调函数在当前JS 事件事件循环结束前不会被调用。

    (即保证在异步操作完成后执行回调函数)

    3.添加在.then()方法中的回调函数调用逻辑及时间点同2。

    (即.then(successCallback,failureCallback)中的callback方法不会被立即执行,会在Promise异步操作完成并resolved/rejected后才调用执行对应的callback)

    4.可以调用多个.then()来添加多个callback方法,callbacks按顺序独立执行。

    4.如何使用Promise

    Promise的语法

    new Promise(/*executor*/function(resolve,reject){...});

    Promise的状态:

    pending:初始态

    fulfilled:操作成功(resolved)

    rejected:操作失败

    Prmoise相关方法

    .all(iterable) 

    iterable promise任务列表

    返回一个fulfill/reject的Promise对象,当所有的promise任务列表中任务返回fulfill/reject结果。

    .race(iterable)

    返回一个fulfill/reject的Promise对象,只要promise任务列表中任一个任务返回fulfill/reject结果。

    .resolve(value) 

    操作成功回调函数

    .reject(value) 

    操作失败回调函数

    Promise原型方法

    .then() 链接

    .catch() 异常处理

    示例

    const myPromiseFunction = new Promise((resolve, reject) => {
        setTimeout(() => {
                let num = Math.random() * 10;
                if (num < 5) {
                    resolve(num);
                }
                reject(num);
            },
            1000)
    }).then(result => {
        console.log(result);
        console.log("successful callback");
    }, result => {
        console.log(result);
        console.log("failed callback");
    }).catch(() => {
        console.log("catch callback");
    });

    Prmose对象等待1000ms后,随机生成0~10数字,小于5则resolved,大于5则rejected。链式调用。


    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

  • 相关阅读:
    http协议
    web应用
    前端基础-jquery
    jQuery的事件
    2.UML类图基本介绍
    1.设计模式的七大原则
    使用OpenFeign远程调用时请求头处理报错问题
    SpringCloud Config-分布式配置中心
    19. 类加载器详解
    18. 类加载过程详解
  • 原文地址:https://www.cnblogs.com/cnsec/p/13547607.html
Copyright © 2020-2023  润新知