ES6新特性六：promise对象实例详解_网络技术_宿州市腾雀网络科技有限公司

ES6新特性六：promise对象实例详解

发布时间 - 2026-01-11 00:45:42 点击率：次

本文实例讲述了ES6新特性之promise对象。分享给大家供大家参考，具体如下：

1. promise 介绍

它是一个对象，也就是说与其他JavaScript对象的用法，没有什么两样；其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。它使得异步操作具备同步操作的接口，使得程序具备正常的同步运行的流程，回调函数不必再一层层嵌套。

它的思想是，每一个异步任务立刻返回一个Promise对象，由于是立刻返回，所以可以采用同步操作的流程。这个Promises对象有一个then方法，允许指定回调函数，在异步任务完成后调用。

异步操作f1返回一个Promise对象，它的回调函数f2写法如下

(new Promise(f1)).then(f2);

2. promise 对象的三种状态

① 异步操作未完成（pending）
② 异步操作已完成（resolved）
③ 异步操作失败（rejected）

3. 工作过程

Promise对象使用then方法添加回调函数。then方法可以接受两个回调函数，第一个是异步操作成功时（变为resolved状态）时的回调函数，第二个是异步操作失败（变为rejected）时的回调函数（可以省略）。一旦状态改变，就调用相应的回调函数，这两个回调函数都接受异步操作传回的值作为参数。

promise.then(
 console.log,
 console.error
);

4. then 的链式使用

① 首先then方法返回的一个新的promise对象，因此可以采用链式写法。

② then方法的第一个参数是Resolved状态的回调函数，第二个参数（可选）是Rejected状态的回调函数。

③ 如下，promise的状态一旦变为resolved，就依次调用后面每一个then指定的回调函数，每一步都必须等到前一步完成，才会执行。最后一个then方法的回调函数console.log和console.error，用法上有一点重要的区别。console.log只显示回调函数step3的返回值，console.error可以显示step1、step2、step3之中任意一个发生的错误，Promises对象的错误有传递性。

promise
 .then(step1)
 .then(step2)
 .then(step3)
 .then(
  console.log,
  console.error
 );

5. promise 对象的使用

var promise = new Promise(function(resolve, reject) { // promise的构造函数，Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject
 // 异步操作的代码
 if (/* 异步操作成功 */){
  resolve(value);//将异步的操作结果作为参数传递出去
 } else {
  reject(error);
 }
});

其中resolve和reject它们是两个函数，由JavaScript引擎提供，不用自己部署。

resolve函数的作用：将Promise对象的状态从“未完成”变为“成功”（即从Pending变为Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

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

① 下面是一个用Promise对象实现的Ajax操作的例子

var getJSON = function(url) {
 var promise = new Promise(function(resolve, reject){
  var client = new XMLHttpRequest();
  client.open("GET", url);
  client.onreadystatechange = handler;
  client.responseType = "json";
  client.setRequestHeader("Accept", "application/json");
  client.send();
  function handler() {
   if (this.readyState !== 4) {
    return;
   }
   if (this.status === 200) {
    resolve(this.response);//会将参数传递给回调函数
   } else {
    reject(new Error(this.statusText));
   }
  };
 });
 return promise;
};
getJSON("/posts.json").then(function(json) {
 console.log('Contents: ' + json);
}, function(error) {
 console.error('出错了', error);
});

② resolve函数的参数除了正常的值以外，还可能是另一个Promise实例，即一个异步操作的结果是返回另一个异步操作。

var p1 = new Promise(function (resolve, reject) {
 // ...
});
var p2 = new Promise(function (resolve, reject) {
 // ...
 resolve(p1);
})

6.Promise.prototype.catch()

① 一个 Promise 对象,如果异步操作抛出错误,状态就会变为Rejected,就会调用catch方法指定的回调函数,处理这个错误。

promise.then(function(posts) {
 // ...
}).catch(function(error) {
 // 处理 getJSON 和 前一个回调函数运行时发生的错误
 console.log('发生错误！', error);
});

