es6之promise簡單理解及使用

promise

1. promise是解決異步的一種方案，也就是讓promise幫咱們去處理異步，最終promise會返回異步處理的結果。
2. 有了promise以後，讓異步處理更加靈活，還可以解決以前的回調地獄的問題。

• promise的使用

• 咱們須要用promise幫咱們處理異步

  var a=new Promise(function(resolve.reject){
      // 在這裏來進行真正的異步處理
       setTimeout(function(){
          console.log('hello promise')
        }, 100);
  }

• promise在處理異步的時候，會成功或者失敗，成功調用resolve，失敗調用reject

  var p = new Promise(function(resolve, reject){
        // 第一個形參是成功的回調 異步成功 resolve
        // 第一個形參是失敗的回調 異步失敗 reject
        // 這裏用於實現異步任務
        setTimeout(function(){
          var flag = true;
          if(flag) {
            // 正常狀況
            resolve('hello promise');
          }else{
            // 異常狀況
            reject('error ');
          }
        }, 200);
      });

• 獲取到異步的結果

  p.then(function(data){
      //第一個函數是成功時調用
      console.log(data)
  },function(info){
      //這個函數是失敗時調用
      console.log(info)
  });

• promise解決回調地獄的問題

在promise實例的then方法內部 若是return了一個新的Promise實例對象
下一個.then的成功回調函數，是屬於新的promise處理異步的成功的回調

function queryData(url){
    var p=new Promise((resolve.reject)=>{
            var xhr=new XMLHttpRequest();
            xhr.open('get',url);
            xhr.send(null);
            xhr.onlaod=function(){
                if(xhr.status==200){
                    resolve(xhr.respomseText)
                }else{
                    reject('服務器出錯')
                }    
            }
    })
}
queryData('http://localhost:3000/data').then(function(res){
      console.log(res)
      // queryData 返回的是 Promise實例對象
      return queryData('http://localhost:3000/data1')
    }).then(function(res) {
      console.log(res)
      return queryData('http://localhost:3000/data2')
    }).then(function(res) {
      console.log(res)
    })

• promise的實例方法

經過實例對象來調用的方法或屬性，咱們叫作：實例方法或者實例屬性
1. then: 第一個回調函數是成功的回調，第二個是失敗的回調
2. catch：專門用來處理失敗的
3. finally：無論成功仍是失敗都會執行

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')
      });

`經過構造函數來調用的方發或屬性，咱們叫作：靜態方法或者靜態屬性`
 `1. all：該方法接收一個數組，數組的每一項都是處理異步的promise實例對象，數組每一項的異步都處理完成以後，all的then的成功的回調纔會執行`
 `2. race：使用的方式和all一摸同樣，區別就是race的then的成功回調，只要有一個異步成功，then就調用`
```javascript
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');
    // 靜態方法 實例方法
    // 經過構造函數調用的方法 叫作靜態方法
    // 經過實例調用的叫作實例方法

    //1. Promise.all() 併發處理多個異步執行任務 ，全部任務都執行完才能獲得結果
    // 這裏會延遲3秒纔會出結果
    Promise.all([p1, p2, p3]).then(function (result) {
      console.log(result)
    })
    //2. Promise.race 併發處理多個異步任務 只要有一個任務完成就能獲得結果
    // 獲得最早返回的結果
    Promise.race([p1, p2, p3]).then(function (result) {
      console.log(result)
    })
```