ES6 Promise 详解

一、概念

  Promise,从语法上来讲,它是一个对象,是一个构造函数,可以获取 异步操作 的信息。

  简单来讲,就是用同步的方式写异步代码,用来解决回调问题。

二、特点

  Promise 对象有两个特点:

  1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:

    (1)、pending: 初始值

    (2)、fulfilled:  操作成功

    (3)、rejected: 操作失败

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

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

    Promise对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和 从 Pending 变为 Rejected 。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。

  :Promise 一旦新建就会「立即执行」,无法取消(new Promise() 里的函数会自动运行)。

三、Promise 方法

  Promise 除了拥有自身的 all、race、resolve、reject 等方法外,在原型上还拥有 then、catch 方法。

  看下列代码:

function promiseBegin(){
    var p = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            console.log(‘代码执行完成‘);
            resolve(‘回调数据‘);       reject(‘失败回调数据‘);
        }, 2000);
    });
    return p;
}
promiseBegin();

  当执行 promiseBegin 函数时,会得到一个 Promise 对象,在 Promise 的构造函数中,我们执行了一个setTimeout异步操作,2秒后,输出“代码执行完成”,并且调用resolve方法。

  

  then() 方法

   then() 方法有两个参数,一个是成功 resolve 调用的方法,一个是失败 reject 调用的方法。

promiseBegin().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
},function(err) {
    console.log(err);
});

   catch() 方法

    catch() 方法用于指定发生错误时的回调函数。

promiseBegin().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
}).catch(function(err){
    // 处理失败的操作
    console.log(err)
});

    在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中。

    一般来说,不要在 then() 方法里面定义 Reject 状态的回调函数(即 then() 的第二个参数),总是使用 catch 方法。

  链式调用

   我们们可以在 then 方法中继续写 Promise 对象并返回,然后继续调用 then 来进行回调操作。

//买笔
        function buy(){
            console.log("开始买笔");
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("买了笔芯");
                    resolve("数学作业");
                },1000);
            });
            return p;
        }
        //写作业
        function work(data){
            console.log("开始写作业:"+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("写完作业");
                    resolve("作业本");
                },1000);
            });
            return p;
        }

        function out(data){
            console.log("开始上交:"+data);
            var p = new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("上交完毕");
                    resolve("得分:A");
                },1000);
            });
            return p;
        }
        /* 不建议使用这种方式
        buy().then(function(data){
            return work(data);
        }).then(function(data){
            return out(data);
        }).then(function(data){
            console.log(data);
        });*/

        //推荐这种简化的写法
        buy().then(work).then(out).then(function(data){
            console.log(data);
        });

  all() 方法

    Promise的 all() 方法提供了并行执行异步操作的能力,并且在所有异步操作执行完后才执行回调。

//买作业本
        function cutUp(){
            console.log(‘挑作业本‘);
            var p = new Promise(function(resolve, reject){ //做一些异步操作
                setTimeout(function(){
                    console.log(‘挑好购买作业本‘);
                    resolve(‘新的作业本‘);
                }, 1000);
            });
            return p;
        }

        //买笔
        function boil(){
            console.log(‘挑笔芯‘);
            var p = new Promise(function(resolve, reject){ //做一些异步操作
                setTimeout(function(){
                    console.log(‘挑好购买笔芯‘);
                    resolve(‘新的笔芯‘);
                }, 1000);
            });
            return p;
        }

        Promise.all([cutUp(),boil()]).then(function(results){
            console.log("写作业的工具都买好了");
            console.log(results); // ["新的作业本", "新的笔芯"]
        });       

  

  使用场景:预加载图片资源    

  race() 方法

    race() 的用法与 all() 一样,只不过 all() 是等所有异步操作都执行完毕后才执行 then 回调。而 race() 的话只要有一个异步操作执行完毕,就立刻执行 then 回调。

    注意:其它没有执行完毕的异步操作仍然会继续执行,而不是停止。

 Promise.race([cutUp(), boil()]).then(function(results){
       console.log("哈哈,我先买好啦");
       console.log(results);
});

      

  使用场景:图片请求超时

