ES6异步编程之Promise（一）

前端王睿 · 简书 · · 2019-04-20 14:53

ES6之Promise对象

Promise，中文有“保证，承诺”之意，而在ES6中引入的Promise对象，则是 异步编程的一种解决方案 。可以这样理解，它给我们承诺，在异步请求结束后会给我们返回一个结果，这个结果要么成功，要么失败。

在ES6之前，我们常用的异步编程方式就是 回调函数 和事件了，比如jQuery中的$.ajax()方法、图片加载时用的 load 和 error 事件等。

// Ajax数据请求
$.ajax({
  url: 'xxx',  // 接口地址
  success: function (data) {   // 回调函数
    // 请求成功时执行
    console.log('success');
  },
  error: function (err) {   // 回调函数
    // 请求失败时执行
    console.log('error');
  },
});

// 图片加载
var oImg = new Image();
oImg.src = 'xxx';  // 图片地址
oImg.onload = function () {   // load事件
  // 加载成功时执行
  console.log('success');
};
oImg.onerror = function () {   // error事件
  // 加载失败时执行
  console.log('error');
};

相信上面两种方式大家都非常熟悉了吧！然而，这两种方式都有个很大的缺点，就是当异步请求出现多个嵌套的情况，问题将可能变得相当复杂。例如：

$.ajax({
  url: 'x',  // 接口地址
  success: function (data) {
    $.ajax({
      url: 'xx',  // 接口地址
      success: function (data) {
        $.ajax({
          url: 'xxx',  // 接口地址
          success: function (data) {
            $.ajax({
              url: 'xxxx',  // 接口地址
              success: function (data) {
                //  ...
              }
            });
          }
        });
      }
    });
  }
});

由于之后每一个数据请求都必须建立在前一个数据请求成功的基础之上，所以通过回调函数的方式将会导致代码层层嵌套而难以维护 （回调地狱） ，而Promise的出现在一定程度上能有效地避免这个问题。

一、创建Promise对象

1. 基本语法

new Promise((resolve, reject)=>{
  if (/* 异步操作成功 */){
    resolve(value);  // 成功时执行
  } else {
    reject(error);  // 失败时执行
  }
})

2. 具体实例

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博