Javascript中的Promise

Promise定义

Promise是CommonJs的规范之一,包含resolve,reject,done,fail,then等方法,能够帮助我们控制代码的流程,避免函数的多层嵌套。异步在web开发中越来越重要,对于开发人员来说,J非线性执行的编程会让开发者觉得难以掌控,而Promise可以让我们更好地掌控代码的执行流程,jQuery等流行的js库都已经实现了这个对象,现在ES6已经原生实现了Promise。

场景说明:

有时候会遇到这样的情况,需要发两个异步请求,而第二个请求需要用到第一个返回结果的数据:

ajax({
        url: url1,
        success: function(data) {
            ajax({
                url: url2,
                data: data,
                success: function() {
                }
            });
        }
});

稍微整理一下,把后一个调用封装成一个函数,就是酱紫滴:

    function A() {
        ajax({
            url: url1,
            success: function(data) {
                B(data);
            }
        });
    }
    function B(data) {
        ajax({
            url: url2,
            success: function(data) {
                ......
            }
        });
    }

如果异步请求C又需要用到B的结果,又需要一层。如果需要很多层,代码可读性会降低,最后不忍直视了就。所以就有了Promise。有了Promise,代码就是酱紫了:

new Promise(A).done(B);

很清爽很DRY有木有?

ES6已经实现了Promise,不过也可以自己写一个Promise对象:

用两个数组(doneList和failList)来存储成功时的回调函数队列和失败时的回调函数队列。

此对象的方法和属性:

1.state: 当前执行状态,有pending、resolved、rejected3种取值

2.done: 向doneList中添加一个成功回调函数

3.then: 分别向doneList和failList中添加回调函数

4.always: 添加一个无论成功还是失败都会调用的回调函数

5.resolve: 将状态更改为resolved,并触发绑定的所有成功的回调函数

6.reject: 将状态更改为rejected,并触发绑定的所有失败的回调函数

7.when: 参数是多个异步或者延迟函数,返回值是一个Promise兑现,当所有函数都执行成功的时候执行该对象的resolve方法,反之执行该对象的reject方法

具体实现:

var Promise = function() {
    this.doneList = [];
    this.failList = [];
    this.state = ‘pending‘;
};

Promise.prototype = {
    constructor: ‘Promise‘,
    resolve: function() {
        this.state = ‘resolved‘;
        var list = this.doneList;
        for(var i = 0, len = list.length; i < len; i++) {
            list[0].call(this);
            list.shift();
        }
    },
    reject: function() {
        this.state = ‘rejected‘;
        var list = this.failList;
        for(var i = 0, len = list.length; i < len; i++){
            list[0].call(this);
            list.shift();
        }
    },
    done: function(func) {
        if(typeof func === ‘function‘) {
            this.doneList.push(func);
        }
        return this;
    },
    fail: function(func) {
        if(typeof func === ‘function‘) {
            this.failList.push(func);
        }
        return this;
    },
    then: function(doneFn, failFn) {
        this.done(doneFn).fail(failFn);
        return this;
    },
    always: function(fn) {
        this.done(fn).fail(fn);
        return this;
    }
};

这个不支持链式调用,可以再来个支持链式调用的:

var MPromise = function(func){
    this.doneList = [];
    this.state = ‘pending‘;
    func(this.resolve.bind(this));
    this.self = this;
}
MPromise.prototype = {
    resolve: function(){
        var args = arguments[0];

        while(true){
            args = [args];
            this.lastargs = args;

            if( this.doneList.length == 0 ){
                this.state = ‘done‘;
                break;
            }

            args = this.doneList.shift().apply(this, args);

            if( args instanceof MPromise ){
                this.self = args;
                args.doneList = args.doneList.concat(this.doneList.slice(0));
                this.state = ‘done‘;
                this.doneList.length = 0;
                break;
            }
        }
    },
    then: function(callback){
        this.doneList.push(callback);
        if( this.state == ‘done‘ ){
            this.state = ‘pending‘;
            this.resolve.apply(this, this.lastargs);
        }
        return this.self;
    }
}

ES6-Promise

ES6提供了原生Promise对象:从语法上说,Promise是一个对象,从中可以获取异步操作的消息。

基本用法:

ES6中的Promise对象是一个构造函数,用来生成Promise实例。

var promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise对象接收一个函数作为参数,这个函数的两个参数分别是resolve和reject,这两个函数由Javascript引擎提供,不用自己部署。

resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

Promise实例生成以后,可以用then方法分别指定Resolved状态和Reject状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用,第二个回调函数是Promise对象的状态变为Reject时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

时间: 2024-10-15 17:01:57

Javascript中的Promise的相关文章

通过一道笔试题浅谈javascript中的promise对象

因为前几天做了一个promise对象捕获错误的面试题目,所以这几天又重温了一下promise对象.现在借这道题来分享下一些很基础的知识点. 下面是一个面试题目,三个promise对象捕获错误的例子,返回结果有什么不同. //使用throw添加错误事件 var p = new Promise(function(resolve, reject) { resolve("ok"); throw new Error('error0'); //setTimeout(function() { thr

彻底理解Javascript 中的 Promise

ES6原生提供了 Promise 对象. 到底是何方妖怪呢?打出来看看: 所谓 Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理. Promise 对象有以下两个特点. (1)对象的状态不受外界影响.Promise 对象代表一个异步操作,有三种状态:Pending(进行中).Resolved(已完成,又称 Fulfilled)和 Rejected(已失败).只有异步操作的结果,可以决定当

全面理解Javascript中Promise

全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非常有趣的Promise Promise概念 2015 年 6 月,ECMAScript 6 的正式版 终于发布了. ECMAScript 是 JavaScript 语言的国际标准,javascript 是 ECMAScript 的实现.ES6 的目标,是使得 JavaScript 语言可以用来编写大

总结JavaScript编程中的Promise使用

总结JavaScript编程中的Promise使用 Promise核心说明 尽管Promise已经有自己的规范,但目前的各类Promise库,在Promise的实现细节上是有差异的,部分API甚至在意义上完全不同.但Promise的核心内容,是相通的,它就是then方法.在相关术语中,promise指的就是一个有then方法,且该方法能触发特定行为的对象或函数. Promise可以有不同的实现方式,因此Promise核心说明并不会讨论任何具体的实现代码. 先阅读Promise核心说明的意思是:看

【JavaScript进阶】深入理解JavaScript中ES6的Promise的作用并实现一个自己的Promise

1.Promise的基本使用 1 // 需求分析: 封装一个方法用于读取文件路径,返回文件内容 2 3 const fs = require('fs'); 4 const path = require('path'); 5 6 7 /** 8 * 把一个回调函数才分成两个回调函数 9 * @param filename 10 * @param successCallback 11 * @param errorCallback 12 */ 13 function getFileByPath(fil

Node.js(十二)——NodeJs中的Promise

爬虫基于回调和事件的方式去实现,回调也是被诟病已久的问题尤其是callback这种,无论是阅读还是调试都很费劲,甚至我们连代码的堆栈都看不到,这是一种反人类的写法,Promise来拜托这种痛苦的方式 传统方式实现动画效果: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Promise animation</title> <style&g

学习JavaScript中的异步Generator

本文和大家分享的主要是javascript中异步Generator相关内容,一起来看看吧,希望对大家学习javascript 有所帮助. 异步的generators和异步iteration已经到来 ! 这是错误的, 它们现在还在 阶段 3 ,这表示他们很有可能在JavaScript未来的一个版本中发布. 在他们发布之前,你可以通过 Babel 来在你的项目中使用还在阶段3的建议内容. 网站基本上还是一些分散运行的应用,因为任何在语言上的修改都会造成永久的影响,所以所有的未来的版本都需要向后兼容.

JavaScript中异步编程

一 关于事件的异步 事件是JavaScript中最重要的一个特征,nodejs就是利用js这一异步而设计出来的.所以这里讲一下事件机制. 在一个js文件中,如果要运行某一个函数,有2中手段,一个就是直接调用,比如foo(),第二就是利用事件来触发,这中函数也叫回调函数,比如传递给setTimeout函数和onready属性. 1.setTimeout函数中的事件异步 setTimeout本质上也是一种异步事件,当延迟时间到的时候触发该事件,但是有的有的时候(其实也是大部分时候)都不会按照给定的延

深入理解jQuery、Angular、node中的Promise

最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供基础功能.在用jQuery操作DOM的时候对Promise的使用欲不够强烈,最近学习node和Angular,需要用js写业务逻辑和数据操作代码的时候这种场景需求就出来了.一般来说事件适合在交互场景中运用,因为用户的行为本来就是分散的,而promise这样的流程控制适合在后台逻辑中处理业务. //j