② 另外,then方法指定的回调函数,如果运行中抛出错误，也会被catch方法捕获。

var promise = new Promise(function(resolve, reject) {
 throw new Error('test');
});
promise.catch(function(error) {
 console.log(error);
});
// Error: test

③ 另外两种写法

// 写法一
var promise = new Promise(function(resolve, reject) {
 try {
  throw new Error('test');
 } catch(e) {
  reject(e);
 }
});
promise.catch(function(error) {
 console.log(error);
});
// 写法二
var promise = new Promise(function(resolve, reject) {
 reject(new Error('test'));//reject方法的作用，等同于抛出错误
});
promise.catch(function(error) {
 console.log(error);
});

④ Promise 在resolve语句后面再抛出错误不会被捕获。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。

var promise = new Promise(function(resolve, reject) {
 resolve('ok');
 throw new Error('test');
});
promise
 .then(function(value) { console.log(value) })
 .catch(function(error) { console.log(error) });
// ok

7 Promise.all()

参数为Promise 对象的数组；将多个Promisre 对象包装成一个新的Promise 对象，如果数组中不是Promise 对象，就会自动调用 Promise.resolve方法，将参数转为Promise实例，再进一步处理。（Promise.all方法的参数可以不是数组，但必须具有Iterator接口，且返回的每个成员都是Promise实例）

var p = Promise.all(promises).then(function (posts) {
 // ...
}).catch(function(reason){
 // ...
});

① 只要promises之中有一个状态变为rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
② 如果全部都变为resolved；此时 promises 数组中所有对象的返回值组成一个数组，传递给p的回调函数。

8 Promise.resolve()

将现有对象转为 Promise对象，Promise.resolve方法就起到这个作用。

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

① 参数为Priomise 对象，Promise.resolve() 不做任何处理。
② 参数是一个具有 then 方法的对象：Promise.resolve方法会将这个对象转为Promise对象，然后就立即执行thenable对象的then方法。

let thenable = {
 then: function(resolve, reject) {
  resolve(42);
 }
};
let p1 = Promise.resolve(thenable);//p1为一个状态已经是resolved 的promise对象.
p1.then(function(value) {
 console.log(value); // 42
});

③ 参数不是具有then方法的对象，或根本就不是对象

该参数变为生成的 Promise 对象的 resolve() 的参数。

var p = Promise.resolve('Hello');//Hello 会传递给 p 的resolve()
p.then(function (s){
 console.log(s)
});
// Hello

希望本文所述对大家ECMAScript程序设计有所帮助。

# ES6 # 新特性 # promise对象 # ES6中非常实用的新特性介绍 # JavaScript ES6的新特性使用新方法定义Class # JavaScript中的Reflect对象详解(ES6新特性) # 深入浅出ES6新特性之函数默认参数和箭头函数 # 简单谈谈ES6的六个小特性 # ES6新特性之Symbol类型用法分析 # ES6(ECMAScript 6)新特性之模板字符串用法分析 # ES6新特性之变量和字符串用法示例 # ES6新特性之模块Module用法详解 # ES6新特性之字符串的扩展实例分析 # ES6新特性二：Iterator(遍历器)和for-of循环详解 # ES6新特性七：数组的扩充详解 # ES6新特性八：async函数用法实例详解 # ES6新特性之类(Class)和继承(Extends)相关概念与用法分析 # 让微信小程序支持ES6中Promise特性的方法详解 # ES6新特性：使用export和import实现模块化详解 # es6新特性之 class 基本用法解析 # ES6 13个新特性总结 # 回调 # 就会 # 链式 # 第一个 # 抛出 # 是一个 # 未完成 # 返回值 # 第二个 # 并将 # 会将 # 有一个 # 即从 # 组中 # 都是 # 也会 # 多个 # 才会 # 两种 # 上有

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何在Linux中管理临时权限 Linux sudo临时授权

下一篇：提升IIS 0托管网站响应速度的最佳实践有哪些？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何在Linux中管理临时权限 Linux sudo临时授权

下一篇：提升IIS 0托管网站响应速度的最佳实践有哪些？