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组建被销毁');
  }
}