Promise的各种常用【使用】场景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>es6</div>
<script type="text/javascript">
// what是Promise:Promise是ES6中提供的一个异步编程的解决方案,Promise本身是一个构造函数 typeof Promise // function
// Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)
// 异步操作成功,Promise对象传回一个值,状态变为resolved
// 异步操作失败,Promise对象抛出一个错误,状态变为rejected
/*
一旦Promise状态改变,就不会再有变化,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled 或者 从pending变为rejected。
只要这两种情况发生,状态就不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。
如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的;
Promise优点:
在处理异步程序时,将异步操作队列化,按照期望的顺序执行,返回符合预期的结果,这样即使是多重异步操作,也可以方便的使用Promise进行链式调用
Promise缺点:
1、无法取消Promise,一旦新建它就会立即执行,无法中途取消。
2、如果不设置回调函数,Promise内部抛出的错误,不会反应到外部。
3、当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
*/
// 基本使用
const promise = new Promise(function(resolve, reject) {
console.log('Promise++++++++111111');
// 执行一个异步操作
setTimeout(() => {
console.log('Promise+setTimeout:最后输出')
}, 3000)
resolve('成功'); // 状态由等待变为成功,传的参数作为then函数中成功函数的实参
// reject('失败'); // 状态由等待变为失败,传的参数作为then函数中失败函数的实参
console.log('Promise++++++++222222');
})
// then中有2个参数,第一个参数是状态变为成功后应该执行的回调函数,第二个参数是状态变为失败后应该执行的回调函数。
promise.then(res => {
console.log('Promise++++++++444444');
console.log('结果1:' + res) // 结果1:成功(如果是reject('失败')则打印结果是:失败)
}, err => {
console.log('错误1:' + err)
}).then(res => {
console.log('结果2:' + res) // 结果2:undefined
}, err => {
console.log('错误2:' + err)
}).finally(() => {
console.log('结束') // finally方法,finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作
})
console.log('333333');
/*总结:上述依次打印
Promise++++++++111111
Promise++++++++222222
333333
Promise++++++++444444
结果1:成功
结果2:undefined
结束
Promise+setTimeout:最后输出
*/
/*==========================Promise.all()方法=================================*/
// 多个 Promise
const p1 = new Promise((resolve, reject) => {
setTimeout(function() {
console.log('p1')
resolve('p1')
}, 3000)
})
const p2 = new Promise((resolve, reject) => {
setTimeout(function() {
console.log('p2')
resolve('p2')
}, 5000)
})
// 多个异步操作
Promise.all([p1, p2]).then((res) => {
console.log('成功:' + res) // 成功:p1,p2
})
/*==========================Promise.race()方法=================================*/
// race的用法, 语法和all()一样,但是返回值有所不同,race根据传入的多个Promise实例,只要有一个实例resolve或者reject,就只返回该结果,其他实例不再执行,
// 也就是说多个异步程序,只返回响应最快的那个异步程序,不论成功或者失败,就把最快响应的返回值返回,后面的异步程序不再执行
const p4 = new Promise((resolve, reject) => {
setTimeout(function() {
console.log('p4')
resolve('p4')
}, 9000)
})
const p5 = new Promise((resolve, reject) => {
setTimeout(function() {
console.log('p5')
reject('p5')
}, 6000)
})
Promise.race([p4, p5]).then().catch(res => {
console.log('失败:' + res) // p5 失败:p5 p4
})
/*==========================Promise.resolve()方法=================================*/
// Promise的resolve方法,用于将非Promise类型的对象,转为Promise对象,这样就可以调用Promise原型对象上的方法了
// 没有参数,如果没有参数,这直接返回一个resolved状态的Promise对象
const p7 = Promise.resolve()
// 相当于
const p8 = new Promise(resolve => {
resolve(undefined)
})
p7.then(res => {
console.log('p7-resolve()没有参数时候等价与:' + res) // 输出 undefined
})
// 参数是一个不具有then方法的对象,或者是一个基数数据类型的值,则Promise.resolve方法返回一个新的 Promise 对象,状态为resolved,值为指定值
const p9 = Promise.resolve('123')
p9.then(res => {
console.log('p9-resolve()有参数时候等价与:' + res) // 输出 '123'
})
// 参数是一个具有then方法的对象,Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行thenable对象的then方法
const obj = {
then: function(resolve, reject) {
resolve(100)
}
}
const p10 = Promise.resolve(obj)
p10.then(res => {
console.log(res) // 100
})
// 特别的:参数是一个Promise对象,那么将原封不动的返回这个Promise对象
// reject与resolve方法基本类似,但是要注意一种情况,就是当参数是一个thenable对象时
const thenable = {
then(resolve, reject) {
reject('出错了');
}
};
Promise.reject(thenable)
.catch(e => {
console.log(e === thenable) // true
})
</script>
</body>
</html>