`
jinhailion
  • 浏览: 47823 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

es6 promise 粗浅个人心得

    博客分类:
  • es6
 
阅读更多
可先参考阮一峰的几篇文章
这里从这篇文章开始《彻底理解Javascript 中的 Promise》
http://doc.okbase.net/libin-1/archive/253716.html

es6在线练习,可以用http://www.es6fiddle.net/

我的理解:
promise对象通常为一段端函数代码,而且通常是一段异步处理才有意义,比如含有settimeout或ajax等。
function prms1(){
	var promise = new Promise(function(resolve, reject){
    	setTimeout(function(){
        	console.log('执行任务1'); //2
          	resolve('执行任务1成功'); //3 --> 导致4调用
        }, 2000);
    });
  	return promise;
}

var prms1 = prms1();
console.log('before then');
prms1.then(function(data){ //1
	console.log('第1个回调: ' + data); //4
})

代码中我标注了执行顺序,promise的then函数用来注册一个将要调用的回调,可以多个then链式写出来,但都不会执行,只是注册。
当在该promise里调用resolve时,设置状态为允许,才能调用执行then里函数。所以是按我标出的顺序执行的。
多加一个then看看效果:
function prms1(){
	var promise = new Promise(function(resolve, reject){
    	setTimeout(function(){
        	console.log('执行任务1'); //2
          	resolve('执行任务1成功'); //3 --> 导致4调用
        }, 2000);
    });
  	return promise;
}

var prms1 = prms1();
console.log('before then');
prms1.then(function(data){ //1
	console.log('第1个回调: ' + data); //4
        //return 'abc';
}).then(function(data){
	console.log('第2个回调: ' + data); //5
});

执行后,控制台输出
before then
执行任务1
第1个回调: 执行任务1成功
第2个回调: undefined

可以看到,后续的then也都会执行,因为then的回调默认将返回当前的promise,保证链式调用像jquery一样,我的理解,如果return的是非promise类型,都被认为返回了当前的promise,且将返回的值带入下个then的回调入参中,可以查看return abc的效果

这样一来,好像这玩意儿也没啥大用处嘛。关键用途在下面,如果return的是一个Promise类型,就可以处理那个promise对象的函数了,并且由它来的resolve来控制它的then的执行,这样,就不会一长串then都被执行了,如下:
function prms1(){
	var promise = new Promise(function(resolve, reject){
    	setTimeout(function(){
        	console.log('执行任务1'); //2
          	resolve('执行任务1成功'); //3 --> 导致4调用
        }, 2000);
    });
  	return promise;
}

function prms2(){
	var promise = new Promise(function(resolve, reject){
    	setTimeout(function(){
        	console.log('执行任务2');
          	//resolve('执行任务2成功');
        },2000);
    });
  	return promise;
}

var prms1 = prms1();
console.log('before then');
prms1.then(function(data){ //1
	console.log('第1个回调: ' + data); //4
  	return prms2();
}).then(function(data){
	console.log('第2个回调: ' + data); 
});

运行后输出
before then
执行任务1
第1个回调: 执行任务1成功
执行任务2

可以看到,第二个then没有再执行了,因为它不受第一个promise控制了,它受prms2创建的新promise控制。将注释的resolve打开,看到
before then
执行任务1
第1个回调: 执行任务1成功
执行任务2
第2个回调: 执行任务2成功


因此,个人理解,在编写多回调嵌套的代码时,可以把每层嵌套放入一个promise对象中,用then来处理,并且注意每个then回调里return下一个promise

angular中,异步逻辑放在then中,具体参照此文章
https://my.oschina.net/ilivebox/blog/293771

var deferred = $q.defer();
var promise = deferred.promise;

// resolve it after a second
$timeout(function() {
  deferred.resolve('foo');
}, 1000);

promise
  .then(function(one) {
    console.log('Promise one resolved with ', one);

    var anotherDeferred = $q.defer(); //在angular里使用promise处理多回调的常规写法

    // resolve after another second
    // $timeout算是第一个异步操作的所有代码
    $timeout(function() {
      //......这里省略异步的操作,在异步的最后resolve下一个promise
      anotherDeferred.resolve('bar'); //在angular里使用promise处理多回调的常规写法
    }, 1000);

    return anotherDeferred.promise; //在angular里使用promise处理多回调的常规写法

  })
  .then(function(two) {
    console.log('Promise two resolved with ', two);
  });

这样就保证了then2里的回调在then1后才执行

在ajax中如此使用和封装
angular.module("MyService", [])
    .factory('githubService', ["$q", "$http", function($q, $http){
        var getPullRequests = function(){
        var deferred = $q.defer();
        var promise = deferred.promise;
        var progress;
        $http.get("https://api.github.com/repos/angular/angular.js/pulls")
        .success(function(data){
            var result = [];
            for(var i = 0; i < data.length; i++){
                result.push(data[i].user);
                progress = (i+1)/data.length * 100;
                deferred.notify(progress);
            }
            deferred.resolve(result);
            })
        .error(function(error){
            deferred.reject(error);
        });
        return promise;
    }

    return {
        getPullRequests: getPullRequests
    };
}]);



在项目中的使用心得
1. 所有基本promise和async里都不处理异常。在最上层的异步调用后才catch异常。否则底层catch后处理了 ,最上层就不会进入catch。
2. 接口的对于code的统一处理可以抽象出来,在最上层复用
3. promise里通过reject抛出异常,async里如果向主动抛出异常,用throw new Error。最终都在最上层调用中捕获到他们
4. reject('xxx') 和 throw new Error('xxx')稍有不同,在catch到e后,前者为e的值,后者为e.message的值
分享到:
评论

相关推荐

    微信小程序 es6 promise

    在IT行业中,JavaScript是网页开发的核心语言,而ES6(ECMAScript 2015)版本的引入为JavaScript带来了许多现代化的特性,其中Promise就是一项重要的改进,它解决了异步编程中的回调地狱问题。微信小程序,作为一个...

    小程序用es6 promise

    小程序引用es6 promise,亲测,请大家下载,放心使用,谢谢!

    es6-promise

    es6-promise.auto.js ,可用于微信小程序开发,小程序里需要

    前端开源库-es6-promise-pool

    **前端开源库——ES6 Promise Pool** 在现代前端开发中,异步操作是不可或缺的一部分,Promise作为JavaScript中处理异步操作的重要工具,极大地改善了代码的可读性和可维护性。然而,当需要同时处理大量异步任务时...

    es6-promise.auto.js

    &lt;!-- Automatically provides/replaces `Promise` if missing or broken. --&gt; [removed][removed] ...-- Minified version of `es6-promise-auto` below. --&gt; [removed][removed] [removed][removed]

    es6-promise.auto.min.js

    es6-promise.auto.min.js

    深入理解ES6 Promise 扩展always方法

    ES6 Promise 扩展always方法是ES6 Promise的一个重要扩展,允许开发者在Promise对象中执行一些通用的操作,无论Promise对象最终是成功还是失败。本文将详细介绍ES6 Promise 扩展always方法的使用方法和优点,并对其...

    使用ES6Promise实现的一个无限状态机

    这个"使用ES6 Promise实现的一个无限状态机"是一个创新的方法,它将Promise的异步处理能力与状态机的概念结合,使得状态变化和异步操作能够更加优雅地进行管理。 首先,我们要理解ES6 Promise。Promise是JavaScript...

    用于浏览器不支持es6-promise

    在现代JavaScript开发中,ES6(ECMAScript 2015)引入了许多新的特性,其中Promise是异步编程的一种解决方案,它极大地提高了代码的可读性和可维护性。然而,不是所有浏览器都原生支持ES6的Promise,尤其是在一些老...

    promise:ES6 Promise Polyfill

    承诺ES6 Promise填料。安装$ npm install [--save] promise-es6用法 // Load for use in this one place ...var Promise = require ( 'promise-es6' ) . Promise ;// ... or make a global polyfill (not really ...

    es6-promise@4.1.1.zip

    **ES6 Promise 深入理解与应用** 在JavaScript中,由于其单线程的特性,同步执行的代码会按照顺序依次处理,这在处理I/O密集型任务时容易导致阻塞,使得用户界面无法及时响应。为了解决这个问题,Promise(承诺)...

    前端项目-es6-promise.zip

    **前端项目中的ES6 Promise** 在现代前端开发中,异步操作是不可或缺的一部分,而ES6引入的Promise对象就是处理异步操作的一种强大工具。Promise是JavaScript中的一个内置对象,用于处理异步操作的最终完成或失败,...

    es6-promise(微信小程序等引用)

    **ES6 Promise 知识详解** Promise 是 ES6 引入的一种异步编程解决方案,它在 JavaScript 中扮演着处理异步操作的重要角色,特别是在微信小程序等需要高效管理异步流程的场景中。Promise 对象代表一个异步操作的...

    synchronized-promise:将ES6 Promise转换为同步函数调用,这是去同步包的简单包装

    将ES6 Promise转换为同步函数调用,这是去同步包的简单包装 安装 npm install synchronized - promise -- save 用法 首先,您需要针对JavaScript的“ synchronized-promise包: const sp = require ( '...

    es6-promise.js

    一个轻量级库,提供用于组织异步代码ES6 Promis(subset of rsvp.js) , 在ES5中支持Promise

    promise:一个简单的es6 promise的polyfill

    Promise是ES6引入的一种异步编程解决方案,它用于解决传统的回调函数地狱问题,提供了一种更优雅的方式来管理和处理异步操作。Promise有三种状态:pending(等待中)、fulfilled(已完成)和rejected(已拒绝)。当...

    promise-polyfill:针对浏览器和节点的轻量级ES6 Promise polyfill。 符合A +

    用于浏览器和节点的轻量级ES6 Promise polyfill。 严格遵守规范。 它是完美的polyfill IE或任何其他不支持本机Promise的浏览器。 有关Promises的API信息,请查阅本文。 它非常轻巧。 &lt;1kb压缩 浏览器支持 IE8 ...

    ES6关于Promise的用法详解

    ES6 Promise 的用法详解 ES6 中的 Promise 是一个异步操作的最终完成或失败及其结果值的表示。它是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作。 Promise ...

    Promise:es6 promise 的 polyfill

    "Promise: es6 promise 的 polyfill" 就是这样的一个库,它模拟了ES6 Promise的行为,使得开发者能够在旧版浏览器上使用Promise特性。Promise-master可能包含了这个polyfill的源代码和其他相关资源,如测试文件、...

    es6-promise-polyfill:es6-promise 的自动 polyfill 版本,promise 随心所欲!

    es6-promise-polyfill es6-promise 的自动 polyfill 版本,promise 随心所欲!用法将其嵌入到[removed]标签中,并与 ES6 Promise 相同使用。 。

Global site tag (gtag.js) - Google Analytics