之前学习完ajax后，对异步请求的理解还是比较浅，在学习promise之后，对异步调用的理解也变得深刻了许多
Promise其实使异步编程的一种解决方案，当我们发送多个ajax请求的时候，这些请求后返回数据的时间和它们的发送时的顺序不一样(请求时间不同)，而通过promise可以解决这个问题。
区别实例对象与函数对象
函数对象: 将函数作为对象使用时, 简称为函数对象
实例对象: new 函数产生的对象，简称为对象
回调函数的分类
同步回调: 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise的
excutor函数// 1. 同步回调函数 const arr = [1, 3, 5] arr.forEach(item => { console.log(item); }) console.log('forEach()之后'); 复制代码异步回调: 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 /
ajax回调/ Promise的成功|失败的回调// 2. 异步回调函数 setTimeout(() => { console.log('timerout'); // 异步回掉函数会放到队列中进行 }, 0) console.log('setTimeout()之前'); 复制代码错误的类型
Error: 所有错误的父类型ReferenceError: 引用的变量不存在TypeError: 数据类型不正确的错误RangeError: 数据值不在其所允许的范围内SyntaxError: 语法错误// 常见的内置错误 // 1) ReferenceError: 引用的变量不存在 console.log(a); console.log('-------'); // 没有捕获error，下面的代码不会执行 复制代码错误处理 捕获错误:
try ... catch// 捕获错误 try { let b; console.log(b.xxx); } catch (error) { console.log(error.message); console.log(error.stack); } 复制代码抛出错误:
throw error// 抛出错误 function sth() { if (Date.now() % 2 === 1) { console.log('当前任务为奇数，可以执行'); } else { // 如果异常，由调用者处理 throw new Error('当前事件为偶数，无法执行'); } } // 捕获处理异常 try { sth(); } catch (error) { console.log(error.message); } 复制代码错误对象
message属性: 错误相关信息stack属性: 函数调用栈记录信息
// 常见的内置错误 // 1) ReferenceError: 引用的变量不存在 console.log(a); console.log('-------'); // 没有捕获error，下面的代码不会执行 复制代码1.1 Promise基本使用
a. 抽象表达
Promise是JS中进行异步编程的新解决方案(旧的是纯回调)
b. 具体表达
语法上：Promise是一个构造函数
功能上：promise对象用来封装一个异步操作并可以获取其结果
// 1. 创建一个新的promise对象 const p = new Promise((resolve, reject) => {// 执行器函数 同步回调 console.log('执行 excutor') // 2. 执行异步操作任务 setTimeout(() => { const time = Date.now() // 如果当前时间是偶数就代表成功, 否则代表失败 // 3.1. 如果成功了, 调用resolve(value) if (time % 2 == 0) { resolve('成功的数据, time=' + time) } else { // 3.2. 如果失败了, 调用reject(reason) reject('失败的数据, time=' + time) } }, 1000); }) console.log('new Promise()之后') // setTimeout(() => { p.then( value => { // 接收得到成功的value数据 onResolved console.log('成功的回调', value) }, reason => {// 接收得到失败的reason数据 onRejected console.log('失败的回调', reason) } ) // }, 2000); 复制代码指定回调函数的方式更加灵活: 旧的: 必须在启动异步任务前指定 promise: 启动异步任务 => 返回
promise对象 => 给promise对象绑定回调函数(甚至可以在异步任务结束后指定)支持链式调用, 可以解决回调地狱问题 什么是回调地狱? 回调函数嵌套调用, 外部回调函数异步执行的结果是嵌套的回调函数执行的条件 回调地狱的缺点? 不便于阅读 / 不便于异常处理 解决方案? promise链式调用 终极解决方案?
async/await
/* 回调地狱 */ doSomething(function(result) { doSomethingElse(result, function(newResult) { doThirdThing(newResult, function(finalResult) { console.log('Got the final result: ' + finalResult) }, failureCallback) }, failureCallback) }, failureCallback) /* 使用promise的链式调用解决回调地狱 */ doSomething() .then(function (result) { return doSomethingElse(result) }) .then(function (newResult) { return doThirdThing(newResult) }) .then(function (finalResult) { console.log('Got the final result: ' + finalResult) }) .catch(failureCallback) // 任何一个发生异常都传入这里 /* async/await: 回调地狱的终极解决方案 */ async function request() { try { const result = await doSomething() const newResult = await doSomethingElse(result) const finalResult = await doThirdThing(newResult) console.log('Got the final result: ' + finalResult) } catch (error) { failureCallback(error) } } 复制代码1.2 Promise的状态改变
pending变为resolved
pending变为rejected
说明：只有这两种，且promise对象只能改变一次
无论成功还是失败，都会有一个结果数据
成功的结果数据一般称为value，失败的结果数据一般称为reason
1.3 Promise的基本流程
2.1 Promise的API
Promise构造函数: Promise (
excutor) {}excutor函数: 同步执行 (resolve, reject) => {} resolve函数: 内部定义成功时我们调用的函数 value => {} reject函数: 内部定义失败时我们调用的函数 reason => {} 说明:excutor会在Promise内部立即同步回调,异步操作在执行器中执行Promise.prototype.then方法: (onResolved, onRejected) => {}onResolved函数: 成功的回调函数 (value) => {}onRejected函数: 失败的回调函数 (reason) => {} 说明: 指定用于得到成功value的成功回调和用于得到失败reason的失败回调 返回一个新的promise对象Promise.prototype.catch方法: (onRejected) => {}onRejected函数: 失败的回调函数 (reason) => {} 说明: then()的语法糖, 相当于: then(undefined,onRejected)Promise.resolve方法: (value) => {} value: 成功的数据或promise对象 说明: 返回一个成功/失败的promise对象Promise.reject方法: (reason) => {} reason: 失败的原因 说明: 返回一个失败的promise对象Promise.all方法: (promises) => {} promises: 包含n个promise的数组 说明: 返回一个新的promise, 只有所有的promise都成功才成功, 只要有一个失败了就直接失败Promise.race方法: (promises) => {} promises: 包含n个promise的数组 说明: 返回一个新的promise, 第一个完成的promise的结果状态就是最终的结果状态
new Promise((resolve, reject) => { setTimeout(() => { // resolve('成功的数据') reject('失败的数据') }, 1000)}).then( value => { console.log('onResolved()1', value) }).catch( reason => { console.log('onRejected()1', reason) })// 产生一个成功值为1的promise对象const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve(1) }, 100);})const p2 = Promise.resolve(2)const p3 = Promise.reject(3)// p1.then(value => { console.log(value) })// p2.then(value => { console.log(value) })// p3.catch(reason => { console.log(reason) })// const pAll = Promise.all([p1, p2, p3])const pAll = Promise.all([p1, p2])pAll.then( values => { console.log('all onResolved()', values) }, reason => { console.log('all onRejected()', reason) })const pRace = Promise.race([p1, p2, p3])pRace.then( value => { console.log('race onResolved()', value) }, reason => { console.log('race onRejected()', reason) }) 复制代码2.2 Promise的一些 问题
1. 如何改变promise的状态?
(1)resolve(value): 如果当前是pending就会变为resolved (2)reject(reason): 如果当前是pending就会变为rejected (3)抛出异常: 如果当前是pending就会变为rejected
let p = new Promise((resolve, reject) => { //resolve('Promise状态会被标记为resolved') // reject('Promise状态会被标记为rejected') throw new Error('Promise状态会被标记为rejected')}); 复制代码2.一个promise指定多个成功/失败回调函数, 都会调用吗?
当promise改变为对应状态时都会调用
let p = new Promise((resolve, reject) => { throw 3;});// 两个then都会进行p.then( value => { console.log('value1', value) }, reason => { console.log('reason1', reason) // reason1 3 })p.then( value => { console.log('value2', value) }, reason => { console.log('reason2', reason) // reason2 3 }) 复制代码3. 改变promise状态和指定回调函数谁先谁后?
(1)都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调
(2)如何先改状态再指定回调?
①在执行器中直接调用resolve()/reject()
②延迟更长时间才调用then()
(3)什么时候才能得到数据?
①如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据
②如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据
// 常规: 先指定回调函数, 后改变的状态new Promise((resolve, reject) => { setTimeout(() => { resolve(1) // 后改变的状态(同时指定数据), 异步执行回调函数 }, 1000);}).then(// 先指定回调函数, 保存当前指定的回调函数 value => { }, reason => { console.log('reason', reason) })// 如何先改状态, 后指定回调函数// 第一种new Promise((resolve, reject) => { resolve(1) // 先改变的状态(同时指定数据) 同步执行}).then(// 后指定回调函数, 异步执行回调函数 // .then是同步执行的，同步指定回调函数。 // 回调函数才是异步执行的 value => { console.log('value2', value) }, reason => { console.log('reason2', reason) })console.log('-------')// 第二种const p = new Promise((resolve, reject) => { setTimeout(() => { resolve(1) // 后改变的状态(同时指定数据), 异步执行回调函数 }, 1000);})setTimeout(() => { p.then( value => { console.log('value3', value) }, reason => { console.log('reason3', reason) } )}, 1100); 复制代码4. 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( value => { console.log('onResolved1()', value) // return 2 // 这个就是下面成功的返回值，如果没有写就是undefined // return Promise.resolve(3) // return Promise.reject(4) throw 5 }, reason => { console.log('onRejected1()', reason) // 1 // return 2 // return Promise.resolve(3) // return Promise.reject(4) throw 5 }).then( value => { console.log('onResolved2()', value) // 5 }, reason => { console.log('onRejected2()', reason) }) 复制代码5. promise如何串连多个操作任务?
(1) promise的then()返回一个新的promise, 可以开成then()的链式调用
(2) 通过then的链式调用串连多个同步/异步任务
new Promise((resolve, reject) => { setTimeout(() => { console.log("执行任务1(异步)") resolve(1) }, 1000);}).then( value => { console.log('任务1的结果: ', value) console.log('执行任务2(同步)') return 2 }).then( value => { console.log('任务2的结果:', value) return new Promise((resolve, reject) => { // 启动任务3(异步) setTimeout(() => { console.log('执行任务3(异步))') resolve(3) }, 1000); }) }).then( value => { console.log('任务3的结果: ', value) })// 执行结果： 复制代码6. promise异常传透?
(1)当使用promise的then链式调用时, 可以在最后指定失败的回调,
(2)前面任操作出了异常, 都会传到最后失败的回调中处理
7.中断promise链?
(1)当使用promise的then链式调用时, 在中间中断, 不再调用后面的回调函数
(2)办法: 在回调函数中返回一个pending状态的promise对象
new Promise((resolve, reject) => { // resolve(1) reject(1)}).then( value => { console.log('onResolved1()', value) return 2 }, // reason => {throw reason} <-没写相当于写了这个).then( value => { console.log('onResolved2()', value) return 3 }, reason => { throw reason }).then( value => { console.log('onResolved3()', value) }, reason => Promise.reject(reason)).catch(reason => { console.log('onReejected1()', reason) // throw reason // return Promise.reject(reason) /* 补充：箭头函数紧跟大括号(相当于跟了一个函数) 没有后面的语句就相当于return的东西 */ return new Promise(() => { }) // 返回一个pending的promise 中断promise链}).then( value => { console.log('onResolved3()', value) }, reason => { console.log('onReejected2()', reason) }) 复制代码3. 宏队列和微队列
宏队列: 用来保存待执行的宏任务(回调), 比如: 定时器回调/DOM事件回调
ajax回调微队列: 用来保存待执行的微任务(回调), 比如: promise的回调
MutationObserver的回调JS执行时会区别这2个队列JS引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行
setTimeout(() => { // 会立即放入宏队列 console.log('setTimeout1') Promise.resolve(3).then(value => { console.log('onResolved3', value) })}, 0)setTimeout(() => { console.log('setTimeout2')}, 0)Promise.resolve(1).then( value => { // 会立即放入微队列 console.log('onResolved1', value) })Promise.resolve(2).then(value => { console.log('onResolved2', value)})//浏览器执行结果 /* onResolved1 1 onResolved2 2 setTimeout1 onResolved3 3 setTimeout2 */ 复制代码对于宏队列与微队列在以后的应用中或许能够有更深的理解，学习promise的过程中被promise的强大功能震惊到了，axios也是用promise封装成的一个库。为我们发送异步请求提供了许多方便~