zoukankan      html  css  js  c++  java
  • Promise 的 用法及实现

    Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。

    语法
      new Promise( function(resolve, reject) { 函数体 });

    在函数体中,调用 resolve 会把状态改为成功 , reject 把状态改为失败,状态只可操作一次.

    状态改变之后,会继续执行Promise的then函数

    Promise 对象一共有三个状态 ( [[ PromiseStatus ]] ) :

      pending : 初始状态

      fullfilled : 成功

      rejected : 失败 

    Promise的方法很少:

      Promise.all( Promise数组 )

        当 所有的Promise的状态成功后,执行成功,有任何一个Promise失败时 则立刻执行失败

      Promise.race( Promise数组 )

        以第一个状态改变的 promise 的状态 来确定 成功 还是 失败

      Promise.reject( str )

        任务失败

      Promise.resolve( value )

        任务成功

      Promise.prototype.catch( onRejected )

        捕获过程中的错误

      Promise.prototype.then( onFulfilled , onRejected )

        处理成功或者失败的状态

    接下来 我们用js脚本来实现一个 Promise 的简单实现

    function _Promise( func ){
        var status = 'pending';
        var then_success_array = [];
        var then_fail_array = [];
        function resolve(){
            if( status === 'pending' ){
                status = 'fullfilled';
            }
            runNext()
        }
        function reject(){
            if( status === 'pending' ){
                status = 'rejected';
            }
            runNext()
        }
        function runNext(){
            // 在这里运行 then 函数
            if( status === 'fullfilled' ){
                then_success_array.forEach(function(value){
                    value();
                })
            }else{
                then_fail_array.forEach(function(value){
                    value();
                })
            }
        }
        this.then = function( onS , onF ){
            then_success_array.push(onS);
            then_fail_array.push(onF)
        }
        func(resolve,reject)
    }
  • 相关阅读:
    iconfont 引入后没有显示
    使用element-ui库时浏览器出现异常汉字(代码里找不到该汉字)
    ElementUI select 把整个option(对象)作为值
    不让浏览器history后退前进
    从IE浏览器链接跳转到谷歌浏览器方法
    mddir 可以生成项目工程结构
    Element-UI select 新加全部与多选互斥选择
    H5 video 常用属性
    a链接跳转报错 status为 canceled的解决办法
    学习计划与记录
  • 原文地址:https://www.cnblogs.com/xiaxiaodong/p/8284415.html
Copyright © 2011-2022 走看看