promise是可以说是面试必考点,而且也是我们日常工作开发中的重要的知识点
对于promise的讲解,将会分成3部分来完成,其中包括基础篇,自定义promise、以及promise的经常考点
一 、了解知识点
1.1区分实例对象和函数对象
- 实例对象:new 函数产生的对象 称为实例对象,简称对象
- 函数对象:将函数作为对象使用时,简称为函数对
function Fn(){
//Fn函数
}
const fn = new Fn(){
//Fn是构造函数,fn是实例化对象(简称对象)
}
console.log(Fn.prototype) //Fn是函数对象
Fn.call() //Fn是函数对象
$('#test) //jQuery函数
$.get('/test') //jQuery函数对象
1.2 两种类型的回调函数
- 同步回调:立即执行,完全执行了才结束,不会放入到回调队列中 例如:数组遍历相关的回调函数/promise的excutor函数
- 异步回调:不会立即执行,会放入回调队列中将来执行 例如:定时器/ajax回调 /promise的成功/失败回调
// 1 同步回调函数
const arr = [1,2,3]
arr.forEach(item=>{ //遍历回调,同步回调函数,不会放入队列,开始就要执行
console.log(item);
})
console.log("111")
//先输出1 2 3 在输出111
// 2 异步回调函数
setTimeout(()=>{ //异步回调函数 会放入队列中将来执行
console.log('timout callback')
},0)
console.log('222');
// 先输出222 在输出timeout callback
1.3 JS的error处理
错误类型
- error:所有的错误类型
- ReferenceError:引用的变量不存在
- TypeError:数据类型不正确的错误
- RangeError:数据值不在其所允许的范围内
- syntaxError:语法错误
错误处理
- 捕获错误:try…catch
- 抛出错误:throw error
错误对象
- message属性:错误相关信息
- stack属性:函数调用栈记录信息
//try...catch
try{
let a;
console.log(a.xxx);
} catch(error){
console.log(error.message);
console.log(error.stack);
}
//throw
function something(){
if(Date.now()%2 === 1){
console.log('当前时间为奇数,无报错');
}
else{
throw new Error('当前时间为偶数,报错')
}
}
二 、promise的理解与使用
2.1 promise是什么?
1.抽象表达
- promise是js中进行异步编程的新的解决方案
2.具体表达
- 从语法上来说:promise是一个构造函数
- 从功能上来说:promise对象用来封装一个异步操作并可以获取其结果
2.1.2 promise的状态改变
- 1.pending变为resolved
- 2.pending变为rejected
- 说明:只有这两种,且一个promise对象只能改变一次,无论变为成功还是失败,都会有一个结果数据
- 成功的结果数据一般为value,失败的结果数据一般称为reason
2.1.3 promise的基本流程
2.1.4 promise的基本使用
// 1.创建一个新的promise对象
const p = new Promise((resolve,reject)=>{ //执行器函数
// 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)
})
p.then(
value=>{ //接收得到成功的value数据 onResolved
console.log('成功的回调',value);
},
reason=>{ //接收得到失败的reason数据 onRejected
console.log('失败的回调',reason);
}
)
2.2 为什么要用promise
指定回调函数的方式更加的灵活:
- 旧的必须在启动异步任务之前指定
- promise:启动异步任务=>返回promise对象=>给promise对象绑定回调函数(甚至可以在异步任务结束后指定)
- 就是说可以在异步函数执行后得到了结果,再指定回调函数,比如上述代码执行1秒后调用成功
- 假设我给回调函数再设置给setTimeout()函数,指定两秒,这样在得到结果后,再过1秒才能执行回调函数
支持链式调用,可以解决回调地狱问题
- 回调地狱:回调函数嵌套调用,外部回调函数异步执行的结果是嵌套的回调函数执行的条件
- 回调地狱缺点:不便于于都 / 不便于异常处理
- 解决方案:promise的链式调用
- 回调地狱的终极解决方案 async/await
伪代码:
//回调地狱
doSomething(function(result){
doSomethingElse(result,function(newResult){
doThirdThing(newResult,function(finalResult){
console.log('get the final result:'+finalResult)
},failureCallback)
},failureCallback)
},failureCallback)
// 链式调用
doSomething()
.then(function(result){
return doSomethingElse(result);
})
.then(function(newResult){
return doThirdThing(newResult)
})
.then(function(finalResult){
console.log('get 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('get the final result:'+finalResult)
} catch(error){
failureCallback(error);
}
}
2.3 如何使用Promise
2.3.1 API
1. Promise构造函数:promise(excutor){}
- 1.1 excutor函数:执行器 (resolve,reject)=>{}
- 1.2 resolve函数:内部定义成功时,我们调用的函数 value=>{}
- 1.3 reject函数:内部定义失败时我们调用的函数 reason=>{}
- 注意:excutor 会在promise内部立即同步回调.异步操作在执行器中执行
2. Promise.prototype.then 方法:(onResolved,onRejected)=>{}
- OnResolved函数:成功的回调函数 (value)=>{}
- onRejected函数:失败的回调函数 (reason)=>{}
- 说明:指定用于得到成功value的成功回调和用于得到失败reason的失败回调 返回一个新的promise对象
3. Promise.prototype.catch方法: (onRejected) => {}
- onRejected函数:失败的回调函数(reason) => {}
- 说明: then()的语法糖,相当于: then(undefined, onRejected)
4. Promise.resolve方法: (value) => {}
- value:成功的数据或promise对象
- 说明:返回一个成功/失败的promise对象
5. Promise.reject方法: (reason) =>{}
- reason:失败的原因
- 说明:返回一个失败的promise对象
6. Promise.a11方法: (promises) => {}
- promises:包含n个promise的数组
- 说明:返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败
7. 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)
})
promise.resolve promise.reject
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.catch(reason=>{console.log(reason)})
promise.all
const p1 = new Promise((resolve,reject)=>{
resolve(1);
})
const p2 = Promise.resolve(2);
const p3 = Promise.reject(3)
//const pAll = Promise.all([p1,p2])
const pAll = Promise.all([p1,p2,p3])
pAll.then(
values => {
console.log('all onResolved()',values);
// 会返回一个数组,并且按照前面all里面的数组排序而排序
},
reason => {
// 打印错误原因
console.log('all onRejected',reason);
}
)
promise.race
//谁先返回,就使用谁的结果 注意,并不一定是race里面数组的第一个哦,得看谁先完成,谁最先完成就看谁咯
//const pRace = Promise.race([p3,p2,p1])
const pRace = Promise.race([p1,p2,p3])
pRace.then(
values => {
console.log('race onResolved()',values);
// 会返回一个数组,并且按照前面all里面的数组排序而排序
},
reason => {
// 打印错误原因
console.log('race onRejected',reason);
}
)