快速将 Promise 运用在开发中

这篇文章面向对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使用流程代码：

function asyncFunction() {  //(1)
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('Async Hello World');
    }, 300);
  });
}

asyncFunction().then(function(value) {  //(2)
  console.log(value); //300ms后打印 "Async Hello World"
}).catch(function(error) {  //(3)
  console.log(error);
})复制代码

分析一下上面代码。

执行(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，你们也温习一下：

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 = "https://rockjins.js.org";
getURL(URL).then(function onFulfilled(value){
  console.log(value);
}).catch(function onRejected(error){
  console.error(error);
});复制代码

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真的很复杂，那它出现的意义是什么？本末倒置了，哈哈。

喜欢本文的朋友能够关注个人微信公众号，不按期推送一些好文。

本文出自Rockjins Blog，转载请与做者联系。不然将追究法律责任。