[ ES6 ] 进阶篇(一) —— Promise

45次阅读

共计 2047 个字符,预计需要花费 6 分钟才能阅读完成。

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。
什么是 Promise
从使用上来说是一种语法糖,会了以后写东西简单一些 Promise 翻译过来就是 承诺 诺言 约定 答应 的意思 那么我是不是可以理解为它答应我会去做某件事,或者约好了会做某事 注:示例代码部分使用 jquery 示例
特点
对象的状态不受外界影响
promise 有三个状态:待定(pending),履行(fulfilled),拒绝(rejected)。只有返回的结果可以影响状态,其他任何操作不会影响到这个状态。
// 待定:初始状态,既未履行也未拒绝。
// 履行:意味着操作成功完成。
// 拒绝:意味着操作失败。
就像约会,说好了要约会,遵守了约定,有其他原因拒绝了约定。只有约会这件事中的彼此才能决定是遵守还是拒绝,其他人是决定不了的。
状态只会改变一次
Promise 对象的状态改变,只有两种可能:成功 (fulfilled) 和失败(rejected); 只要改变了就会一直是这个结果。
还是约会,到了约会的时间之后结果就是肯定的了。别人第二天问起昨天约会去了吗?也只会回答去了;或者没去。是不可能说第一次回答去了,第二次回答没去,第三次回答去了又没去。

新建 promise 就会立即执行,无法中途取消。
如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部
当处于 pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。

参数
Promise 有两个参数名需要传递 resolve 和 reject ; 分别用来返回成功和失败,他们是两个函数,只需要最后调用一下就行,不用自己去做操作
const promise = new Promise((resolve, reject) => {// 约会定在下午 2 点
// 为约会做准备

if (/* 到时间了 */){
resolve(value);// 都来了 遵守了约定
} else {
reject(error);// 有事来不了了 拒绝了约定
}
});
方法
Promise 原型方法
// 原型方法使用方法
Promise.prototype.then();
// 实际用的时候直接在 Promise 对象后使用方法的即可
let p = new Promise();
P.then();
then() // 之后
它的参数是回调函数,可以有两个 第一个必填,表示成功了会执行的操作;第二个可以不填,表示失败了会执行的操作(推荐至少有一个接收错误的方法被调用)
const promise = new Promise((resolve, reject) => {// 约会定在下午 2 点;新建 Promise 对象
// 为约会做准备;请求数据

if (/* 到时间了 */){
resolve(value);// 都来了 遵守了约定;返回成功后的值
} else {
reject(error);// 有事来不了了 拒绝了约定;返回失败的原因
}
});
promise.then(value => {
// 遵守了约定,两个人可以一起做点什么;数据操作
}, error => {
// 拒绝了约定,自己一个人做点什么;显示错误信息或者重试
});
catch() // 捕获
它的参数是一个回调函数,表示失败了会执行的操作(推荐使用 catch() 接收错误)
promise.catch(error => {
// 显示错误信息或者重试
});
finally() // 最后
它的参数是一个回调函数,表示不管是履行了约定还是拒绝了约定 最后都会执行的操作
promise.finally(() => {
// 执行完 Promise 后执行的操作
});
Promise 对象方法
// 直接使用 Promise 关键字就可以调用方法
Promise.all();
all()
参数是 Promise 对象数组或者数组元素返回的都是 Promise 对象 当所有的 Promise 对象全都返回成功时,才会将所有成功的返回值传递给 then() 有一个返回失败就会直接结束当前 Promise , 并将第一个失败的返回值传递给 cath()
假如说有一系列数据要获取这时就可以用 Promise.all()
// 获取 直接用 $.ajax() 是因为 $.ajax() 实际上返回的是 Promise 对象
Promise.all([
$.ajax({url:’api/userInfo’}),
$.ajax({url:’api/banner’}),
$.ajax({url:’api/imagesUrl’})
]).then(arr=>{// 全部成功才会调用
let [userInfo1,userInfo2,userInfo3] = arr;
console.log(userInfo1,userInfo2,userInfo3);
}).catch(err=>{// 有一个失败就终止并调用
console.log(err);
});
reace()
参数是 Promise 对象数组或者数组元素返回的都是 Promise 对象 只要有一个返回了状态不论是成功或失败都会将值传递给 then()
这篇文章主要是自己用来快速查阅 Promise 相关语法的,对于看文档困难的不推荐看

正文完
 0