JavaScript 的 Promise

先看这个 http://www.html5rocks.com/zh/tutorials/es6/promises/#toc-api  【JavaScript Promise 浏览器支持的Promise】

deferred与Promise  http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/  【deferred怎么用】

以及 http://www.cnblogs.com/silin6/p/4309925.html

http://www.shakyshane.com/javascript/2013/11/16/making-promises-with-javascript/  【deferred 与 Timeout】

还有一个PPT 很棒  http://lucifier129.github.io/nodeppt/20150528/promise.htm 【其中提到jQuery不支持的情况是1.7.2版本以及之前的版本  1.8.0之后都已经支持】

    // jQuery对promise的实现叫做 deferred
    var ajax = $.ajax({
        url: 'http://fanyi.youdao.com/openapi.do',
        type: 'GET',
        dataType: 'jsonp',
        data: {
            'keyfrom': 'rakustrans',
            'key': '1506707246',
            'type': 'data',
            'doctype': 'jsonp',
            'version': '1.1',
            'q': 'synchronize'
        },
    });
    //PS  $.get对于dataType可以智能判断  对于json后缀的 可以自动将返回值转为JSON对象 无需parse()
    $.get('story.json').then(function(json){
        console.log(json);
    })
    //ajax本身就是一个延迟对象   也就是deferred
    //https://api.jquery.com/category/deferred-object/
    //所以ajax可以通过.promise() 返回一个promise
    //ajax本身是一个thenable的对象  所以可以使用then
    ajax.then(function(data) {
        console.log(data);
        var rs = $.extend({},data);
        rs.newKey = 'newKey';
        return rs;
    }, function(err) {
        console.log(err);
    }).then(function(data){
        console.log(data);
    },function(err){
        console.log(err);
    });
    //和上面效果一样
    //resolve的值在resolve间
    ajax.promise().then(function(data) {
        console.log(data);
        var rs = $.extend({},data);
        rs.newKey = 'newKey';
        return rs; // 注意 jQ1.7.2的then是不能传递返回值的 //从jQ 1.8 版本之后都支持返回值和promise嵌套
    }, function(err) {
        console.log(err);
    }).then(function(data){
        console.log();
    },function(data){
        console.log();
    });

    $.get('story.txt').then(function(data){
        console.log(data); //字符串
        return JSON.parse(data); //jQ1.7.2 deferred不能传递
    }).then(function(data){
        console.log(data); //jQ1.7.2 deferred不能传递 也就是说不论前一个then的resolve返回什么值  这里data都是第一个then的data
        //所以 jQ1.7.2这里得到的值是字符串 而不是parse后的对象
    });


    $.get('story.txt').then(function(data){
        console.log(data);
        // return $.get('story.json');
        return $.get('story.json').then(function(json){
            json.newKey = 'new';
            return json;
        });
    }).then(function(rs){
        console.log(rs); // jQ1.7.2 deferr不能嵌套(也就是不能在then里面再返回一个promise)  我这里jQ1.11是可以的
        // rs.then(function(data){});
        //报错 rs就是数据 不是一个promise
        //rs 就是上面嵌套的promise的resolve的值
    });


    //使用浏览器的Promsie (Chrome32+)=========================================================================
    function get(url) {
        // 返回一个新的 Promise
        return new Promise(function(resolve, reject) {
            // 经典 XHR 操作
            var req = new XMLHttpRequest();
            req.open('GET', url);

            req.onload = function() {
                // 当发生 404 等状况的时候调用此函数
                // 所以先检查状态码
                if (req.status == 200) {
                    // 以响应文本为结果，完成此 Promise
                    resolve(req.response);
                } else {
                    // 否则就以状态码为结果否定掉此 Promise
                    // （提供一个有意义的 Error 对象）
                    reject(Error(req.statusText));
                }
            };

            // 网络异常的处理方法
            req.onerror = function() {
                reject(Error("Network Error"));
            };

            // 发出请求
            req.send();
        });
    }
    var story = get('story.json');
    story.then(function(response) {
        console.log("Success!", response);
    }, function(error) {
        console.error("Failed!", error);
    }).then(function(res) {
        console.log(res); //前一个若没有返回值的话这里是undefined
    }, function(err) {
        console.log(err);
    });

    story = get('story.json');
    story.then(function(res){
        return JSON.parse(res);
    }).then(function(obj){
        console.log(obj);
    });
    //可以简写成
    story.then(JSON.parse).then(function(obj) {
        console.log(obj);
    });
    //这是为什么呢  虽然我们看不到JSON.parse的实现(在console中得到的结果是 function parse() { [native code] }  )
    //var xxx = JSON.parse(xxx)  说明这个函数接受一个参数且有返回值  所以可以猜测JSON.parse() 大致是 function(str){... retunn obj} 这个样子
    //和前面的完成写法就是一样的

    //再来一个setTimeout的例子
    //我把ajax的例子放在前面是因为我觉得 ajax的使用场景会更容易理解
    var getData = function(){
        var data;
        setTimeout(function(){
            data = 'data';
        },0);
        return data;
    }
    console.log(getData()); //undefined //显然这样是得不到结果的
    //所以我们必须传入一个回调函数
    var getData = function(callback){
        var data;
        setTimeout(function(){
            data = 'data';
            callback(data);
        },0);
    }
    getData(function(data){
        console.log(data)
    });
    //复杂了就不好办了
    // 所以可以这样
    var getData = function(){
        var promise = new Promise(function(resolve, reject){
            setTimeout(function(){
                resolve('data');
            },0);
        });
        return promise;
    }
    getData().then(function(data){
        console.log(data);
    });



    //链式操作 ===========================================================================================
    //Promise的嵌套=======(在then的函数中又返回一个Promise)===============================================
    get('story.json').then(function(data){
        return get('story.txt');
    }).then(function(rs){
        console.log(rs); //虽然前一个Promise返回的是一个Promise对象  但是这里的rs并不是一个Promise  而是前面的Promise对象resolve的结果 //也就是story.txt中的内容
    })


    function getJSON(url) {
        return get(url).then(JSON.parse); //这里返回的是一个promise  且resolve函数的返回值是JSON.parse()后的对象
    }

    var storyPromise;
    function getChapter(i) {
        storyPromise = getJSON('story.json');
        return storyPromise.then(function(story) { //story的值是 JSON.parse(story.json)
            return getJSON(story.chapterUrls[i]);
            //和上面一样 这里虽然又返回了一个新的Promise 但实际上
        });
    }
    function getChapter2(){
        // 上面一段相当于
        var temp1 = get('story.json');
        var temp2 = temp1.then(function(story){
            return JSON.parse(story);
        });
        var temp3 = temp2.then(function(story){
            return get(story.chapterUrls[i]).then(function(data){
                return JSON.parse(data);
            })
        })
        return temp3;  //return 的是一个promise 其resolve值又是一个promise  这个promise的resolve值才是对应的chapter的内容
    }


    getChapter(0).then(function(chapter) {
        console.log(chapter);
        return getChapter(1);  //就是chapter-2.json
    }).then(function(chapter) {
        console.log(chapter);
    });


    //将jQ的ajax变成标准的Promise ======================================================
    var fetchData = Promise.resolve($.get('story.txt')); //转化为promise对象  //有的是cast 至少Chrome中的Promise是没有cast这个方法的
    fetchData.then(function(result) {
        return JSON.parse(result);
    }).catch(function(error) {
        //handle error
    }).then(function(data){
        console.log(data);
    });


    //Promise 不会立即执行 它仍然是异步的===================================================
    var promise = new Promise(function(resolve, reject) {
        console.log(0);
        resolve(1);
        console.log(2);
    })
    console.log(3);
    promise.then(function(value) {
        console.log(value);
    })
    console.log(4);
    //输出结果是  0 2 3 4 1

    //Promise 语法糖
    Promise.resolve(1);
    //相当于
    new Promise(function(resolve) {
        resolve(1);
    })

    Promise.reject(2);
    //相当于
    new Promise(function(resolve, reject) {
        reject(2);
    })

    Promise.resolve(1).catch(onRejected);
    //相当于
    Promise.resolve(1).then(undefined, onRejected);