Promise函數(shù)(異步請求操作可用)

Promise用法

Promise其實是一個構(gòu)造函數(shù) ！

使用方法如下：

new Promise(function(resolve,reject){});

在實例化Promise時需要傳入一個函數(shù)executor作為參數(shù)，并且在Promise構(gòu)造函數(shù)執(zhí)行時同步執(zhí)行,這里的executor指function(resolve,reject){}

舉例：

var p = new Promise(function(resolve,reject){                            console.log('執(zhí)行操作1');        
});

控制臺將會輸出 執(zhí)行操作1， 說明在實例化過程中，作為參數(shù)的executor函數(shù)也會執(zhí)行。

executor函數(shù)還有兩個參數(shù)resolve和reject，這兩個參數(shù)也是函數(shù)，在executor執(zhí)行時被調(diào)用 。

resolve和reject的具體用法

Promise的幾種狀態(tài)：

• pending: 初始狀態(tài)，成功或失敗狀態(tài)。
• fulfilled: 意味著操作成功完成。（resolve）
• rejected: 意味著操作失敗。

調(diào)用resolve則表示成功，調(diào)用rejected表示失敗。

當(dāng)Promise狀態(tài)為fullfilled狀態(tài)時執(zhí)行then方法里的操作 。

then方法里面有兩個參數(shù)onfulfilled(Promise為fulfilled狀態(tài)時執(zhí)行) 和onrejected（Promise為rejected狀態(tài)時執(zhí)行），步驟如下：

• 實例化Promise new Promise(function(resolve,reject))

• 用Promise的實例調(diào)用then方法

舉例：

var p = new Promise(function (resolve, reject) {                  console.log('執(zhí)行操作1');               
       resolve('success');  // 這里調(diào)用了resolve 即成功狀態(tài)
 });       
 p.then(function (data) { // 這里的函數(shù)是resolve,參數(shù)書上面?zhèn)魅氲?success'          
    console.log(data); // 控制臺打印 success           
    console.log('這是成功操作');  // 控制臺打印 這是成功操作     
 });

上述代碼執(zhí)行后控制臺會打?。?/p>

• 執(zhí)行操作1

• success

• 這是成功操作

可以理解為then函數(shù)的參數(shù)就是我們的回調(diào)函數(shù)(resolve函數(shù)或者reject函數(shù))

一般來說then的參數(shù)也是兩個。

完整例子：

var p = new Promise(function (resolve, reject) {
    var flag = false;
    if(flag){ //這里的flag可以替換成后臺獲取數(shù)據(jù)成功與否
        resolve('SUCCESS');
      }else{
        reject('FAILUER');
     }
   });
   p.then(function(data){//狀態(tài)為fulfilled時執(zhí)行
       console.log(data);
       console.log('這是成功操作');
   },function(reason){ //狀態(tài)為rejected時執(zhí)行
       console.log(reason);
       console.log('這是失敗的操作');
   });

上述代碼，由于flag是false,所以會走reject函數(shù)。

由于Promise對象上有catch函數(shù)， 其實跟then方法中的第二個參數(shù)一樣，就是在Promise狀態(tài)為rejected時執(zhí)行，then方法捕捉到Promise的狀態(tài)為rejected，就執(zhí)行catch方法里面的操作 ，最終例子：

var p = new Promise(function (resolve, reject) {
    var flag = false;
    if(flag){ //這里的flag可以替換成后臺獲取數(shù)據(jù)成功與否
        resolve('SUCCESS');
      }else{
        reject('FAILUER');
     }
   });
   p.then(function(data){//狀態(tài)為fulfilled時執(zhí)行
       console.log(data);
       console.log('這是成功操作');
   }).catch(function(reason){ //狀態(tài)為rejected時執(zhí)行
       console.log(reason);
       console.log('這是失敗的操作');
   });

總結(jié)

promise主要是為了解決js中多個異步回調(diào)難以維護和控制的問題 。

推廣：

function func(resolve,reject) {
let p = new Promise(function (resolve, reject) {
    // 一些比較耗時異步操作
    if(操作完成標(biāo)識) {
        resolve();
    }
});
p.then(function (data) {
    // do something
    }).catch( function () {
       // do something
    });
});
}

實現(xiàn)(Angular8中的http請求示例(已經(jīng)過測試))：

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中按上述代碼封裝，外部調(diào)用時就可以傳入回調(diào)函數(shù)進行自己的邏輯處理，也不會影響this的作用域。

外部調(diào)用示例：

@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() {
     // 傳入自定義函數(shù)即可,不會影響this的作用域
    this.listService.getLists((value: List[]) => {
      this.list = value;
    });
    console.log('list組建被創(chuàng)建');
  }

  ngOnDestroy(): void {
    // throw new Error('Method not implemented.');
    console.log('list組建被銷毀');
  }
}