Promise的用简要使用方式

Promise用法

在项目中用到异步请求ajax,想到用promise来解决,之前用过但是已经很久了,还是忘了一些,重新熟悉了一下整理一份简要文档。

Promise,就是一个对象,用来传递异步操作的消息

Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。

如果异步操作成功,则用 resolve 方法将 Promise 对象的状态,从「未完成」变为「成功」(即从 pending 变为 resolved);

如果异步操作失败,则用 reject 方法将 Promise 对象的状态,从「未完成」变为「失败」(即从 pending 变为 rejected)。

var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});

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

可以简要看看promise的源码

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;
    }
};

function when() {
    var p = new Promise();
    var success = true;
    var len = arguments.length;
    for(var i = 0; i < len; i++) {
        if(!(arguments[i] instanceof Promise)) {
            return false;
        }
        else {
            arguments[i].always(function() {
                if(this.state != ‘resolved‘){
                    success = false;
                }
                len--;
                if(len == 0) {
                    success ? p.resolve() : p.reject();
                }
            });
        }
    }
    return p;

}

业务中的代码实现方式如下:在两次异步请求成功之后,再调用then的方法

return (dispatch, getState)=> {
    let getDataFunc = function(data) {
        return new Promise(function(resolve, reject){
            if(!data) {
                return resolve(null);
            }
            return requestJsonp({
              url: ‘‘,
              data: data,
            }, json=>{
                resolve(json);
            }, err=>{
                resolve(null);
            });
        });
    };

    return Promise.all([getDataFunc(data), getDataFunc(compareData)]).then((json)=>{
        if(!json[0] && !json[1]) {
            dispatch({
                type: DATA_ERR
            });
        } else {
            dispatch({
                type: REFRESH_GRAPH,
                data: json
            });
        }
    });
};

现今流行的各大js库,几乎都不同程度的实现了Promise,如dojo,jQuery、Zepto等,它们暴露出来的大都是Deferred对象,以jQuery(Zepto类似)为例:方法更加简洁方便

function getImg(url) {
    var def = $.Deferred();
    var img = new Image();  

    img.onload = function() {
        def.resolve(this);
    };  

    img.onerror = function(err) {
        def.reject(err);
    };  

    img.src = url;  

    return def.promise();
};  

推荐一部书 promise迷你书,很薄的一本,

http://liubin.org/promises-book/javascript-promise-book.pdf

时间: 2024-10-13 00:19:16

Promise的用简要使用方式的相关文章

Promise API 简介

Promise API 简介 译者注: 到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部. Promise 直译为"承诺",但一般直接称为 Promise; 代码的可读性非常重要,因为开发人员支出一般比计算机硬件的支出要大很多倍. 虽然同步代码更容易跟踪和调试, 但异步方式却具有更好的性能与灵活性. 怎样在同一时刻发起多个请求, 然后分别处理响应结果? Promise 现已成为 JavaScript 中非常重要的一个组成部分, 很多新

Java多线程编程模式实战指南之Promise模式

Promise模式简介(转) Promise模式是一种异步编程模式 .它使得我们可以先开始一个任务的执行,并得到一个用于获取该任务执行结果的凭据对象,而不必等待该任务执行完毕就可以继续执行其他操作.等到我们需要该任务的执行结果时,再调用凭据对象的相关方法来获取.这样就避免了不必要的等待,增加了系统的并发性.这好比我们去小吃店,同时点了鸭血粉丝汤和生煎包.当我们点餐付完款后,我们拿到手的其实只是一张可借以换取相应食品的收银小票(凭据对象)而已,而不是对应的实物.由于鸭血粉丝汤可以较快制作好,故我们

Q promise API简单翻译

详细API:https://github.com/kriskowal/q/wiki/API-Reference Q提供了promise的一种实现方式,现在在node中用的已经比较多了.因为没有中文的api,我就简单翻译下吧.鄙人不才,欢迎拍砖... 一.Core Promise Methods 1.promise.then(onFulfilled, onRejected, onProgress) 这个就不说了吧. 2.promise.catch(onRejected) 其等同于:promise.

angular中使用promise

promise是一种用异步的方式处理值的方法,promise是对象,代表了一个函数最终可能的返回值或者抛出的异常,在与远程对象打交道时我们可以把他看作是远程对象的一个代理. 如果说是promise也是异步处理方式的一种,那么我们会想起它和XHR和$.ajax有啥区别呢? 习惯上js使用闭包或者回调来相应非同步返回的数据,比如页面加载之后的XHR请求.我们可以跟数据进行正常交互,就好像它已经返回了一样,而不需要依赖回调函数的触发. 那么ng提出的promise是为了解决什么问题呢? 回调已经被使用

Promise的前世今生和妙用技巧

浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一个线程中.因此对于长时间的耗时操作,将会阻塞UI的响应.为了更好的UI体验,应该尽量的避免JavaScript中执行较长耗时的操作(如大量for循环的对象diff等)或者是长时间I/O阻塞的任务.所以在浏览器中的大多数任务都是异步(无阻塞)执行的,例如:鼠标点击事件.窗口大小拖拉事件.定时器触发事件

闲话Promise机制

Promise的诞生与Javascript中异步编程息息相关,js中异步编程主要指的是setTimout/setInterval.DOM事件机制.ajax,通过传入回调函数实现控制反转.异步编程为js带来强大灵活性的同时,也带来了嵌套回调的问题.详细来说主要有两点,第一嵌套太深代码可读性太差,第二并行逻辑必须串行执行. 1 request = function(url, cb, eb) { 2 var xhr = new XMLHttpRequest(); 3 xhr.onreadystatec

前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象

JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列顺序是一直的:”异步模式”则完全不同,每一个任务都有一个或者多个回调函数(callback),前一个任务结束的时候,不是执行下一个任务,二十执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务顺序不一致的,异步的. 在浏览器端,耗时时间长的操作都应该异步执行,避免浏览器数去

【给你一个承诺 - 玩转 AngularJS 的 Promise】

了解Promise 在谈论Promise之前我们要了解一下一些额外的知识:我们知道JavaScript语言的执行环境是"单线程",所谓单线程,就是一次只能够执行一个任务,如果有多个任务的话就要排队,前面一个任务完成后才可以继续下一个任务. 这种"单线程"的好处就是实现起来比较简单,容易操作:坏处就是容易造成阻塞,因为队列中如果有一个任务耗时比较长,那么后面的任务都无法快速执行,或导致页面卡在某个状态上,给用户的体验很差. 当然JavaScript提供了"异

简单实现异步编程promise模式

本篇文章主要介绍了异步编程promise模式的简单实现,并对每一步进行了分析,需要的朋友可以参考下 异步编程 javascript异步编程, web2.0时代比较热门的编程方式,我们平时码的时候也或多或少用到,最典型的就是异步ajax,发送异步请求,绑定回调函数,请求响应之后调用指定的 回调函数,没有阻塞其他代码的执行.还有像setTimeout方法同样也是异步执行回调的方法. 如果对异步编程还不太熟悉的话,直接戳 阮一峰大牛的教程 ,这篇文章介绍了四种异步编程的方式: 回调函数 事件监听 发布