从0到1掌握Promise（一）

本文主要是介绍从0到1掌握Promise（一），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

2015年就已经出现的ES6新增语法中的Promise，我一直没有时间好好研究。看了不少Promise的使用教程和原理解析，总觉得有些晦涩难懂或者不够全面，看完也没法徒手写一段使用Promise的代码，所以决定自己重新学习，并在这里简单分享自己的学习笔记。

Promise 是什么？

根据Promises/A+定义的标准：

A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its then method, which register callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled.

promise对象表示异步操作的最终结果。使用promise的 主要方式是通过then方法，这个方法注册回调以接收promise的最终值或者无法fulfilled的原因。这段话对于经验丰富的人来说比较容易理解，对经验稍少的人来说，可能就显得过于抽象（当然，我翻译得可能不够准确）。初次接触Promise，我建议可以先不理会这些概念。

Promise首先是一个构造函数，相当于静态语言中的“类”，和Array、RegExp、Object是同一量级的数据类型（也就是函数）。

那么为什么要新增这一个构造函数呢？

到ECMAScript5这个版本中，js已经很强大了，React、Vue、Angular都是基于ECMAScript5开发的，前端开发已然面貌一新，为什么要多此一举？

先别急，让我们先假设一个场景。比如，我们要在页面上展示小猪佩琦一天的生活。其主要过程为：醒来->起床->穿衣服->刷牙->吃早餐->去学校->上课。最终的展示效果如下图

我们可以放7个img标签在html文件上，但是，一般情况下，这样做无疑是回到刀耕火燎的时代。那么还有什么办法？一般来说，采用异步加载的方式是首选。通过new Image() 创建一个对象，拿到图片，再渲染到页面上。可是一共有7张图片，而且它们需要按照固定的次序展示，那应该怎么做呢？毫无疑问，最终的代码会如下图所示。

像这种层层嵌套的回调函数就是令人闻风丧胆的“回调地狱”。Promise就是为解决这个问题而出现的。

也许上面的代码看起来似乎不是那么恐怖，而且运行起来没有问题。但请注意，这一段代码的格式已经很规范，并且命名清晰明了。想象一下，如果你的程序出现了一个错误，你怎么去调试？需要花多长时间？这段代码你写着写着会不会混乱？当然，如果你有时间也没问题，但是隔一个月再来看这段代码，你看得懂吗？或者这个项目让别人接手，别人能看懂吗？

当然，说得再多不如直接上代码，请看下图：

对比两张图，使用的Promise的代码整整少了8行，而且清晰明了，非常简洁、优化。这里先不谈两段代码执行过程的区别。Promise毫无疑问在可阅读性上碾压传统的开发模式。

下面，我们继续深入地谈谈Promise。根据文章开头，Promises/A+的定义：

promise对象表示异步操作的最终结果

• 什么是异步操作？
  要理解什么是异步操作，首先要明白代码是怎样被解释并且执行的。
  比如下面这一段代码的执行过程，我简单地在旁边标注了一下。

和异步操作相反地是同步操作，大部分情况下，代码地执行过程是同步地，也就是一行一行地往下执行，如上图。

异步操作无非就是这三类：网络请求(new XMLHttpRequest)、定时器(setTimeout、setInterval)和事件(addEventListener、元素的onclick等)。不过，在日常开发中，promise的使用场景一般都和网络请求相关。可是我们可以看到promise原理剖析类的文章，Demo里一般都会用到setTimout这个函数。为什么呢？当然是因为这样就不用涉及到后台开发了。

也许上面地代码看上去像是同步地，因为代码地执行过程是很快地。所以不妨把上面地1000改成5000试试看。

• 异步操作的结果指的是什么？
  这里可以举一个简单的例子。比如，你给你的朋友发了个消息“请借我30块买喜茶”，发完了之后，你继续看书、打游戏、敲代码，不会什么也不干一直等着朋友的回复。而朋友看到消息后直接转账给你或者回复“没钱，不借”就是异步操作的“结果”，当然朋友也可能根本不理会你，这也是异步操作的“结果“。

new Promise()，相当于告诉Promise,我要给朋友发消息“请借我30块买喜茶”，那么Promise在实例化的过程中，会执行这个任务。可是朋友究竟会什么时候回复，回复什么，这个取决于朋友，没有谁可以保证。反正最终一定会有个结果的，无论是收到转账、拒绝或者不回复。那么我们怎么处理这些结果呢？如果朋友转账了，要怎么做？如果朋友拒绝了，怎么办？如果朋友不回复，怎么处理？这就涉及到promise实例中的各种方法了。留到下一篇文章再说了！

这篇关于从0到1掌握Promise（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！