Promise

作者: 秘果_li | 来源:发表于2019-01-19 14:49 被阅读0次

    Promise是JavaScript中的异步抽象处理对象,是把类似的异步处理对象和处理规则进行规范化, 并按照采用统一的接口来编写,而采取规定方法之外的写法都会出错

    Promises/A+ 规范

    1. Promise的状态
      一个Promise的当前状态必须是以下三种状态中的一种:
    • 等待状态(Pending)
      等待态时可以转换为执行状态或者拒绝状态
    • 执行状态(Fulfilled)
       处于执行态时,promise 不能迁移至其他任何状态并且必须拥有一个不可变的终值
    • 拒绝状态(Rejected)
       处于拒绝态时,promise 不能迁移至其他任何状态并且必须拥有一个不可变的拒绝原因


    1. Then 方法
      一个 promise 必须提供一个 then 方法用来访问其当前值、终值和据因
      then 方法可以被同一个 promise 调用多次
      then方法必须返回一个promise对象
    var promise = getAsyncPromise("fileA.txt"); 
    promise.then(function(result){
        // 获取文件内容成功时的处理
    }).catch(function(error){
        // 获取文件内容失败时的处理
    });
    
    ----
    返回promise对象
    
    1. onFulfilled 和 onRejected
      onFulfilled 和 onRejected 都是可选参数
    • 如果 onFulfilled 是函数:
      resolve(成功)时其必须被调用,其第一个参数为 promise 的终值,其调用次数不可超过一次

    • 如果 onRejected 是函数:
      reject(失败)时onRejected 必须被调用,其第一个参数为 promise 的据因,其调用次数不可超过一次

    (onFulfilled 和 onRejected 必须被作为函数调用(即没有 this 值))


    创建XHR的promise对象
    1. 创建一个用Promise把XHR处理包装起来的名为 getURL 的函数
      用例来源:http://liubin.org/promises-book/#how-to-write-promise
    function getURL(URL) {
        return new Promise(function (resolve, reject) {
            var req = new XMLHttpRequest();
            req.open('GET', URL, true);
            req.onload = function () {
                if (req.status === 200) {
                    resolve(req.responseText);
                } else {
                    reject(new Error(req.statusText));
                }
            };
            req.onerror = function () {
                reject(new Error(req.statusText));
            };
            req.send();
        });
    }
    // 运行示例 成功
    var URL = "http://httpbin.org/get";
    getURL(URL).then(function onFulfilled(value){
        console.log(value);
    }).catch(function onRejected(error){
        console.error(error);
    });
    

    示例运行结果

    { "args": {}, "headers": { "Accept": "*/*", "Accept-Encoding": "gzip, deflate", "Accept-Language": "en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7", "Connection": "close", "Host": "httpbin.org", "Origin": "http://liubin.org", "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36" }, "origin": "111.18.89.73", "url": "http://httpbin.org/get" }
    
    // 运行示例 失败
    var URL = "http://httpbin.org/status/500"; 
    getURL(URL).then(function onFulfilled(value){
        console.log(value);
    }).catch(function onRejected(error){ 
        console.error(error);
    });
    

    示例运行结果

    Error: INTERNAL SERVER ERROR
    

    getURL 只有在通过XHR取得结果状态为200时才会调用 resolve - 也就是只有数据取得成功时,而其他情况(取得失败)时则会调用 reject 方法

    1. 编写promise对象处理方法

    .then方法可以传入要调用的函数,为了方便理解函数通常命名为 onFulfilled
    .catch方法可以传入要调用的函数,通常命名为 onRejected

    Promise的基本写法总结

    • new Promise 方法创建promise对象

    • .then.catch 添加promise对象的处理函数

    注:

    Promise.resolve可以认为是 new Promise() 方法的快捷方式

    Promise.resolve(1)
    

    等价于

    new Promise(function(resolve){
        resolve(1);
    });
    

    方法 Promise.resolve(value); 的返回值也是一个promise对象,所以可以接着对其返回值进行 .then 调用。

    Promise.resolve(1).then(function(value){
        console.log(value);
    });
    

    相关文章

      网友评论

          本文标题:Promise

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