<!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>Document</title> </head> <body> <div id="promiseClick">开始异步请求</div> </body> <script> //1、 错误类型 // Error ： 所有的错误的父类型 // ReferenceError：引用类型不正确的错误 // TypeError：数据类型不正确的错误 // RangeError：数据值不在其所允许的范围内 // SyntaxError：语法错误 //2、 错误处理 // 捕获错误：try ... catch // 抛出错误 throw error // 捕获异常 错误处理 // var num = 5 // function fn() { // if (2 > num) { // console.log(‘可以执行任务‘); // } else { // throw new Error(‘报错了信息‘) // } // } // try { // 抛出报错信息 // fn() // } catch (error) { // console.log(error); // } //3、 错误对象 // message属性：错误信息相关 // stack 报错有信息和类型组合 // stack属性：函数调用栈记录信息 就是栈内存溢出报错，自己调用自己 // SyntaxError 捕获 语法错误了 var a = """ Uncaught SyntaxError: Invalid or unexpected token // 4、promise 的状态改变 // pending变成 resolved // pending 变成 rejected // resolve的作用是将promise从进行中的状态转化为已成功的状态 // reject 的作用是将promise从进行中的状态转化为以失败的状态 // promise 本质上是一个构造函数 它有三个状态 分别是 进行中（pending） 已成功（fullfilled） 已失败（rejected） // 说明：只有两种，且一个promise 对象只能改变一次 // 无论变成功还是失败，都只有一个结果 成功的结果一般称为 value 失败的结果成为 reason // 5、 async 函数是一种异步编程的解决方案 它是由promise封装来的 // async 函数的返回值是一个promise // await 能够获取promise执行的结果 await必须和async一起使用才行 // 我们通常涉及的异步操作有 setInterval setTimeout ajax请求 各种事件等等 // promise 是es6提出的一种异步编程的解决方案 // promise可以从进行中的状态转化为已成功的状态 也可以从进行中的状态 转化为以失败的状态 // promise 不管是成功还是失败 都已经运行结束了 所以 promise不能从已成功的状态转为以失败的状态 // 也不能从已失败的状态转化为已成功的状态 // promise构造函数接受一个函数作为参数 该函数内部接受两个参数 分别是resolve reject // 6 、promise 的使用 // const p = new Promise((resolve, reject) => { // // new Promise 传入一个回调函数 固定的参数名字 有 resolve reject // console.log(1); // 同步的代码先执行 // setTimeout(() => { // console.log(3); // 异步的后执行 // if (5 > 2) { // resolve(‘成功的回调‘) // } else { // reject(‘失败的回调‘) // } // }, 1000); // }) // console.log(2);// 同步的代码先执行 // p.then( // value => { // console.log(value);// 这里的value上面成功的数据 是 resolve // }, // reason => { // console.log(reason);// 这里的reason上面成功的数据 是 reject // } // ) // 7、为什么要Promise // 1、指定回调函数的方式更加灵活 // 旧的：必须在启动异步任务之前指令 // Promise ： 启动异步任务 => 返回promise对象=> 给promise 对象绑定回调函数（甚至可以在异步任务结束后指定） // 2、支持链式调用，可以解决回调地狱 的问题 // 什么是回调地狱 ？ 回调函数层层嵌套调用，外部回调函数异步执行的结果，是嵌套的回调函数执行的条件 // 回调地狱的缺点？不便于阅读 / 不便于异常处理 // 解决方案？promise 链式调用 最好的 async / await // 8、Promise 语法api // const p = new Promise((resolve, reject) => { // setTimeout(() => { // // 这里只能有一个状态哦 // resolve(‘成功‘) // reject(‘失败‘) // }, 0); // }) // p.then( // value => { // console.log(value);// 这里的value上面成功的数据 是 resolve // }, // reason => { // console.log(reason);// 这里的reason上面成功的数据 是 reject // } // ) // const p = new Promise((resolve, reject) => { // resolve(‘成功‘) // }) 这种可以简写为下面那种 // p.then( // value => { // console.log(value);// 这里的value上面成功的数据 是 resolve // }, // reason => { // console.log(reason);// 这里的reason上面成功的数据 是 reject // } // ) 这种可以简写为下面那种 // const p = Promise.resolve(‘成功11‘) //简写的形式 语法糖 // const p1 = Promise.resolve(‘成功了22‘) // const p2 = Promise.reject(‘失败了333‘) // p.then((resolve) => { console.log(resolve) }) // p1.then((resolve) => { console.log(resolve) }) // p2.catch((reject) => { console.log(reject) }) // Promise.all 可以把多个回调的结果给组合在一起 // const pAll = Promise.all([p, p1, p2]) // pAll.then( // value => { // console.log(‘on Resolve‘,value); // }, // reason => { // console.log(‘on Reject‘,reason); // } // ) // Promise.race 谁先反回就是谁 第一个结果就是最终的的结果 // const pAll = Promise.race([p2, p, p1,]) // // 这里如果吧p2放到第一个执行就是失败放最后一个就是成功 // pAll.then( // value => { // console.log(‘on Resolve‘, value); // }, // reason => { // console.log(‘on Reject‘ + reason); // } // ) // 9、promise关键点 // -------------- // const p = new Promise((resolve, reject) => { // throw new Error(‘有错误信息，请处理‘) // //1、如何改变promise状态？ resolve、 reject 、或者 抛出错误信息或异常 Promise 变成reject状态 // }) // p.then( // value => { // }, // reason => { // console.log(‘1---‘ + reason);// 是 错误信息 // } // ) // p.then( // value => { // }, // reason => { // console.log(‘2---‘ + reason);// 是 错误信息 // } // ) //2、 一个promise 指定多个回调函数回调用吗？ 当promise 当promise 发生改变时对应的状态都会改变 全部打印 // 1、改变promise状态和执行回调谁先谁后的问题？下面代码。 // 什么时候得到数据 // 如果先指定的回调，那当状态放生改变，回调函数就会调用，得到数据 // 若果先改变的状态，那当指定回调函数就会调用 // new Promise((resolve, reject) => { // setTimeout(() => { // reject(1)//2、后改变状态(同时指定数据)，异步执行回调函数 // }, 1000); // }).then(//1、先指定回调函数 保存当前指定的回掉函数 // value => { // }, // reason => { // console.log(‘失败‘ + reason);// 是 错误信息 // } // ) // new Promise((resolve, reject) => { // reject(1)//1、先改变状态(同时指定数据)，异步执行回调函数 // }).then(//2、后指定回调函数 异步执行回调函数 // value => { // }, // reason => { // console.log(‘失败‘ + reason);// 是 错误信息 // } // ) // 2、同步和异步代码 // new Promise((resolve, reject) => { // reject(1) // }).then( // .then 无论成功或失败都是异步的 // 同步的先执行，异步的后执行 // value => { // }, // reason => { // console.log(‘失败‘ + reason); // } // ) // console.log(2); // console.log(2)先执行。 console.log(‘失败‘ + reason)在输出就是异步的。 // 3、promise.then()返回的新promise的结果状态由什么决定？ // 1、简单表达：由then()指定的回调函数执行的结果决定 // 2详细表达： // 如果抛出异常，新的promise 变成rejected reason为抛出的异常 // 如果返回的是非promise的任意值，新promise变成resolved ，value 为返回的值 // 如果返回的是另一个新promise，此promise的结果就会成为新的promise的结果 // new Promise((resolve, reject) => { // resolve(1) // // reject(1) // }).then( // then 是由promise 的结果来决定 // value => { // console.log(value); //如果这里如果没有抛出异常那么就是相当于return 的一个undefined // // return 2 若果这里return了一个2 那么下面.then里的 value的就是2 不是undefined // // return Promise.resolve(2) // 下面.then里的 value就是2 // // return Promise.reject(2) // 下面就执行失败的的回调 .then里的 reason // 2 // // throw ‘抛出异常‘ //这里抛出异常 // }, // reason => { // console.log(‘失败‘ + reason); // } // ).then(// 由上面执行的函数来决定 // value => { // console.log(value); // undefined // }, // reason => { // console.log(‘失败---‘ + reason); // } // ) // 4、promise 如何串联多个异步操作任务 promise的then返回新promise，可以开启链式调用 // 可以通过then链式调用串联多个同步任务和异步任务 // new Promise(resolve => { // setTimeout(() => { // resolve(1) // }, 1000); // }).then(value => { // console.log(value); // return 2 // }).then(value => { // console.log(value); // return new Promise(resolve => { // setTimeout(() => { // resolve(3) // }, 1000); // }) // }).then(value => { // console.log(value); // }) // 5、promise异常传透 / 穿透？ // 当时用promise的then调用时，可以在最后指定失败的回调 // 当前面任何操作出了异常都会传到最后失败的回调处理 new Promise(resolve => { resolve(1) }).then(value => { console.log(value); return 2 // reason => { throw reason } }).then(value => { console.log(value); return 3 // reason => { throw reason } }).then(value => { console.log(value); // reason => { throw reason } // 7、 return new Promise(()=>{}) // 这了没结果下面也没结果 pending 中断promise 链 }).catch((reason) => { // 传透错误是一层一层传的 promise怎么会失败 1、抛出异常 2、reject console.log(reason); }) // boos面试题 // const first = () => (new Promise((resolve, reject) => { // console.log(3); // let p = new Promise((resolve, reject) => { // console.log(7); // setTimeout(() => { // console.log(5); // resolve(6); // }, 0) // resolve(1); // }); // resolve(2); // p.then((arg) => { // console.log(arg); // }); // })); // first().then((arg) => { // console.log(arg); // }); // console.log(4); // 3 7 4 1 2 5 // //例子2 // const promise = new Promise((resolve, reject) => { // console.log(1) // resolve() // console.log(2) // }) // promise.then(() => { // console.log(3) // }) // console.log(4) </script> </html>
原文：https://www.cnblogs.com/szh6/p/15350173.html