快速将 Promise 运用在开发中

￡神魔★判官ぃ 2022-09-30 00:49 177阅读 0赞

> 这篇文章面向对Promise不甚了解的朋友，我将告诉你如何把它快速运用在开发中。

### 什么是Promise？ ###

简单几句介绍一下。Promise是抽象异步处理对象以及对其进行各种操作的组件。你可以理解为：它的出现，是为了让我们更方便的进行异步处理。

在Promise出现之前，说到JavaScript的异步处理，我们都会想到回调函数,like this:

getAsync("fileA.txt", function(error, result){
      if(error){
       // 取得失败时的处理 throw error;
        throw error;
      }
    });

上面遵循`Node.js`的规定，回调的第一个参数是`error`。如果所有的回调函数都像`Node.js`一样，统一参数使用规则的话，那写法会很明了，但也仅仅是编码规范而已，使用不同的写法也不会出错。

而Promise则是把异步处理对象和处理规则进行规范化，并采用统一的接口来编写，使用规定方法之外的写法都会出错。

我们可以先看一个简单的使用Promise进行异步处理的例子:

var promise = getAsyncPromise("fileA.txt");
    
    promise.then(function(result){
      // 获取文件内容成功时的处理
    }).catch(function(error){
      // 获取文件内容失败时的处理
    });

看上去和回调函数有些不一样，在使用Promise进行异步处理的时候，我们必须按照接口规定的方法编写处理代码。

也即是说，除了使用Promise规定的方法(上面的`then`和`catch`),其他的方法都是不能使用的，而回调函数可以自定义回调的参数。

所以，Promise可以将复杂的异步处理轻松的进行模式化，没有理由让你不使用它。

接下来，我们看看怎么把Promise运用到开发中，这个才是大家想了解的。

### 学习Promise ###

在运用到开发之前，我们有必要先学习一些Promise的基本API(暂时看的有点糊涂没关系，等会的例子实践会和大家讲清楚的)。

目前大致有下面三种类型:

#### 1.Constructor(构造器) ####

我们从构造函数`Promise`来创建一个新`promise`对象作为接口。

要创建一个`promise`对象，可以使用`new`来调用`Promise`构造器来进行实例化。

var promise = new Promise(function(resolve, reject) { // 异步处理
      // 处理结束后、调用resolve 或 reject
    });

#### 2.Instance Method(实例方法) ####

在通过`new`生成的`promise`对象时，我们设置了在resolve(成功)和reject(失败)时调用的回调函数，我们可以使用`promise.then()`实例方法。

promise.then(onFulfilled,onReject);

*  resolve(成功)时：`onFulfilled`会被调用
 *  reject(失败)时：`onReject`会被调用

`onFulfilled`和`onReject`都为可选参数

`promise.then`成功和失败时都可以使用，另外在异常处理时，可以使用`promise.then(undefined, onReject)`这种方式，只指定`reject`时的回调函数即可。不过这种情况下，使用`promise.catch()`是个明智之选。

promise.catch(onReject);

#### 3.Static Method(静态方法) ####

像`promise.all()`和`Promise.resolve()`等在内，主要都是一些辅助方法(可以理解为一些语法糖)，这里不作深入探讨。

### 运用在开发中 ###

我们先来看一段Promise使用流程代码：

分析一下上面代码。

执行`(1)`处函数，会返回一个Promise对象，Promise对象内部在300ms后执行`resolve()`方法，这个方法调用`(2)`处的`then()`方法，并传入参数，如果Promise对象内部出现任何错误(比如平台不支持setTimeout方法)，就会执行`(3)`处的`catch()`发放，并把错误作为参数传入。

> 这里提一下，我看到很多朋友把Promise理解为Ajax的一种扩展，其实并不是这样的，Ajax只是一种请求数据的方式，因为Ajax是异步的，所以我们可以用Promise去管理Ajax请求，但这并不意味这Promise只服务于Ajax，只要是异步处理，我们都可以使用Promise去处理，就比如上面的`setTimeout`。

看到这里大家对Promise应该有一个大概的认识了，实际开发中Promise大部分时间还是搭配Ajax使用，我们来看看应该怎么做，下面用原生的方式请求Ajax，大家也温习一下：

`getURL`只有在XHR取得状态为200时才会调用`resolve`，也就是数据取得成功时，而其他情况(数据取得失败)则会调用`reject`。

当调用`resolve(req.responseText)`时，`then`方法也会被调用，并接收到`req.responseText`参数。

熟悉Node.js的朋友在写回调时会会将`callback(error,response)`的第一个参数设为`error`对象，在Promise中，resolve(成功)/reject(失败)担当了这个职责。

XHR中`onerror`触发时，就是发生错误时，理所当然要调用`reject`，我们重点来看下传给`reject`的值。

发生错误时要像这样`reject(new Error(req.statusText))`，创建一个Error对象再讲具体的值传入进去。传给`reject`的值也没有什么特殊限制，一般只要是Error对象(或继承自Error对象)即可。

### 小结 ###

其实你理解了Promise的运作流程，使用它十分方便和简单，它就是一个异步管理器，帮助我们更好地去进行异步处理。

试想，如果Promise真的很复杂，那它出现的意义是什么？本末倒置了，哈哈。

个人建了前端学习群，旨在一起学习前端。纯净、纯粹技术讨论，非前端人员勿扰！入群加我[微信][Link 1]：iamaixiaoxiao。

![1460000008545203_w_276_h_261][]

[Link 1]: http://lib.csdn.net/base/wechat
[1460000008545203_w_276_h_261]: /images/20220708/51729565ecd74e379c3b094839174542.png