zoukankan      html  css  js  c++  java
  • javaScript之promise

        异步加载一直是我很头痛的问题,本科阶段学过异步同步通信就把我绕的很糊涂。但是接触到JS中的异步加载后我才真正认识到,所谓的异步加载就像一个客服中心,每一个工作人员就对应一条工作流程线。下面我会详细介绍pronise的实现方法。

        promise,就是一个对象,用来传递异步操作消息。它代表某个未来才会知道结果(成功或失败)的事件。

        pomise对象的特点包括

    (1)       对象的状态不受外界的影响。

        有3个状态,Pendind、Resolved和Rejected。只有异步操作的结果可以决定当前哪一种状态,任何其他操作都无法改变这个状态。

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

        promise的状态改变只有两种,一个是从Pending到Resolved,另一个是从Pending到Rejected。只要其中一个发生,状态就凝固了,任何其他操作都无法改变这个状态。

        pomise对象的缺点包括

    (1)       一旦创建就会立即执行,无法取消

    (2)       如果不设置回调函数,内部错误无法抛出

    (3)       当处于pending状态时,无法得知目前进展到哪一阶段。

    兼容性:

    Promise只是让我们当下的JS换了一种形式实现,更符合编程时候的思考角度与方式。因此,通过特定的转换,我们也可以让不支持Promise的低版本浏览器支持之。您可以试试在页面引入如下JS:

    <script src="http://s3.amazonaws.com/es6-promises/promise-0.1.1.min.js"></script>

    基本用法

    promise对象的AJAX实现

    var getJSON = function(url){
        var promise = new Promise(function(resolve, reject){
            var xhr = new XMLHttpRequest();
                xhr.open("GET",url);
                xhr.onreadystatechange = handler;
                xhr.responseType = "json";
                xhr.setRequestHeader("Accept", "application/json");
                xhr.send();
            function handler() {
                if( this.readyState != 4){
                    return;
                }
                if( this.status == 200){
                    resolve( this.response);
                }else{
                    reject( new Error( this.statusText));
                }
            } 
        });
        return promise;
    }
    getJSON('./post.json').then(function(json){
        console.log("content" + json);
    }).catch{
        console.log("出错了")
    }

     ....未更新完

    GO ON...

            Promise对象是个构造函数,来创建Promise实例,语法

    var promise = new Promise(function(resolve, reject){ });

            Promise构造函数接受一个函数作为阐述,该函数有两个参数分别是resolve和reject,是两个函数,由JavaScript引擎提供,不用自己部署。

    (1)resolve的作用是将Promise对象状态从Pending变为Resolved,异步加载成功后将异步操作的结果作为参数传递给回调函数。

    (2)reject函数的作用是,将promise对象的状态从Pending变为Rejected。在异步操作失败时调用,并将异步操作报出的错误作为参数传递给回调函数。

    Promise.prototype.then( )

           为promise添加状态改变时的回调函数,接受两个函数作为参数,第一个是Resolved状态的回调函数,另一个是Rejected状态回调函数。采用链式的then可以指定一组按顺序调用的回调函数。

    Promise.prototype.catch( )

          是 .then(null, rejection)的别名,用于指定发生错误时的回调函数。

         一般情况下我们都会使用new Promise()来创建promise对象,但是我们也可以使用promise.resolve 和 promise.reject这两个方法;

    Promise.resolve(value)将现有对象转为promise对象,返回值是一个promise对象,我们可以对返回值进行.then调用。

    Promise.reject(value)将现有对象转为promise对象,返回值是一个promise对象,我们可以对返回值进行.then(null,function(){})或.catch()调用。

    综合使用resolve方法和reject方法的demo如下

    function testPromise(ready) {
        return new Promise(function(resolve,reject){
            if(ready) {
                resolve("hello world");
            }else {
                reject("No thanks");
            }
        });
    };
    // 方法调用
    testPromise(true).then(function(msg){
        console.log(msg);
    },function(error){
        console.log(error);
    });

    Promise.all

            Promise.all可以接受一个元素为Promise对象的数组作为参数,当这个数组里面所有的promise对象都变为resolve时,该对象的状态才是resolve。但只要其中一个被Rejected,则状态就变为rejected,并将返回值传递给回调函数。

    
    

    Promise.race

            如上可知:Promise.all 在接收到的所有对象promise都变为Resolved或者 Rejected状态之后才会继续后面的处理,但是Promise.race的含义是只要有一个promise对象进入Resolved或者Rejected状态的话,程序就会停止,且会继续后面的处理逻辑;

    理解异步操作

    var promise = new Promise(function(resolve){
        console.log(1);
        resolve(3);
    });
    promise.then(function(value){
        console.log(value);
    });
    console.log(2);

    上述代码操作结果是什么呢?大多数人会认为是1 3 2,其实不然。代码从上往下执行,首先输出1,然后调用resolve(3)这个方法,这时候promise对象变为确定状态,即调用promise.then 。但是Promise对象是以异步方式调用的,所以先执行console.log(2),输出的是2,然后输出的是3。

  • 相关阅读:
    [leetcode] Weekly Contest 170 Summary
    [Scala] java使用scala的jar包问题:Exception in thread "main" java.lang.ClassCastException: java.lang.Integer cannot be cast to java.lang.Short
    [git] Updates were rejected because the tip of your current branch is behind its remote counterpart.
    [Android] Installation failed due to: ''pm install-create -r -t -S 4590498' returns error 'UNSUPPORTED''
    CTF 常见操作总结
    记项目管理大作业Web项目Mandrian的全流程[其一] 整体分析: 功能划分, 组织结构
    [leetcode] 题解记录 11-20
    [leetcode] 题解记录 1-10
    记一次配置阿里云ECS GPU计算型gn5实例
    shell脚本 入门 —— 符号篇
  • 原文地址:https://www.cnblogs.com/microcosm/p/7039826.html
Copyright © 2011-2022 走看看