一、Promise()的基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 1. 使用setTimeout // setTimeout(()=>{ // console.log("Hello word"); // },1000) // 2. promise的使用 // promise的参数-> 函数(resolve，reject) // resolve，reject本身他们就是函数 // new Promise((resolve,reject) =>{ // setTimeout(()=>{ // console.log("Hello word"); // },1000) // }) // 3. 异步操作的时候使用promise对这个异步操作进行封装 // new -> 构造函数(1.保存一些状态信息 2. 执行传入的函数 ) // 在执行传入的回调函数时，会传入两个函数，resolve，reject 他们本身又是函数 new Promise((resolve,reject)=>{ setTimeout(()=>{ // 成功的时候调用resolve // resolve('Hello Word') // 失败的时候调用reject reject('error message') // 失败的时候调用reject },1000) }).then((data) =>{ console.log(data); console.log(data); console.log(data); console.log(data); }).catch((err)=>{ console.log(err); console.log(err); console.log(err); console.log(err); }) </script> </body> </html>
二、Promise((resolve,reject)=>{reject()}).then(success=>{},err=>{})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> new Promise((resolve, reject)=>{ setTimeout(()=>{ reject('error'); // resolve("Hello"); },1000) }).then( data =>{console.log(data);} , err =>{console.log(err); alert(err, 'reject') }) //只写一个then(success=>{},err=>{}) </script> </body> </html>
三、Promise()链式操作和简写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 需求 // 网络请求: aaa -> 自己处理(10行) // 处理： aaa111 -> 自己处理(10行) // 处理： aaa111222 -> 自己处理 // new Promise((resolve,reject) => { // setTimeout(()=>{ // resolve('aaa') // },1000) // }).then(res => { // // 1. 自己处理10行代码 // console.log(res,"第一层的10行处理代码"); // // // 2. 对结果进行第二次处理 // return new Promise((resolve)=>{ // resolve(res + '111') // }) // }).then(res =>{ // console.log(res,'第二层的10行处理代码'); // // return new Promise(resolve => { // resolve(res + '222') // }) // }).then(res=>{ // console.log(res,'第三层的10行处理代码'); // }) //没有异步的时候可以简写 // 简写（省略new Promise()完整过程，直接return Promise.resolve(res + '111')） // new Promise((resolve,reject) => { // setTimeout(()=>{ // resolve('aaa') // },1000) // }).then(res => { // // 1. 自己处理10行代码 // console.log(res,"第一层的10行处理代码"); // // // 2. 对结果进行第二次处理 // return Promise.resolve(res + '111') // // }).then(res =>{ // console.log(res,'第二层的10行处理代码'); // // return Promise.resolve(res + '222') // }).then(res=>{ // console.log(res,'第三层的10行处理代码'); // }) // 极简写（再省略Promise，直接return res + '111'） // new Promise((resolve,reject) => { // setTimeout(()=>{ // resolve('aaa') // },1000) // }).then(res => { // // 1. 自己处理10行代码 // console.log(res,"第一层的10行处理代码"); // // // 2. 对结果进行第二次处理 // return res + '111' // // }).then(res =>{ // console.log(res,'第二层的10行处理代码'); // // return res + '222' // }).then(res=>{ // console.log(res,'第三层的10行处理代码'); // }) // 加异常简写 new Promise((resolve,reject) => { setTimeout(()=>{ resolve('aaa') },1000) }).then(res => { // 1. 自己处理10行代码 console.log(res,"第一层的10行处理代码"); // 2. 异常处理写法 // return Promise.reject('error message') throw "error msg" }).then(res =>{ console.log(res,'第二层的10行处理代码'); return Promise.resolve(res + '222') }).then(res=>{ // 不会处理这条，被异常跳过了 console.log(res,'第三层的10行处理代码'); }).catch(err=>{ console.log(err); }) </script> </body> </html>
四、Promise.all()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //两个异步都完成的时候调.then() // .then(results=>{ // console.log(results); results是一个数组， // console.log(results[0]); 第一个Promise的结果 // console.log(results[1]); 第二个Promise的结果 // }) Promise.all([ // all里面传入的是一个可迭代对象 new Promise ((resolve, reject) =>{ setTimeout(() =>{ resolve("result1") console.log("2秒") },2000) }), new Promise((resolve, reject) => { setTimeout(()=>{ resolve('result2') console.log("1秒") },1000) }) ]).then(results=>{ console.log(results); console.log(results[0]); console.log(results[1]); }) </script> </body> </html>