【ES6】Promise对象详解-阿里云开发者社区

【ES6】Promise对象详解

2023-02-22 176

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【ES6】Promise对象详解

引言：ES6新增的Generato、Promise、async都与异步编程有关。这里我们讲述Promise对象。

一、Promise对象的含义

所谓Promise就是一个对象，用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作)，并且这个事件提供统一的 API,可供进一步处理。

Promise对象有以下两个特点。

1.对象的状态不受外界影响。Promise对象代表一个异步操作，有3种状态: Pending( 进行中)、Resolved (已完成，又称Fulfilled)和Rejected (已失败)。只有异步操作的结果可以决定当前是哪种状态，任何其他操作都无法改变这个状态。这也是“Promise” 这个名字的由来，它在英语中意思就是“承诺”，表示其他手段无法改变。

2.一旦状态改变就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要其中之一发生，状态就凝固了，不会再变，会一直保持这个结果。就算改变已经发生，再对Promise对象添加回调函数，也会立即得到这个结果。这与事件( Event)完全不同。事件的特点是，如果你错过了它，再去监听是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误不会反应到外部。再者，当处于Pending状态时，无法得知目前进展到哪一个阶段 (刚刚开始还是即将完成)。

如果某些事件不断地反复发生，一般说来，使用stream模式是比部署Promise更好的选择。

二、Promise对象的用法

ES6规定，Promise 对象是一个构造函数，用来生成Promise实例。下面的代码块2-1创造了一个Promise实例。

/********   代码块2-1    ********/
var promise = new Promise(function(resolve, reject) {
  //... some code
  if (/*异步操作成功*/){
    resolve(value);
  } else
    reject(error);
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供，不用自己部署。 resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”(即从Pending变为Resolved)，在异步操作成功时调用，并将异步操作的结果作为参数传递出去;

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”(即从Pending变为Rejected)，在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。

Promise实例生成以后，可以用then方法分别指定Resolved 状态和Rejected状态的回调函数。见代码块2-2。

/********   代码块2-2    ********/
promise.then( function(value) {
  // success
}, function(value) {
// failure
});

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用，第二个回调函数是Promise 对象的状态变为Rejected 时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

三、Promise对象的几个应用【重点】

1、时间延迟函数

提出背景：我们知道setTimeout()函数可以每隔一段时间循环运行函数体。我们在编程过程中，经常会只需要循环两三次，或者在某个函数段需要停滞几秒，这时再用setTimeout就很麻烦。

应用介绍：以下函数可延迟100ms运行。下面的代码块3-1中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间(ms参数)以后，Promise 实例的状态变为Resolved, 就会触发then方法绑定的回调函数。

/********   代码块3-1    ********/
function timeout(ms) {
  return new Promise((resolve, reject) => {
  setTimeout(resolve, ms, 'done');
});
timeout(100). then((value) => {
  console. log(value);
});

2、图片异步加载

function loadImageAsync(url) {
  return new Promise( function(resolve, reject) {
    var image = new Image();
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject(new Error ('Could not load image at '+url);
    };
    image.src = url;
  });
}

function loadImageAsync(url) {
  return new Promise( function(resolve, reject) {
    var image = new Image();
    image.onload = function() {
      resolve(image);
    };
    image.onerror = function() {
      reject(new Error ('Could not load image at '+url);
    };
    image.src = url;
  });
}