• Promise对象--Mr.Ember


    Promise对象--Mr.Ember

    摘要

    所谓promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)

    promise对象有一下特点:

    1. 对象的状态不受外界影响

    2. 一旦状态改变就不会再变,任何时候都可以得到这个结果。

    有了promise对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套函数。

    Promise.prototype.then()

    1.then方法下一次的输入需要上一次的输出
    2.如果一个promise执行完后,返回的还是一个promise,会把这个promise的执行结果传递给下个then中
    3.如果then中返回的不是Promise对象而是一个普通值,则会将这个结果作为下次then的成功结果
    4.如果当前then中失败了 会走下一个then的失败
    5.如果返回的是undefinded不管当前是成功还是失败,都会走下一次成功
    6.catch是错误没有处理的情况下才会走
    7.then中不写方法则会穿透,传入下一个then中
     
    Promise.prototype.catch()
    Promise.prototype.catch方法是.then(null, rejection)的别名,用于指定发生错误时的回调函数。
    p.then((val) => console.log('fulfilled:', val))
        .catch((err) => console.log('rejected', err))
    //等同于
    p.then((val) => console.log('fulfilled:', val))
        .then(null, (err) => console.log('rejected', err))

    Promise.all()

    Promise.all将多个Promise实例包装成一个新的Promise实例。

    var  p = Promise.all([p1, p2, p3]);
    p的状态由p1,p2,p3决定,分为两种情况:
    1. 只有p1, p2, p3的状态都为Fulfilled,p的状态才会变成Fulfilled,此时p1,p2,p3的返回值成一个数组,传递给p的回调函数。
    2. 只要p1,p2,p3有一个被rejected,p的状态就会变成Rejected,此时第一个被rejected的实例的返回值会传递给p的回调函数。
     
    Promise.race()
    Promise.race也是将多个Promise实例包装成一个新的Promise实例。
    var  p = Promise.all([p1, p2, p3]);

     上述代码中,只要p1, p2, p3有一个实例率先改变状态,p的状态就跟着改变。那个率先改变Promise的实例的返回值就传递给p的回调函数。

    Promise.resolve()

    有时需要将现有的对象转为Promise对象,Promise.resolve方法就起到了这个作用。

    var jsPromise = Promise.resolve($ajax('/whatever.json'));
    上面的代码会将JQ代码生成的deferred对象转换为新的promise对象。
     
    Promise.reject()
    Promise.reject会返回一个新的Promise实例,状态为Rejected
    var p = Promise.reject('出错了')
    //等同于
    var p = new Promise((resolve, reject) => reject('出错了')

    p.then(null, function(s){
      console.log(s)
    })

    Promise.done()

    无论Promise对象的回调链以then的方法还是catch的方法结尾,只要最后一个放大抛出错误,都有可能无法捕捉到(因为Promise内部错误不会冒泡到全局)。为此我们可以提供一个done方法,它总是处于回调链的尾端,保证抛出任何可能出现的错误。

    asyncFunc()
        .then(f1)
        .catch(r1)
        .then(f2)
        .done();
    内部实现
    Promise.prototype.done =  function (onFulfilled, onRejected) {
       this.then(onFulfilled, onRejected)
         .catch(function(reason) {
    //全局抛出一个错误 setTimeout(()
    => {throw reson}, 0); }) }

    Promise.finally()

    finally方法用于指定Promise对象最后状态如何都会执行的操作。他与done的区别在于,它接受一个普通的回调函数作为参数,该函数不管什么状态都会执行。

    模拟实现promise
    实现步骤:
    1.promise 有个then函数,需要有个callback函数来保存回调函数
    2.可能会又多个resolve调用处理,添加一个开关变量,仅使第一个resolve函数可以使用
    3.当出现多个then函数时,把callback属性改变成数组格式,保存每一个then的回调函数
    4.支持then链式调用,执行完then函数后返回this即可
    5.支持异步的链式调用,判断当前函数是个对象并且还有.then函数,需要继续调用then,否则跟原来一样调用
     
     
    function MyPromise(fn) {
        var _this = this;
    
        //用来保存then传入的回调函数
        this.callback = [];
        //处理 第一个resolve有效
        this.isResolved = false;
    
        function resolve(val) {
            if(_this.isResolved) return;
            _this.isResolved = true;
    
            if(_this.callback.length > 0) {
                _this.callback.forEach(item => {
                    // func && func(val)
                    var res, cb = item.cb, resolve=item.resolve;
    
                    cb && (res = cb(val))
                    if(typeof res === 'object' && res.then) {
                        res.then(resolve)
                    }else {
                        resolve && resolve(res)
                    }
                    
                });
            }
        }
    
        fn(resolve);
    }
    
    MyPromise.prototype.then = function(cb) {
        var _this = this;
        return new MyPromise(function(resolve) {
            _this.callback.push({
                cb: cb,
                resolve: resolve
            })
        })
    }
    
    var  p = new MyPromise(function(resolve) {
        console.log(1)
        setTimeout(function() {
            resolve(2)
            resolve(4)
            resolve(5)
            resolve(6)
        }, 1000)
    })
    
    p.then(function(val) {
        console.log(val)
        return new MyPromise(function(resolve) {
            setTimeout(function() {
                resolve(val + 1)
            }, 1000)
        })
    }).then(function(val) {
        console.log(val)
    })

     打印结果

     先打印1,过了一秒打印2,再过一秒打印3

     
  • 相关阅读:
    python3 使用opencv 画基本图形
    python 打印 九九表
    Python Date 1–Hello world print
    Linux下 Nginx+vsftpd搭建FTP服务器详细步骤
    Linux 开启端口命令
    No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK Maven异常解决方案
    React Fullpage
    Mint-UI组件 MessageBox为prompt 添加判断条件
    简易搭建本地静态服务器
    Mint-UI Picker 三级联动
  • 原文地址:https://www.cnblogs.com/teteWang-Ember/p/10375485.html
Copyright © 2020-2023  润新知