Promise函数(异步请求操作可用)
Promise用法
Promise其实是一个构造函数 ！
使用方法如下：
new Promise(function(resolve,reject){});
在实例化Promise时需要传入一个函数executor作为参数，并且在Promise构造函数执行时同步执行,这里的executor指function(resolve,reject){}
举例：
var p = new Promise(function(resolve,reject){ console.log('执行操作1');
});
控制台将会输出 执行操作1， 说明在实例化过程中，作为参数的executor函数也会执行。
executor函数还有两个参数resolve和reject，这两个参数也是函数，在executor执行时被调用 。
resolve和reject的具体用法
Promise的几种状态：
- pending: 初始状态，成功或失败状态。
- fulfilled: 意味着操作成功完成。（resolve）
- rejected: 意味着操作失败。
调用resolve则表示成功，调用rejected表示失败。
当Promise状态为fullfilled状态时执行then方法里的操作 。
then方法里面有两个参数onfulfilled(Promise为fulfilled状态时执行) 和onrejected（Promise为rejected状态时执行），步骤如下：
实例化Promise
new Promise(function(resolve,reject))用Promise的实例调用then方法
举例：
var p = new Promise(function (resolve, reject) { console.log('执行操作1');
resolve('success'); // 这里调用了resolve 即成功状态
});
p.then(function (data) { // 这里的函数是resolve,参数书上面传入的'success'
console.log(data); // 控制台打印 success
console.log('这是成功操作'); // 控制台打印 这是成功操作
});
上述代码执行后控制台会打印：
执行操作1
success
这是成功操作
可以理解为then函数的参数就是我们的回调函数(resolve函数或者reject函数)
一般来说then的参数也是两个。
完整例子：
var p = new Promise(function (resolve, reject) {
var flag = false;
if(flag){ //这里的flag可以替换成后台获取数据成功与否
resolve('SUCCESS');
}else{
reject('FAILUER');
}
});
p.then(function(data){//状态为fulfilled时执行
console.log(data);
console.log('这是成功操作');
},function(reason){ //状态为rejected时执行
console.log(reason);
console.log('这是失败的操作');
});
上述代码，由于flag是false,所以会走reject函数。
由于Promise对象上有catch函数， 其实跟then方法中的第二个参数一样，就是在Promise状态为rejected时执行，then方法捕捉到Promise的状态为rejected，就执行catch方法里面的操作 ，最终例子：
var p = new Promise(function (resolve, reject) {
var flag = false;
if(flag){ //这里的flag可以替换成后台获取数据成功与否
resolve('SUCCESS');
}else{
reject('FAILUER');
}
});
p.then(function(data){//状态为fulfilled时执行
console.log(data);
console.log('这是成功操作');
}).catch(function(reason){ //状态为rejected时执行
console.log(reason);
console.log('这是失败的操作');
});
总结
promise主要是为了解决js中多个异步回调难以维护和控制的问题 。
推广：
function func(resolve,reject) {
let p = new Promise(function (resolve, reject) {
// 一些比较耗时异步操作
if(操作完成标识) {
resolve();
}
});
p.then(function (data) {
// do something
}).catch( function () {
// do something
});
});
}
实现(Angular8中的http请求示例(已经过测试))：
public getLists(callback: any): void {
console.log(typeof callback);
if (typeof callback !== 'function') {
return;
}
const p = new Promise((resolve, reject) => {
this.http.get<List[]>(this.listUrl, httpOptions).subscribe(response => {
console.log(response);
resolve(response);
});
}).then(result => {
callback(result);
});
}
在service中按上述代码封装，外部调用时就可以传入回调函数进行自己的逻辑处理，也不会影响this的作用域。
外部调用示例：
@Component({
selector: 'app-study-list',
templateUrl: './study-list.component.html',
styleUrls: ['./study-list.component.css']
})
export class StudyListComponent implements OnInit, OnDestroy {
// 列表
list: List[];
constructor(private listService: StudyService) {}
ngOnInit() {
// 传入自定义函数即可,不会影响this的作用域
this.listService.getLists((value: List[]) => {
this.list = value;
});
console.log('list组建被创建');
}
ngOnDestroy(): void {
// throw new Error('Method not implemented.');
console.log('list组建被销毁');
}
}