function requestImg(){
       var p = new Promise(function(resolve, reject){
            var img = new Image();
            img.onload = function(){
               resolve(img);
            }
            img.src = ‘xxxxxx‘;
            });
            return p;
        }

        //延时函数,用于给请求计时
        function timeout(){
            var p = new Promise(function(resolve, reject){
                setTimeout(function(){
                    reject(‘图片请求超时‘);
                }, 5000);
            });
            return p;
        }

        Promise.race([requestImg(), timeout()]).then(function(results){
            console.log(results);
        }).catch(function(reason){
            console.log(reason);
        });
        //上面代码 requestImg 函数异步请求一张图片,timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑。
        //如果 5 秒内图片请求成功那么便进入 then 方法,执行正常的流程。
        //如果 5 秒钟图片还未成功返回,那么则进入 catch,报“图片请求超时”的信息。

  

随笔整理自
  http://es6.ruanyifeng.com/#docs/promise
  https://www.cnblogs.com/ainyi/p/8665272.html
感谢博主分享!

原文地址:https://www.cnblogs.com/gaosirs/p/10622581.html

时间: 2024-10-10 05:58:24

ES6 Promise 详解的相关文章

ES6语法详解

1.  ES6发展历史以及介绍 略.....   不废话 2.  ES6新特性:let和const关键字 在之前的JavaScript中,变量的定义我们一般都是使用“var”关键字做为定义的,“var”关键字定义的变量存在一个缺点,那就是作用域不明显,有时候明明在私有方法中定义的,却成为了全局变量.从而影响到我们其他的数据操作.所以在ES6中为了解决这个弊端,而引入了“let”和“const”这两个关键字. “let”关键字:用作定义私有数据,该变量只在定义的代码块中生效使用,其他地方不会生效被

关于Promise详解

异步回调 回调地狱 在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的回调地狱 并行结果 如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务,无法实现并行节约时间 Promise Promise本意是承诺,在程序中的意思就是承诺我过一段时间后会给你一个结果. 什么时候会用到过一段时间?答案是异步操作,异步是指可能比较长时间才有结果的才做,例如网络请求.读取本地文件等 Promise的三种状态 Pending Promise对象实例创建时

Promise详解

本文主要通过对Promise的八大特性讲解,来详细探讨Promise. 1.立刻执行性 const p = new Promise((resolve, reject) => { console.log("create a promise"); resolve("success"); }); console.log("after new Promise"); p.then((value) => { console.log(value);

Es6 Promise 用法详解

Promise是什么?? 打印出来看看  console.dir(Promise) 这么一看就明白了,Promise是一个构造函数,自己身上有all.reject.resolve这几个眼熟的方法,原型上有then.catch等同样很眼熟的方法.这么说用Promise new出来的对象肯定就有then.catch方法喽,没错. 那就new一个玩玩吧. var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(functi

[js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般都有Symbol.iterator属性,你可以在控制台中用console.dir打印数组,Map,Set,在他们的原型对象(prototype)上面就能找到.这个属性与迭代器密切相关,通过该函数可以返回一个迭代器,下文,我会举一个例子.一般来说所有的集合对象(数组,Set,Map 以及字符串)都是可

vue-cli脚手架中webpack配置基础文件详解

一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板.这其中webpack发挥了很大的作用,它使得我们的代码模块化,引入一些插件帮我们完善功能可以将文件打包压缩,图片转base64等.后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要,接下来我将基于webpack3.6.0版本结合文档将文件各个击破,纯干料.重点章节点击查看:package.json:config/index.js:webpack.base.con

触碰jQuery:AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.

测试框架mochajs详解

测试框架mochajs详解 章节目录 关于单元测试的想法 mocha单元测试框架简介 安装mocha 一个简单的例子 mocha支持的断言模块 同步代码测试 异步代码测试 promise代码测试 不建议使用箭头函数 钩子函数 钩子函数的描述参数 异步的钩子函数 全局钩子 延迟启动测试 测试用例TODO 仅执行一个用例集/用例 跳过哪些用例集/用例 重新执行用例 动态生成用例 测试时间 测试超时 用例集执行超时 用例执行超时 钩子函数超时 diff差异比较功能 mocha使用命令和参数 mocha

RequireJS-CommonJS-AMD-ES6 Import/Export详解

RequireJS-CommonJS-AMD-ES6 Import/Export详解 为什么起了一个这个抽象的名字呢,一下子提了四个名词分别是:RequireJS,CommonJS,AMD,ES6,答案是因为现实很骨感,我们必须很勇敢才能正视这一段悲催的往事.如今的JavaScript平台正值如日中天,大家可能会忽略他的过去和弊端,这些弊端中一直被人诟病的就是JavaScript的包管理,比如类似Java中的import,其实理论上来讲这种基本元素的缺失大大的阻碍了人们对一种语言的认可,认为他难