js之- 简解Promise的resolved，rejected，Promise.all 和Promise.race（知识记录）

1- Promise的三种状态：

1- Pending（等待，未完成，进行中）
2- Resolved（成功）
3- Rejected（失败）

2- Promise的三种状态关系变化只有两种：

1- Pending => Resolved（从 ‘等待’ 变成 ‘成功’ ）
2- Pending => Rejected（从 ‘等待’ 变成 ‘失败’ ）
3- 状态一旦改变，无法再次改变

3- Promise可以用来解决：

1- 解决多次并发请求：通过Promise.all来获取’所有并发请求都成功’ 后的数据集合
2- 解决回调地狱：通过.then，.catch，.all，.race解决异步请求success回调里继续执行函数或者异步请求造成的层层嵌套，造成的可读性差，难维护

4- Promise的resolved和rejected 以及 then和catch：先上代码

function demo(){return new Promise((resolve,reject)=>{$.ajax({url: "http://api.local.com/?type=list", method: "get",header: {'content-type': 'application/json'},success: res=>{// 此处执行resolve(res),才能通过.then来调用，并且.then里接收到的值就是这里传进去的resolve(res) },error: err=>{reject(err)}});});};// 执行，查看结果demo().then(data=>{console.log( data , "成功")}, err=>{console.log( err , "失败" )});// 第二种写法，通过catch来捕获reject错误失败状态demo().then(data=>{console.log( data , "成功")}).catch(err=>{console.log( err , "失败catch" )});

then返回一个新的Promise，里面接收两个参数，第一个参数（必选）为resolve成功回调，第二个参数（可选）为reject失败回调
catch是当promise抛出错误变时被调用，等同于then里的第二个err参数
success或者error的回调里调用 resolve(res) 或者reject(err) 方法，并传入返回参数。如果不执行对应函数，无法通过then来链式调用。执行但是不传入参数，then里则无法获取返回参数。可自行敲代码看下打印输出

5- Promise，解决回调地狱，多层嵌套：

// 分成三个方法，每个方法单独处理，只做自己的事情// 1- 询问帅不帅function handSome(){console.log('开始询问帅不帅')return new Promise((resolve,reject)=>{$.ajax({url: "http://api.local.com/?type=list", success: res=>{console.log('很帅');resolve(res);},error: err=>{console.log('不帅');reject(err)}});});};// 2- 根据handSome回答，自己照镜子确认function confirm(data){console.log('开始照镜子：', data)return new Promise( (resolve,reject)=>{$.ajax({url: "http://api.local.com/?type=list",success: res=>{console.log('照镜子后确认很帅')resolve(res)},error: err=>{console.log('照镜子后确认不帅')reject(err)}});});}; // 3- confirm确认后，心情变化function determine(data){console.log('心情开始变化：',data)return new Promise( (resolve,reject)=>{$.ajax({url: "http://api.local.com/?type=list", success: res=>{console.log('很开心')resolve(res)},error: err=>{console.log('不开心')reject(err)}});});};

先来第一种调用：只调用成功回调

handSome().then(confirm).then(determine)
// 开始询问帅不帅
// 很帅
// 开始照镜子： (2) [{…}, {…}]
// 照镜子后确认很帅
// 心情开始变化： (2) [{…}, {…}]
// 很开心
handSome().then(confirm).then()
// 开始询问帅不帅
// 很帅
// 开始照镜子： (2) [{…}, {…}]
// 照镜子后确认很帅

上面写法比较简洁，等同于下面写法

handSome().then(res=>{confirm(res)
}).then(res=>{determine(res);
});

来个带有报错的完整写法（假设所有接口都失败）

handSome().then(confirm, err=>{console.log("handSome说我不帅")
}).then( determine, err=>{console.log("照镜子后确实不帅")
}).then(res=>{},err=>{console.log("心情最后不开心")
});
// 开始询问帅不帅
// 不帅
// handSome说我不帅
// 心情开始变化： undefined
// 不开心
// 心情最后不开心

根据上面调用的结果可总结出：

如果promise执行成功，并且还有then() 调用，则执行then() 中的第一个res参数
如果promise执行失败，并且还有then() 调用，则执行then() 中的第二个err参数
有个特殊点，当err参数执行完毕后，后面还有then() 调用，则从then() 中的第一个参数开始，而不是继续第二个参数调用
直到找不到then() ，开始状态改变为resolve或者rejected。

6- Promise的all和race

Promise.all可以将多个Promise封装成一个Promise。
并且，只有都请求成功的时候，才会执行第一个参数，并且把多个请求结果封装成数组返回
有执行失败的，则返回最先被reject失败状态的值。
适合用在前端多个请求的情景

Promise.all([handSome(),confirm()]).then(res=>{console.log( "两个接口都确认了，我很帅" )console.log( '两个接口数据为：',res)
},err=>{console.log( "两个接口，有失败的" )console.log( "失败接口：",err)
});

都请求成功的打印输出

有请求失败的打印输出

Promise.race，哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

Promise.race([handSome(),confirm()]).then(res=>{console.log( '有先好的' )console.log( res )
})

打印结果

注：原先写confirm方法，是用在handSome回调之后，可以获取handSome返回的参数。在Promise.all和Promise.race中调用时，同步执行，所以confirm方法打印的data会undefined

如有错误，请大牛指出，及时修改

js之- 简解Promise的resolved，rejected，Promise.all 和Promise.race（知识记录）相关推荐

Promise详解-手写Promise,实现一款自己的简易Promise
Promise 是ES6异步编程的一种解决方案: 从语法上讲,promise是一个对象,从它可以获取异步操作的消息: 从本意上讲,它是承诺,承诺它过一段时间会给你一个结果. promise有三种状态: ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（三）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(三) 本篇目录: 六.完整构建整个[旋转的精灵女孩]实例 (1).新建.启动webGL工程空间 (2).构建项目的目录层次结构 (2. ...
ES6 Promise的resolved深入理解
Promise的概念在ES6标准推出来之前已经深入人心,很多框架和第三方库都有类似的实现.但在深入理解ES6的Promise对象的时候,受之前经验的影响,很多概念给人似是而非的感觉,其中有一个特别明显 ...
最新版freetextbox(版本3.1.6)在asp.net 2.0中使用简解
最新版freetextbox(版本3.1.6)在asp.net 2.0中使用简解 2008-10-14 12:21 简介:对于FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用,只 ...
最新版FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用简解(提供博客园本地下载)
来源:cleocn.com 最新版FreeTextBox(版本3.1.6)在ASP.Net 2.0中使用简解(提供博客园本地下载) 简介:对于FreeTextBox(版本3.1.6)在ASP.Net ...
爬虫5-BeautifulSoup模块简解2
1.BeautifulSoup简解2 from bs4 import BeautifulSoup import re file = open("./baidu.html",'rb' ...
github-markdown-css 使用简解，markdown文案格式优化（笔记）
github-markdown-css 使用简解,markdown文案格式优化 1.npm 安装 $ npm install github-markdown-css 2.使用导入github-mar ...
Cisco AP1240多SSID配置简解
Cisco AP1240多SSID配置简解 AP1#show run <?xml:namespace prefix = o ns = "urn:schemas-microsoft-co ...
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)(一) 本文目录: 一.[旋转的精灵女孩]案例运行效果二.Three.js简介三.Three.js代码正常运行显示条件 (1)不载入 ...

js之- 简解Promise的resolved，rejected，Promise.all 和Promise.race（知识记录）

js之- 简解Promise的resolved，rejected，Promise.all 和Promise.race（知识记录）相关推荐

最新文章

热门文章