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>