promise 英文意思是 诺言; 许诺; 承诺; 获得成功的迹象; 吉兆; 迹象; 用法如字面意思,是一种可能未发生的许诺 js中的代码存在异步执行,一般通过回调函数返回结果,如ajax调用后会在回调函数中获取返回值,但是js代码没有等待返回值而继续向下执行了。现实中程序代码是实现有先后顺序的业务逻辑的,为了让异步代码按照指定的顺序执行,这里使用Promise完成
|
以下在typescript语言环境下演示:
//建立一个Promise
let p:Promise<string> = new Promise<string>((resolve, reject)=>{
console.log('Promise 被执行...');
let err:boolean = false;
if(!err){
console.log('没有报错...');
resolve('没有报错');
}else{
console.log('发生了错误...');
reject('发生了错误')
}
});
先看then方法
//在vscode编辑器中鼠标移动到方法上会有then方法提示:
/*************************************************************/
(method) Promise<string>.then<string, never>(onfulfilled?: ((value: string) => string | PromiseLike<string>) | null | undefined, onrejected?: ((reason: any) => PromiseLike<never>) | null | undefined): Promise<...>
Attaches callbacks for the resolution and/or rejection of the Promise.
@param onfulfilled — The callback to execute when the Promise is resolved.
@param onrejected — The callback to execute when the Promise is rejected.
@returns — A Promise for the completion of which ever callback is executed.
/*************************************************************/
//首先看then方法的返回值: Promise<...>,也是一个Promise对象
//then的参数可以是两个:onfulfilled?,onrejected? 可以传递,也不可不传递
//onfulfilled的类型:
// 1.(value: string) => string | PromiseLike<string>) 可以是带有一个参数的函数,返回值可以是string(与new Promise时候规定的范型一致)或者PromiseLike(理解为Promise即可)
// 2.null
// 3.undefined
//onrejected的类型:
// 1.(reason: any) => PromiseLike<never> 可以是带有一个参数的函数,返回值可以是PromiseLike(理解为Promise即可)
// 2.null
// 3.undefined
//onfulfilled 回调函数是在Promise中resolved方法执行时被调用的
//onrejected 回调函数是在Promise中onrejected方法执行时被调用的
//同一Promise对象执行resolve传递参数后,参数不会再次改变
//当先执行resolve后执行then函数时,传递的参数会保存在对象内部
//当先执行then函数后执行resolve函数时,then函数中的回调函数会阻塞等待resolve的执行
看例子:
//建立一个Promise
let p:Promise<string> = new Promise<string>((resolve, reject)=>{
console.log('-----------Promise执行-------------');//实例化对象时候执行
setTimeout(()=>{
console.log('-----------Promise resolve执行-------------');
//同一Promise对象执行resolve传递参数后,参数不会再次改变
//当先执行resolve后执行then函数时,传递的参数会保存在对象内部
//当先执行then函数后执行resolve函数时,then函数中的回调函数会阻塞等待resolve的执行
resolve('resolve执行');
},1500);
});
console.log('------------------------');
setTimeout(()=>{
p.then(value=>{
console.log('------------我执行了1------------');
console.log(`value=${value}`);
console.log('------------我执行了1------------');
});
},2000);
console.log('------------分割线------------');
setTimeout(()=>{
p.then(value=>{
console.log('------------我执行了2------------');
console.log(`value=${value}`);
console.log('------------我执行了2------------');
});
},1000);
代码执行结果:
-----------Promise执行-------------
index.ts:3
------------------------
index.ts:11
------------分割线------------
index.ts:21
-----------Promise resolve执行-------------
index.ts:5
------------我执行了2------------
index.ts:25
value=resolve执行
index.ts:26
------------我执行了2------------
index.ts:27
------------我执行了1------------
index.ts:15
value=resolve执行
index.ts:16
------------我执行了1------------