Javascript:Promise对象基础

作者: Lxylona | 来源:发表于2018-03-01 20:05 被阅读50次

    参考资料
    本文只记录Promise最基本内容,如果想详细深入了解,请移步下面两个链接
    JavaScript Promise迷你书
    JavaScript Promise:简介

    兼容性

    promise兼容性

    一、Promise 的状态

    Promise有3种状态:

    1. Pending:进行中
    2. Resolved(Fulfilled):已完成
    3. Rejected:已失败

    Promise状态的改变只有两种:

    1. Pending --> Resolved
    2. Pending --> Rejected
      这意味着,一个Promise对象resolve之后,状态就一直停留在Resolved那里了,反过来reject也一样。
      这种特点的结果是,Promise对象的状态改变之后,你再给它添加回调函数,这个函数也会执行。
      这跟事件监听器很不一样 —— 你一旦错过某个事件,就没办法再捕获他了,除非这个事件再次发生。

    二、 .then() 和 .catch()

    Promise构造器接受一个函数作为参数,这个函数有两个参数:resolve,reject,分别代表这个Promise实例成功之后的回调函数和失败之后的回调函数。
    举个例子:

    var promise = new Promise(function (resolve, reject) {
        var a = 1
        if (a == 1) {
            resolve(a)
        } else {
            reject(error)
        }
    })
    promise.then(function (value) {
        console.log(value);
    }).catch(function (error) {
        console.log(error);
    })
    
    // 输出:
    // 1
    

    不管是then方法还是catch方法返回的都是一个新的Promise实例,这意味着Promise可以链式调用then和catch,每一个方法的返回值作为下一个方法的参数:

    var promise = new Promise(function (resolve, reject) {
        var a = 1
        if (a === 1) {
            resolve(a)
        } else {
            reject(error)
        }
    })
    promise.then(function (value) {
        console.log(value++)
        return value
    }).catch(function (error) {
        console.log(error)
    }).then(function (value) {
        console.log(value++)
    })
    
    // 输出:
    // 1
    // 2
    

    如果其中一个then失败了,它后面第一个catch方法就会接受这个错误并执行,然后继续执行后面的方法,比如:

    var promise = new Promise(function (resolve, reject) {
        resolve()
    })
    promise.then(function (value) { // 抛出错误
        console.log(1 / x)
    }).then(function () { // 此方法不会执行
        console.log('This "then" method will not happend!')
    }).catch(function (error) { // 接受错误,并打印出错误
        console.log('Have an error: ',error)
    }).then(function () { // 此方法会执行
        console.log('This "then" method  will happend!')
    })
    
    // 输出:
    /*
    Have an error:  ReferenceError: x is not defined
        at /Users/linxueying/Library/Mobile 
        ......
    This "then" method  will happend!
    */
    

    三、 Promise.resolve() 和 Promise.reject()

    两者都是是new promise()的快捷方式。
    Promise.resolve(value)是下面代码的语法糖:

        new Promise(function (resolve) {
          resolve(value)
        })
    

    所以

        Promise.resolve(42).then(function(value){
            console.log(value);
        });
        
        // 等同于
        
        var promise = new Promise(function (resolve) {
          resolve(42)
        })
        promise.then(function (value) {
          console.log(value)
        })
    

    Promise.reject(value)是下面代码的语法糖:

        new Promise(function(resolve,reject){
            reject(new Error("出错了"));
        });
    

    四、 Promise.all 和 Promise.race

    1. Promise.all()

    接收一个Promise对象的数组作为参数,当这个数组里的所有Promise对象全部变为resolve的时候,该方法才resolve。
    如果其中一个Promise对象为reject的话,则该方法为reject。
    比如:

    // `delay`毫秒后执行resolve
    function timerPromisefy(delay) {
        return new Promise(function (resolve) {
            setTimeout(function () {
                resolve(delay);
            }, delay);
        });
    }
    // 当数组中所有Promise对象被resolve之后,该方法才返回
    Promise.all([
        timerPromisefy(1),
        timerPromisefy(32),
        timerPromisefy(64),
        timerPromisefy(128)
    ]).then(function (value) {
        console.log(value);    
    });
    
    //输出: [ 1, 32, 64, 128 ]
    

    2. Promise.race()

    使用方法和Promise.all一样,接收一个Promise对象数组为参数。
    只要其中一个Promise对象变为Resolved或者Rejected状态,该方法返回,进行后面的处理。
    看例子:

    // `delay`毫秒后执行resolve
    function timerPromisefy(delay) {
        return new Promise(function (resolve) {
            setTimeout(function () {
                resolve(delay);
            }, delay);
        });
    }
    // 任何一个promise变为resolve或reject 的话程序就停止运行
    Promise.race([
        timerPromisefy(1),
        timerPromisefy(32),
        timerPromisefy(64),
        timerPromisefy(128)
    ]).then(function (value) {
        console.log(value);    
    });
    
    // 输出: 1
    

    五、 用Promise封装AJAX代码

    原生的AJAX代码真的是又臭又长了,可以用Promise把它们封装起来,每次使用只需要调用一下封装好的函数就可以了:

    function get(url) {
        // 返回一个Promise对象
        return new Promise(function (resolve, reject) {
            // 创建一个XHR对象
            var req = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP')
            req.open('GET', url, true)
            // 使用req.onload监听req的状态
            req.onload = function () {
                if (req.readyState == 4 && req.status == 200) {
                    resolve(req.response)
                } else {
                    reject(Error(req.statusText))
                }
            }
    
            // 网络错误
            req.onerror = function () {
                reject(Error("Network Error"));
            };
    
            // 发送请求
            req.send();
        });
    }
    get("http://something").then(function (response) {
        console.log(response);
    }).catch(function (error) {
        console.log(error);
    })
    

    之后想要使用AJAX,只需要一个简单的get()函数就可以搞定啦!
    有一个地方需要注意的是,在get()函数里面调用了req.onload,之前为什么这里不使用req.onreadystatechange呢?
    上面已经说过,Promise的状态的改变是单向的,一次性的,一旦改变,状态就会凝固了,而我们代码中判断状态的片段是这样的:

    if (req.readyState == 4 && req.status == 200) {
            resolve(req.response)
    } else {
            reject(Error(req.statusText))
     }
    

    我们在if...else语句中改变了Promise的状态,也就是req.onreadystatechange只会被调用一次。那么如果用req.onreadystatechange的话,会出现什么结果呢?
    我们永远只能得到error~因为req的state一旦改变,req.onreadystatechange就会被调用,所以我们永远只能捕捉到req的state为2的时候!
    不得不说Promise真的很有趣!

    相关文章

      网友评论

        本文标题:Javascript:Promise对象基础

        本文链接:https://www.haomeiwen.com/subject/zwrbxftx.html