Promise是一种异步编程的解决方案,比传统的解决方案多了回调函数和事件。
Promise有pending、resolved、rejected三个状态;一旦状态改变,外界不可再改变状态。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Promise</title>
</head>
<body></body>
<script>
// 8.Promise.prototype.all(),将多个Promise实例包装成一个新的Promise实例; const p = Promise.all([p1,p2,p3])
//下面代码中,prmises包含有6个Promise实例的数组,只有这6个实例的状态都变成fulfilled,或者其中一个状态为rejected,
//才会调用Promise.all方法后面的回调函数
const promises = [1, 2, 3, 4, 5, 6].map(function (id) {
return new Promise((resolve, reject) => {
// resolve(id)
if (id != 6) {
resolve()
} else {
reject(new Error("id 6..."))
}
})
})
Promise.all(promises)
.then((res1, res2) => {
console.log("####", res1, res2)
})
.catch((err) => {
console.log("@@@@", err)
})
// 7. Promise.prototype.finally(),不管Promise对象状态最后如何,都会执行。ES2018引入
// promise.then().catch().finally()
// 6. Promise.prototype.catch() == Promise.prototype.then(null,rejection) 或 Promise.prototype.then(undefined, rejection)
// reject()方法作用,等同于抛出异常
// const promise = new Promise((resolve, reject) => {
// // throw new Error("test")
// reject(new Error("test"))
// })
// promise.catch((err) => {
// console.log(err)
// })
// // 6.1. Promise状态已经转为resolved,再抛出错误是无效的---Promise状态一旦改变,就永久保持,无法改变
// const promise1 = new Promise((resolve, reject) => {
// resolve("ok")
// reject(new Error("test"))
// })
// promise1
// .then((val) => {
// console.log(val)
// })
// .catch((err) => {
// console.log(err)
// })
// // 6.2. Promise对象的错误具有“冒泡”性质,会一直向后传递,直至被捕获
// // 下面代码共有三个Promise,一个p1产生、一个p2产生、还有一个then(),他们抛出的异常都会被catch()捕获
// // 优先使用catch()方法,不要在then()方法里定义Reject状态的回调函数
// const p1 = new Promise((resolve, reject) => {
// setTimeout(() => {
// // reject(new Error("errorp1"))
// resolve()
// }, 2000)
// })
// const p2 = new Promise((resolve, reject) => {
// // reject(new Error("error1"))
// // console.log(aObj)
// resolve()
// })
// .then(() => {
// console.log(aObj)
// return p1
// })
// .catch((err) => console.log(err))
// // 6.3 Promise 会吃掉错误。Promise内部的错误不会影响到Promise外部的代码;
// // 下面代码中,someAsyncThing函数的Promise有一个错误,过两秒后还是会执行打印123
// const someAsyncThing = function () {
// return new Promise((resolve, reject) => {
// resolve(x + 2)
// })
// }
// someAsyncThing().then(function () {
// console.log("everything is great")
// })
// setTimeout(() => {
// console.log(123)
// }, 2000)
// // 6.4 Promise对象的catch()方法返回的还是一个Promise对象,因此后面还可以接着调then()
// // 下面代码执行,有报错会运行catch()的回调函数结束后会接着运行then()的回掉函数;若没有报错,则直接会跳过catch()方法
// const someAsyncThing = function () {
// return new Promise((resolve, reject) => {
// // resolve(x + 2)
// resolve()
// })
// }
// someAsyncThing()
// .catch((error) => {
// console.log("oh on", error)
// })
// .then(() => {
// console.log("carry on")
// })
// 5. Promise.prototype.then(),Promise实例具有then方法,即,then方法是定义在原型对象Promise.prototype上的
// 第一个参数是resolved状态的回调函数,第二个参数是rejected状态的回调函数
// then方法返回的是一个新的Promise实例(非原来的Promise实例),因此可以采用链式写法
// // 4. 调用resolve和reject不会终结Promise的参数的执行
// new Promise((resolve, reject) => {
// // 后面的语句还是会执行,并且会首先打印。因为立即resolved的Promise是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务
// resolve(1)
// // 使用return,后面的语句不会执行
// // return resolve(1)
// console.log(2)
// }).then((v) => console.log(v))
// // #3. resolve和reject可以返回参数
// // p1的状态在3秒后从pending变成rejected
// const p1 = new Promise((resolve, reject) => {
// console.log("p1")
// setTimeout(() => {
// reject(new Error("p1 fail..."))
// }, 3000)
// })
// // p2的状态在1秒后从pending变成resolved;从结果可以发现,要是p2返回了的是一个Promise,1秒后p2的状态还是pending,自己的状态无效了,由p1决定了p2的状态
// const p2 = new Promise((resolve, reject) => {
// console.log("p2")
// setTimeout(() => {
// // 返回非Promise
// // resolve("p2 success...")
// // 返回Promise
// resolve(p1)
// }, 1000)
// })
// p2.then((result) => console.log("result", result)).catch((eror) =>
// console.log("eror", eror)
// )
// setTimeout(() => {
// console.log("@@@@p1:", p1)
// }, 3000)
// setTimeout(() => {
// console.log("@@@@p2:", p2)
// }, 1000)
// // #2. Promise一旦新建后就会立即执行,无法取消--- 打印结果为:Promise Hi! resolved.
// let promise = new Promise((resolve, reject) => {
// // Promise新建后就会立即执行
// console.log("Promise")
// resolve()
// })
// promise.then(() => {
// console.log("resolved.")
// })
// console.log("Hi!")
// // #1. Promise使用
// function timeout(ms) {
// return new Promise((resolve, reject) => {
// setTimeout(resolve, ms, "done")
// })
// }
// timeout(100).then((value) => {
// console.log(value)
// })
// // setTimeout的第三个参数
// for (var i = 0; i < 6; i++) {
// setTimeout(() => {
// console.log(i)
// }, 1000)
// }
// for (var i = 0; i < 6; i++) {
// ;(function (j) {
// setTimeout(() => {
// console.log(j)
// }, 1000)
// })(i)
// }
// for (var i = 0; i < 6; i++) {
// setTimeout(
// (j) => {
// console.log(j)
// },
// 1000,
// i
// )
// }
// function show(x, y, z) {
// console.log(x, y, z)
// }
// setTimeout(show, 100, 1, 2, 3)
</script>
</html>
浙公网安备 33010602011771号