本文主要強調Promise的用法,討究Promise究竟在干什么。雖然已有大量的資料文檔對這個概念進行了詳細的講解。可是對初學者而言，在過于繁瑣的書面性概念中，確常常無法抓住重點，對問題本身的理解反而會造成麻煩。本文章只將重點放在作用上，忽略掉其它繁雜的概念，用盡可能直白的語言對這個問題進行剖析。閱讀本文需要十分鐘左右的時間，希望對您能有所幫助。

### **Promise：**

### **作用：解決回調地獄問題,將函數嵌套的代碼方式改為平級的。**

當一個回調函數嵌套一個回調函數的時候，就會出現一個嵌套結構，當嵌套的多了就會出現回調地獄的情況。

為了能更加清晰的體會promise,我們需要先觀察一段代碼。

```text
        function f1(f){
  console.log("f1");
  f();
 }
 
 function f2(f){
  console.log("f2");
  f();
 }
 
 function f3(f){
  console.log("f3");
  f();
 }
 
 function f4(){
  console.log("f4");
 }
 
 //回調地獄
 f1(function(){
  f2(function(){
   f3(f4);
  });
 });
```

代碼段有四個函數,f1,f2,f3,f4均為函數,且后一個函數作為前一個函數的參數，然后進行嵌套調用。最終從調用的語法來看，代碼十分復雜，我們把回調函數這樣調用稱為回調地獄。

**Pomise的作用就是將嵌套的調用方式改為平級的。**也就是說從調用的結果上來看，最終本質上是沒有任何區別，Pormise只是改變了語法的書寫規則。這就是Pomise的基本使用方法。

Promise的語法規則如下:

```text
        //使用方法
 //1.通常放入一個函數體內
 //2.將promise對象作為返回值
 //3.promise對象包含的多為異步操作
 function fun(){
        //success表示成功的回調,failed表示失敗時的回調
  let p = new Promise(function(success,failed){
   if(條件){
    success();
   }else{
    failed();
   }
  });
  return p;
 }
 
 function success(){
  console.log("success");
 }
 
 function failed(){
  console.log("failed");
 }
 
        //promise對象.then(成功的方法,[失敗的方法]);
 fun().then(success,failed);
```

這里promise對象可以將以前通過形參傳遞的回調函數,用then方法來進行傳遞。其實promise主要處理的是異步操作，如常見的如ajax請求。我們的每一個異步事件，在執行的時候，都會有三種狀態，執行中，成功，失敗。這也就解釋了為什么then方法為什么會有兩個參數，參數1代表成功時執行的回調函數，參數2代表失敗時的執行狀態。

所以上述函數嵌套調用的代碼可以修改為:

```text
        function f1(){
  console.log("f1");
  let p = new Promise(function(f){
   f();
  });
  return p;
 }
 
 function f2(){
  console.log("f2");
  let p = new Promise(function(f){
   f();
  });
  return p;
 }
 
 function f3(){
  console.log("f3");
  let p = new Promise(function(f){
   f();
  });
  return p;
 }
 
 function f4(){
  console.log("f4");
 }
 
 //平級調用的方法
 f1().then(f2).then(f3).then(f4);
```

這樣實現的功能和上述代碼的功能是完全一樣的，但是解決了函數嵌套調用的麻煩。

結論:**Pomise的作用就是將嵌套的調用方式改為平級的，用于處理異步操作。**

更多關于“html5培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓經驗，課程大綱更科學更專業，有針對零基礎的就業班，有針對想提升技術的提升班，高品質課程助理你實現夢想。