前後端交互,Promise 基本API

前後端交互,Promise 基本API

1.接口調用方式

1.原生ajax;

2.基於jQuery的ajax;

3.fetch;

4.axios;

2.異步

• JavaScript的執行環境是「單線程」
• 所謂單線程，是指JS引擎中負責解釋和執行JavaScript代碼的線程只有一個，也就是一次只能完成一項任務，這個任務執行完後才能執行下一個，它會「阻塞」其他任務。這個任務可稱爲主線程
• 異步模式可以一起執行多個任務
• JS中常見的異步調用
  • 定時任何
  • ajax
  • 事件函數

3.promise

• 主要解決異步深層嵌套的問題
• promise 提供了簡潔的API 使得異步操作更加容易

 
  <script type="text/javascript">
    /*
     1. Promise基本使用
           我們使用new來構建一個Promise  Promise的構造函數接收一個參數，是函數，並且傳入兩個參數：		   resolve，reject， 分別表示異步操作執行成功後的回調函數和異步操作執行失敗後的回調函數
    */


    var p = new Promise(function(resolve, reject){
      //2. 這裏用於實現異步任務  setTimeout
      setTimeout(function(){
        var flag = false;
        if(flag) {
          //3. 正常情況
          resolve('hello');
        }else{
          //4. 異常情況
          reject('出錯了');
        }
      }, 100);
    });
    //  5 Promise實例生成以後，可以用then方法指定resolved狀態和reject狀態的回調函數 
    //  在then方法中，你也可以直接return數據而不是Promise對象，在後面的then中就可以接收到數據了  
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });
  </script>

4.基於Promise發送Ajax請求

 
  <script type="text/javascript">
    /*
      基於Promise發送Ajax請求
    */
    function queryData(url) {
     #   1.1 創建一個Promise實例
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            # 1.2 處理正常的情況
            resolve(xhr.responseText);
          }else{
            # 1.3 處理異常情況
            reject('服務器錯誤');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
	# 注意：  這裏需要開啓一個服務 
    # 在then方法中，你也可以直接return數據而不是Promise對象，在後面的then中就可以接收到數據了
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        #  1.4 想要繼續鏈式編程下去 需要 return  
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
  </script>

5.Promise 基本API

實例方法

.then()

• 得到異步任務正確的結果

.catch()

• 獲取異常信息

.finally()

• 成功與否都會執行（不是正式標準）

  
  <script type="text/javascript">
    /*
      Promise常用API-實例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 兩種寫法是等效的
    foo()
      .then(function(data){
        # 得到異步任務正確的結果
        console.log(data)
      },function(data){
        # 獲取異常信息
        console.log(data)
      })
      # 成功與否都會執行（不是正式標準） 
      .finally(function(){
        console.log('finished')
      });
  </script>

6.靜態方法

.all()

• Promise.all方法接受一個數組作參數，數組中的對象（p1、p2、p3）均爲promise實例（如果不是一個promise，該項會被用Promise.resolve轉換爲一個promise)。它的狀態由這三個promise實例決定

.race()

• Promise.race方法同樣接受一個數組作參數。當p1, p2, p3中有一個實例的狀態發生改變（變爲fulfilled或rejected），p的狀態就跟着改變。並把第一個改變狀態的promise的返回值，傳給p的回調函數

​

  <script type="text/javascript">
    /*
      Promise常用API-對象方法
    */
    // console.dir(Promise)
    function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 處理正常的情況
            resolve(xhr.responseText);
          }else{
            // 處理異常情況
            reject('服務器錯誤');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
     Promise.all([p1,p2,p3]).then(function(result){
       //   all 中的參數  [p1,p2,p3]   和 返回的結果一 一對應["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
       console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      // 由於p1執行較快，Promise的then()將獲得結果'P1'。p2,p3仍在繼續執行，但執行結果將被丟棄。
      console.log(result) // "HELLO TOM"
    })
  </script>