ES6 Promise对象的概念和用法示例的详细说明

本文结合实例介绍了ES6 Promise对象的概念和用法。分享给大家参考，如下：

参考文章：ECMAScript 6入门

一、什么是承诺

Promise是异步编程的一种解决方案。它是一个容器，保存着将来将要结束的事件的结果。它有三种状态，只有异步操作的结果才能决定当前的状态，不受外界因素的影响。状态一旦改变，就不会再改变，也就是状态被解决了，这个结果随时都可以得到。

承诺的缺点：1。承诺不能取消，一经创建立即执行，不能中途取消。2.如果没有设置回调函数，Promise内部抛出的错误不会反映到外部。3.当它处于挂起状态时，不可能知道它正在前进到哪个阶段(刚刚开始或即将完成)。

二、允诺的用法

/* * *创建Promise实例* @类型{ Promise } * @异步操作成功时调用param resolve * @异步操作失败时调用param reject */const Promise=new Promise(函数(resolve，reject) {//.一些代码如果(/*异步操作成功*/) {resolve()。} else { reject(错误)；}});//调用PromisePromise。然后(函数(值){//成功}，函数(错误){//失败})；诺言一经创造就会被执行。

let promise=新promise(函数(解析，拒绝){ console . log(' Promise ')；resolve()；});promise . then(function(){ console . log(' resolved . '));});控制台日志('嗨！');//诺言(诺言创建后立即执行，所以先输出诺言)//嗨！//resolved(在当前脚本中的所有同步任务执行完毕之前，不会执行then方法指定的回调函数，因此resolved将最后输出)。如果使用参数调用解析函数和拒绝函数，它们的参数将被传递给回调函数。拒绝函数的参数通常是Error对象的一个实例，表示抛出的错误；除了正常值，解析函数的参数可能是另一个Promise实例。

const p1=新承诺(函数(解析，拒绝){ setTimeout(()=拒绝(新错误('失败')，3000)})const p2=新承诺(函数(解析，拒绝){settimeout (()=解析(p1，1000)}) p2。然后(结果=console.log(结果))。catch(error=console . log(error))//error 3360 fail在上面的代码中，P1是一个Promise，它在3秒钟后变为reject。P2的状态在1秒后改变，解析方法返回p1。P2归还了另一个承诺，这使得它自己的国家无效。p1的状态决定p2的状态。因此，以下语句都是针对后者(p1)的。再过2秒钟后，p1被拒绝，从而触发catch方法指定的回调函数。

第三，关于诺言原型的方法

Promise.prototype .然后()

然后方法的第一个参数是处于解析状态的回调函数，第二个参数(可选)是处于拒绝状态的回调函数。然后方法返回一个新的Promise实例，但不是原始的Promise实例。因此，可以使用链式编写，即在then方法之后调用另一个then方法。getJSON('/post/1.json ')。然后(post=getJSON(post.comment turl))。然后(comments=console . log(' resolved : '，comments)，err=console.log('rejected: '，err))；Promise.prototype.catch()

Promise.prototype.catch方法是的别名。然后(null，rejection)，并用于在发生错误时指定回调函数。Promise对象的错误是“冒泡”，将向后传递，直到被捕获。也就是说，错误总是被下一个catch语句捕获。getJSON('/post/1.json ')。然后(function(post){ return getJSON(post.comment turl)；}).然后(函数(注释){//somecode})。catch(函数(error){//处理前三个Promise产生的错误})；//在上面的代码中，有三个Promise对象：一个由getJSON生成，两个由then生成。它们中任何一个抛出的错误都将被最后一个捕获捕获。Promise.prototype.finally()

finally方法用于指定要执行的操作，而不管Promise对象的最终状态如何。该方法于2018年推出。finally方法的回调函数不接受任何参数，这意味着无法知道以前的Promise状态是已履行还是已拒绝。这说明finally方法中的操作应该独立于状态，不依赖于Promise的执行结果。第四，许诺的方法

承诺

Promise.all方法用于将多个Promise实例打包成一个新的Promise实例。const p=Promise.all([p1，p2，P3])；只有当p1、p2和p3的状态变为满足时，p的状态才会变为满足。此时，p1、p2和p3的返回值形成一个数组，并被传递给p的回调函数.只要p1、p2和p3中的一个被拒绝，P的状态就变成被拒绝，第一个被拒绝实例的返回值将被传递给P的回调函数.如果p1、p2、p3有自己的catch方法，就不会触发P的catch方法，如果没有，就调用Promise.all()的catch方法。const p1=新Promise((解析，拒绝)={ resolve(' hello ')；}).然后(结果=结果)。渔获物(e=e)；Const p2=newpromise((解析，拒绝)={throw newerror('报告错误')；}).然后(结果=结果)。渔获物(e=e)；Promise.all([p1，p2])。然后(结果=console.log(结果))。catch(e=console . log(e))；//['hello '，Error:报告了一个错误] -。}).然后(结果=结果)；Const p2=newpromise((解析，拒绝)={throw newerror('报告错误')；}).然后(结果=结果)；Promise.all([p1，p2])。然后(结果=console.log(结果))。catch(e=console . log(e))；//Error:在Promise.race()中报告了错误

Promise.race方法还将多个Promise实例包装到一个新的Promise实例中。种族内部的一个实例率先改变状态，Promise.race()的状态也随之改变。首先更改的Promise实例的返回值被传递给Promise.race()的回调函数。承诺.解决()

有时需要将现有的对象转换为Promise对象，Promise.resolve方法扮演了这个角色。Promise.resolve方法的参数分为四种情况。参数是一个承诺实例：如果参数是一个承诺实例，Promise.resolve将返回此实例，不做任何修改。参数是一个可命名对象：该可命名对象引用了一个具有then方法的对象，Promise.resolve方法会将该对象转换为Promise对象，然后立即执行该可命名对象的then方法。参数不是具有then方法的对象或根本不是对象：如果参数是原始值或没有then方法的对象，Promise.resolve方法将返回一个状态为已解析的新Promise对象。不带任何参数：Promise.resolve方法允许您不带参数调用，并直接返回处于已解析状态的Promise对象。应该注意的是，立即解决的Promise对象位于当前事件循环的末尾，而不是下一个事件循环的开始。

setTimeout(function(){ console . log('三')；}, 0);Promise.resolve()。然后(function(){ console . log(' two ')；});console . log(' one ')；//一//二//三Promise.reject()

Promise.reject(原因)方法还返回一个状态为拒绝的新Promise实例。请注意，Promise.reject()方法的参数将用作拒绝的原因，并成为后续方法的参数。这与Promise.resolve方法不一致。Const然后able={然后(解决，拒绝){拒绝('错误')；}};答应我。拒绝(然后能够)。catch (e={console。日志(e===然后能够)})//真v .承诺的应用

包装http请求

在使用vue的过程中，我们用Promise打包了Axios。

newAxios.post=function (url，params){ params=QS . stringify(params)；返回新的Promise((解析，拒绝)={ Axios.post(url，params))。然后(RES={ if(RES . headers . warning==' redirect '){ window . location . href='/' } else { resolve(RES)；} }) .catch(err={ reject(err))；}) })};处理异步请求

使用Promise.all()方法处理异步请求，例如，一些请求需要在之前的请求完成后触发。

后续有待补充。

附件：ECMAScript 6入口网站下载地址：https://www.jb51.net/books/551561.html

有关JavaScript的更多信息，请参见本网站的主题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》和《JavaScript数学运算用法总结》

希望本文对JavaScript编程有所帮助。