第1章 准备
1.1 区别实例对象与函数对象
实例对象:new
函数产生的对象,称为实例对象,简称为对象
函数对象:将函数作为对象使用,简称函数对象
function Fn ( ) {
}
const fn = new Fn ( )
console. log ( Fn. prototype)
Fn. bind ( {
} )
$ ( '#test' )
$. get ( '/test' )
1.2 二种类型的回调函数
1.2.1 同步回调
理解:立即执行,完全执行完了才结束,不会放入会掉队列中
例子:数组遍历相关的回调函数 / Promise
的 excutor
函数
1.2.2 异步回调
理解:不会立即执行,会放入回调队列中将来执行
例子:定时器回调 / ajax
回调 / Promise
的成功|失败的回调
const arr = [ 1 , 3 , 5 ]
arr. forEach ( item => {
console. log ( item)
} )
console. log ( 'forEach()之后' )
setTimeout ( ( ) => {
console. log ( "timeout callback()" )
} , 0 )
console. log ( "setTimeout之后" )
1.3 JS 的 error 处理
目标:进一步理解JS中的错误(Error)和错误处理
mdn文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Error
错误的类型
错误处理
捕获错误: try .. catch
try {
let d
console. log ( d. xxx)
} catch ( err ) {
console. log ( err)
}
console. log ( "出错之后" )
抛出错误: throw error
function someThing ( ) {
if ( Date. now ( ) % 2 === 1 ) {
console. log ( "当前时间为奇数,可以执行任务" )
} else {
throw new Error ( "当前时间为偶数,无法执行任务" )
}
}
try {
someThing ( )
} catch ( error ) {
alert ( error. message)
}
错误对象
message
属性:错误相关信息
stack
属性:函数调用栈记录信息
第2章 promise 的理解和使用
2.1 Promise 是什么?
2.1.1 理解
抽象表达:
Promise
是异步编程的新的解决方案(旧的是谁?)
具体表达:
从语法上来说: Promise
是一个构造函数
从功能上来说: Promise
对象用来封装一个异步操作并可以获取其结果
2.1.2 promise 的状态改变
pending
变为 resolved
pending
变为 rejected
说明:只有这2种,切一个 promise
对象只能改变一次
无论是成功还是失败,都会有一个结果数据
成功的结果数据一般称为 value
,失败的结果数据一般称为 reason
2.1.3 promise 的基本流程
2.1.4 promise 的基本使用
const p = new Promise ( ( resolve, reject) => {
setTimeout ( ( ) => {
const time = Date. now ( )
if ( time % 2 === 0 ) {
resolve ( "成功的数据,time=" + time)
} else {
reject ( "失败的数据,time=" + time)
}
} )
} ) . then ( value => {
console. log ( "成功的回调 " , value)
} , reason => {
console. log ( "失败的回调 " , reason)
} )
2.2 为什么要用 Promise?
2.2.1 指定回调函数的方式更加灵活
旧的:必须在启动异步任务前指定(先指定回调函数,再启动异步任务)
promise
:启动异步任务 => 返回 promise
对象 => 给 promise
对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
2.2.2 支持链式调用,可以解决回调地狱问题
什么是回调地狱?
回调函数嵌套调用,外部回调函数异步执行的结果是其内部嵌套的回调函数执行的条件
doSomething ( function ( result) {
doSomethingElse ( result, function ( newResult) {
doThirdThing ( newResult, function ( finalResult) {
console. log ( 'Got the final result:' + finalResult)
} , failureCallback)
} , failureCallback)
} , failureCallback)
回调地狱的缺点?
解决方案
doSomething ( )
. then ( result => doSomethingElse ( result) )
. then ( newResult => doThirdThing ( newResult) )
. then ( finalResult => {
console. log ( 'Got the final result:' + finalResult)
} )
. catch ( failureCallback)
终极解决方案
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)
}
}
2.3 如何使用 Promise?
2.3.1 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
方法: p.catch(onRejected)
onRejected
函数:失败的回调函数 reason => {}
说明:then()
的语法糖,相当于 then(undefined, onRejected)
new Promise ( ( resolve, reject) => {
setTimeout ( ( ) => {
resolve ( "成功的数据" )
} , 1000 )
} ) . then (
value => {
console. log ( "onResolved()1" , value)
}
) . catch (
reason => {
console. log ( "onRejected()1" , reason)
}
)
Promise.resolve
方法:value => {}
value
: 成功的数据或promise
对象
说明:返回一个成功/失败的 promise
对象
Promise.reject
方法:reason => {}
reason
: 失败的原因
说明:返回一个失败的 promise
对象
const p1 = new Promise ( ( resolve, reject) => {
resolve ( 1 )
} )
const p2 = Promise. resolve ( 2 )
const p3 = Promise. reject ( 3 )
p1. then ( value => {
console. log ( value) } )
p2. then ( value => {
console. log ( value) } )
p3. then ( null , reason => {
console. log ( reason) } )
p3. catch ( reason => {
console. log ( reason) } )
Promise.all
方法:promises => {}
promises
:包含n个 promise
的数组
说明:返回一个新的 promise
,只有所有的 promise
都成功才成功,只要有一个失败了就直接失败
Promise.race
方法: promises => {}
promises
:包含n个 promise
的数组
说明:返回一个新的 promise
,第一个完成的 promise
的结果状态就是最终的结果状态
const p1 = new Promise ( ( resolve, reject) => {
resolve ( 1 )
} )
const p1_1 = 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. then ( null , reason => {
console. log ( reason) } )
p3. catch ( reason => {
console. log ( reason) } )
const pAll = Promise. all ( [ p1, p2, p3] )
pAll. then (
value => {
console. log ( "all onResolved()" , value) } ,
reason => {
console. log ( "all onRejected()" , reason) }
)
const pAll2 = Promise. all ( [ p1, p2] )
pAll2. 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 ( "all onResolved()" , value) } ,
reason => {
console. log ( "all onRejected()" , reason) }
)
const pRace1 = Promise. race ( [ p1_1, p2, p3] )
pRace1. then (
value => {
console. log ( "all onResolved()" , value) } ,
reason => {
console. log ( "all onRejected()" , reason) }
)
const pRace2 = Promise. race ( [ p3, p1, p2] )
pRace2. then (
value => {
console. log ( "all onResolved()" , value) } ,
reason => {
console. log ( "all onRejected()" , reason) }
)
2.3.2 promise的几个关键问题
如何改变 promise
状态?
resolve(value)
:如果当前是 pending
就会变成 resolved
rejected(reason)
:如果当前是 pending
就会变成 rejected
抛出异常:如果当前是 pending
就会变成 rejected
const p = new Promise ( ( resolve, reject) => {
throw new Error ( "出错了" )
} )
p. then (
value => {
console. log ( "value" , value)
} ,
reason => {
console. log ( "reason" , reason)
}
)
一个 promise
指定多个成功/失败回调函数,都会调用吗?
const p = new Promise ( ( resolve, reject) => {
throw new Error ( "出错了" )
} )
p. then (
value => {
console. log ( "value" , value)
} ,
reason => {
console. log ( "reason" , reason)
}
)
p. then (
value => {
console. log ( "value" , value)
} ,
reason => {
console. log ( "reason2" , reason)
}
)