理解 ES6 中的 Promise

cart 3年前
   <p style="text-align: center;"><img src="https://simg.open-open.com/show/021519e804bff3171d0e95f752c458fa.jpg"></p>    <p>这篇文章我尝试从感性的角度来理解一下 Promise,举一个栗子。</p>    <p>小明来到火车站,跟售票员说:“我要一张广州到杭州的高铁票”,售票员说:“你等等,我查一下!”</p>    <p>上面这个场景,售票员对小明说的这句话就是一个 “承诺” ,告诉小明,我会替你查一下,看看有没有,如果有余票,就告诉你有,没有就告诉你没有。</p>    <p>那么,小明是怎么得到这个 “承诺” 的呢?</p>    <p>小明得到这个“承诺”是因为小明告诉了售票员,他要一张火车票。</p>    <h3><strong>创建 Promise 实例</strong></h3>    <p>那么,在 JavaScript 里要得到一个 Promise 要怎么做呢?答案就是创建一个 Promise 实例。</p>    <p>下面,我们可以来看一下语法了</p>    <pre>  var promise = new Promise(executor)  var promise = new Promise(function(resolve, reject){ ... })  </pre>    <p>executor (遗嘱执行者),这是个很形象地参数名。</p>    <ol>     <li>executor 是一个函数,带有 resolve 、 reject 两个参数</li>     <li>executor 在创建实例的时候立即执行</li>     <li>executor 在执行的时候会把并把 成功回调函数 和 失败回调函数 作为参数传递进来,赋值给 resolve 和 reject</li>     <li>executor 里面调用 resolve 和 reject 会分别触发 promise 的 成功 或 失败</li>    </ol>    <p>有同学可能会问,创建一个 Promise 实例跟小明买票有什么关系?</p>    <p>现在我们用代码来描述一下小明买票的故事。</p>    <pre>  /*   * 比如说写代码的人 我 是 小明   * Promise实例 是 “承诺”   * executor 就是 售票员   */    // 我是小明,我要买票,你帮我查查有没有票  var promise = new Promise(function (resolve, reject){   // 先起来去喝个水   drink()   // 吃个饭   eat()   // 现在搜一下 广州到杭州 的车票   var result = search('广州-杭州')   // 如果搜到有车票,就告诉小明有票   if (result !== null) {   resolve()   }   // 如果没有搜到车票,就告诉小明没有票了   else {   reject()   }  })  </pre>    <p>小明说要买票,售票员马上就告诉小明“你等等,我查一下!”,给了他这个承诺,这个过程是同步的。而售票员给了小明这个承诺之后,再到告诉小明有票还是没票,这个过程明显是异步的,因为中间售票员还去了喝水吃饭…,查票也需要时间;也可以是同步的,售票员听到之后马上告诉小明,没票了~~</p>    <p>executor 做的事情跟售票员很像,就是将 Promise实例 的状态变为 成功 或者 失败 ,在此之前可以执行任何操作(只要不报错~~);就像售票员一样,就是要告诉小明有票还是没票,他中间可以做任何事情。</p>    <h2><strong>Promise.prototype.then</strong></h2>    <p>看到这里,或许大家都会有个疑问:小明被告知有票或者没票之后可以做什么?</p>    <p> </p>    <p>来自:http://mertensming.github.io/2016/11/21/promise-practice/</p>    <p> </p>