【JavaScript 教程】ES6 中的 Promise对象 详解
1、Promise对象含义
promise是异步编程的一种解决方法。
所谓promise，简单说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，从语法上说，promise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。
2、Promise 的状态
Promise有3种状态：
- Pending：进行中
- Resolved(Fulfilled)：已完成
- Rejected：已失败
Promise状态的改变只有两种：
- Pending --> Resolved
- Pending --> Rejected
这意味着，一个Promise对象resolve之后，状态就一直停留在Resolved那里了，反过来reject也一样。
这种特点的结果是，Promise对象的状态改变之后，你再给它添加回调函数，这个函数也会执行。
这跟事件监听器很不一样 —— 你一旦错过某个事件，就没办法再捕获他了，除非这个事件再次发生。
2、Promise对象特点
（1）对象的状态不受外界影响。promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来“承若”；
（2）一旦状态改变就不会再变，任何时候都可以得到这个结果。promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。这时就称为resolved（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果，这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段。
3、Promise的用法
promise表示的是一个异步操作，每当我们new一个promise实例，就表示一个具体的异步操作，那么这个异步操作的结果就只能有两种状态：成功/失败，两者都需要回调函数resolve/reject返回。所以内部拿到操作的结果后，无法使用return把操作结果返回给调用者，这时候只能用回调函数的形式来把成功或失败的结果返回给调用者。
promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
then方法可以接受连个回调函数作为参数，第一个回调函数是promise对象的状态变为resolved时调用，第二个回调函数是promise对象的状态变为rejected时调用，其中，第二个函数是可选的，不一定要提供，这两个函数都接受promise对象传出的值作为参数；
getJSON是对XMLHTTPRequest对象的封装，用于发出一个针对JSON数据的HTTP请求，并且返回一个promise对象，需要注意的是，在getJSON内部，resolve函数和reject函数调用时，都带有参数；
如果调用resolve函数和reject函数时带有参数，那么他们的参数会被传递给回调函数，reject函数的参数通常是Error对象的实例，表示抛出的错误，resolve函数的参数除了正常的值以外，还可以是另一个promise实例；
4、.then() 和 .catch()
then() 只有在Promise对象中才有。
then()方法是异步执行。
意思是：就是当.then()前的方法执行完后再执行then()内部的程序，这样就避免了，数据没获取到等的问题。
语法：promise.then(onCompleted, onRejected);
参数
- 必需。（promise） Promise 对象。
- 必需。（onCompleted） 承诺成功完成时要运行的履行处理程序函数。
- 可选。（onRejected） 承诺被拒绝时要运行的错误处理程序函数。
Promise构造器接受一个函数作为参数，这个函数有两个参数：resolve，reject，分别代表这个Promise实例成功之后的回调函数和失败之后的回调函数。
var promise = new Promise(function (resolve, reject) {
var blog = "奋斗中的编程菜鸟"
if (blog == "奋斗中的编程菜鸟") {
resolve(blog )
} else {
reject(error)
}
})
promise.then(function (value) {
console.log(value);
}).catch(function (error) {
console.log(error);
})
// 输出：
// 奋斗中的编程菜鸟
不管是then方法还是catch方法返回的都是一个新的Promise实例，这意味着Promise可以链式调用then和catch，每一个方法的返回值作为下一个方法的参数：
var promise = new Promise(function (resolve, reject) {
var a = 1
if (a === 1) {
resolve(a)
} else {
reject(error)
}
})
promise.then(function (value) {
console.log(value++)
return value
}).catch(function (error) {
console.log(error)
}).then(function (value) {
console.log(value++)
})
// 输出：
// 1
// 2
如果其中一个then失败了，它后面第一个catch方法就会接受这个错误并执行，然后继续执行后面的方法，比如：
var promise = new Promise(function (resolve, reject) {
resolve()
})
promise.then(function (value) { // 抛出错误
console.log(1 / x)
}).then(function () { // 此方法不会执行
console.log('This "then" method will not happend!')
}).catch(function (error) { // 接受错误，并打印出错误
console.log('Have an error: ',error)
}).then(function () { // 此方法会执行
console.log('This "then" method will happend!')
})
// 输出：
/*
Have an error: ReferenceError: x is not defined
at /Users/linxueying/Library/Mobile
......
This "then" method will happend!
*/
5、Promise.resolve() 和 Promise.reject()
两者都是是new promise（）的快捷方式。
Promise.resolve(value)是下面代码的语法糖：
new Promise(function (resolve) {
resolve(value)
})
所以
Promise.resolve(42).then(function(value){
console.log(value);
});
// 等同于
var promise = new Promise(function (resolve) {
resolve(42)
})
promise.then(function (value) {
console.log(value)
})
Promise.reject(value)是下面代码的语法糖：
new Promise(function(resolve,reject){
reject(new Error("出错了"));
});
【JS 教程】相关技术文章：
【JS语法糖】常见的几种JS语法糖
6、Promise.all() 和 Promise.race()
- Promise.all()
接收一个Promise对象的数组作为参数，当这个数组里的所有Promise对象全部变为resolve的时候，该方法才resolve。
如果其中一个Promise对象为reject的话，则该方法为reject。
比如：
// `delay`毫秒后执行resolve
function timerPromisefy(delay) {
return new Promise(function (resolve) {
setTimeout(function () {
resolve(delay);
}, delay);
});
}
// 当数组中所有Promise对象被resolve之后，该方法才返回
Promise.all([
timerPromisefy(1),
timerPromisefy(32),
timerPromisefy(64),
timerPromisefy(128)
]).then(function (value) {
console.log(value);
});
//输出： [ 1, 32, 64, 128 ]
- Promise.race()
使用方法和Promise.all一样，接收一个Promise对象数组为参数。
只要其中一个Promise对象变为Resolved或者Rejected状态，该方法返回，进行后面的处理。
看例子：
// `delay`毫秒后执行resolve
function timerPromisefy(delay) {
return new Promise(function (resolve) {
setTimeout(function () {
resolve(delay);
}, delay);
});
}
// 任何一个promise变为resolve或reject 的话程序就停止运行
Promise.race([
timerPromisefy(1),
timerPromisefy(32),
timerPromisefy(64),
timerPromisefy(128)
]).then(function (value) {
console.log(value);
});
// 输出： 1
7、用Promise封装AJAX代码
原生的AJAX代码真的是又臭又长了，可以用Promise把它们封装起来，每次使用只需要调用一下封装好的函数就可以了：
function get(url) {
// 返回一个Promise对象
return new Promise(function (resolve, reject) {
// 创建一个XHR对象
var req = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP')
req.open('GET', url, true)
// 使用req.onload监听req的状态
req.onload = function () {
if (req.readyState == 4 && req.status == 200) {
resolve(req.response)
} else {
reject(Error(req.statusText))
}
}
// 网络错误
req.onerror = function () {
reject(Error("Network Error"));
};
// 发送请求
req.send();
});
}
get("http://something").then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
})
之后想要使用AJAX，只需要一个简单的get()函数就可以搞定啦！
有一个地方需要注意的是，在get()函数里面调用了req.onload，之前为什么这里不使用req.onreadystatechange呢?
上面已经说过，Promise的状态的改变是单向的，一次性的，一旦改变，状态就会凝固了，而我们代码中判断状态的片段是这样的：
if (req.readyState == 4 && req.status == 200) {
resolve(req.response)
} else {
reject(Error(req.statusText))
}
我们在if…else语句中改变了Promise的状态，也就是req.onreadystatechange只会被调用一次。那么如果用req.onreadystatechange的话，会出现什么结果呢？
我们永远只能得到error～因为req的state一旦改变，req.onreadystatechange就会被调用，所以我们永远只能捕捉到req的state为200的时候！
【Java Web】相关技术文章：
【Java Web总结】Java Web项目中 的.classpath、.mymetadata、.project文件作用
【Java Web问题解决】Tomcat报错javax.servlet.ServletException: Error instantiating servlet class.报错404
【比较】什么是“服务器端跳转”“客户端跳转”，二者有什么区别？
【总结】表单提交的get和post有什么不同？
【Java Web问题解决】Tomcat报错：java.lang.ClassCastException: cannot be cast to javax.servlet.Filter解决办法
【Java Web问题解决】Filter过滤器初始化方法init()执行了两次原因及解决方法
【总结】Java Web 中的4种属性范围（page、request、session、application）
【Java Web问题解决】Tomcat报错：java.sql.SQLException: No suitable driver found for jdbc:mysql://
【Java Web问题解决】Tomcat启动时控制台出现中文乱码的问题解决方法
【示例项目】java实现通过身份证号码判断籍贯所在地区
【总结】HTTP协议中的状态码（200、403、404、500等）
【Java Web问题解决】提交表单后显示乱码原因及解决办法
【Java Web总结】JSP页面的生命周期详解
【Java Web总结】JSP页面实现类详解
【Java Web 问题解决】Tomcat启动失败 报错：Server Tomcat v9.0 Server at localhost failed to start.
【Java Web问题解决】连接数据库出错：java.sql.SQLException: No suitable driver found for jdbc:mysql://localhost:3306/
【Java Web问题解决】使用过滤器Filter解决提交表单后显示乱码问题
【Java Web问题解决】过滤器Filter进行编码过滤后页面空白、显示不了原因及解决办法
【Linux 操作系统】相关技术文章：
【Linux问题解决】Ubuntu Linux 安装gcc4.9 g++4.9报错“没有可供安装的候选者”解决办法
【Linux教程】Ubuntu Linux 更换源教程
【Linux教程】如何实现在Ubuntu Linux和windows之间复制粘贴、拖拽复制文件？
【Linux问题解决】操作系统用C语言多线程编程 对‘pthread_create’未定义的引用 报错解决办法
【Linux教程】Linux中用C语言多线程编程之pthread_join()函数
【Linux操作系统、C语言】在Linux中用C语言进行OpenMP并行程序设计之常见指令、库函数和指令总结
【VMware 虚拟机问题解决】VMware Workstation pr无法在Windows上运行的解决方案
【Linux 问题解决】Ubuntu执行apt-get命令报错：无法获得锁 /var/lib/dpkg/lock…解决方案
【Python】相关技术文章：
【总结】Python与C语言、Java等语言基本语法的不同点
【总结】分析Python中的循环技巧
【总结】Python语言是编译型语言还是解释型语言？（Python程序执行过程）
【总结】Python2 和 Python3 的区别
利用Python一层循环打印 * 型三角形
【总结】Python与C语言、Java等语言基本语法的不同点
【总结】你知道吗？——元组其实是可变的序列！
【Python爬虫教程】Python爬虫基本流程及相关技术支持
【Python问题解决】PyCharm中debug报错：using cython not found. pydev debugger: process 13108 is connecting原因及解决
【Python总结】闭包及其应用
【IntelliJ IDEA教程】相关技术文章：
【Intellij IDEA教程】怎么自动清除无效的import导入包、清除无效的import导入包的快捷键
【IntelliJ IDEA教程】在IntelliJ IDEA启动项目 Warning:java: 源值1.5已过时, 将在未来所有发行版中删除 解决办法
【IntelliJ IDEA教程】提示信息Unmapped Spring configuration files found.Please configure Spring facet. 解决办法
【IntelliJ IDEA教程】怎么取消IntelliJ IDEA对单词拼写的检查
【Jupyter Notebook教程】相关技术文章：
【Python教程】Jupyter Notebook把一段很长的代码分成多行的解决办法】
【操作系统 教程】相关技术文章：
【Linux操作系统 教程】进程间的五种通信方式详解之——管道】
【Android 教程】相关技术文章：
【Android教程】Android Studio找不到连接的手机完全解决办法】
【Android问题解决】java.io.IOException: Cleartext HTTP traffic to … not permitted完美解决
【React 教程】相关技术文章：
【yarn问题解决】An unexpected error occured：“https://npm-registry.toolsfdg.net/”connnect ECONNREFUSED10.
【React + Antd 教程】Failed to compile. Module not found: Can’t resolve 'antd/dist’完美解决
【JS 教程】相关技术文章：
【JS语法糖】常见的几种JS语法糖
【Windows 教程】相关技术文章：
【Windows技巧】完美解决“如何在任意文件夹中右键打开cmd终端？”右键快捷方式打开指定文件夹目录下的cmd终端
关于JSP页面的生命周期详解，可参考如下的技术文章：
【Java Web总结】JSP页面的生命周期详解
【前端 教程】相关技术文章：
【前端 教程】详解 立即执行函数
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
