乐趣区

Promise对象的理解与利用

Promise 对象

官方解释:
Promise 对象是一个代理对象(代理一个值),被代理的值在 Promise 对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(handlers)。这让异步方法可以像同步方法那样返回值,但并不是立即返回最终执行结果,而是一个能代表未来出现的结果的 promise 对象
个人理解:
就是一个包含 executor 函数的对象, 而这个函数的两个参数 resolve,reject。可以把异步处理函数的结果抛出去,异步方法可以像同步方法那样返回值。

案例代码

 <button id="btn"> 点击 </button> 
    <script>
            const promise = new Promise(function(resolve, reject){var btn = document.querySelector('#btn');
               btn.onclick = function(){resolve('成功')
               }
            }
            );
            promise.then(function(message){console.log(message);//message 来自 resolve
            }).catch((error) => {console.log(error);//error 来自 reject
            })
    </script>

点击按钮时

onclick 事件发生,回调函数调用成功,可以通过 resolve(result)设置 result 来传递数据.
结果:

成功

若异步函数发生错误

onclick 事件发生错误,可以通过 reject(error)传递错误信息.executor 函数将默认调用 reject, 也可以自定义。
若将

var btn = document.querySelector('#btn');

改为

var btn = document.querySelector('btn');

结果为:

TypeError: Cannot set property 'onclick' of null
    at index.html:31
    at new Promise (<anonymous>)
    at index.html:29
退出移动版