淺談promise用es5實現

作為新人第一次擼博客,寫的不好 多多包涵

 由於JavaScript所有的代碼都是單線程執行的 所以es6的時候出現了promise

 promise作為es6的異步操作構造函數有all、reject、resolve這幾個方法，其原型上then、catch等方法；其有三種狀態分別為

pending進行中，resolve已完成，reject失敗

1.接下來我們進入正題，這篇博客內容主要是為了更加深刻的理解promise的原理：

//那new一個把
var test = new Promise(function(resolve, reject){
        resolve('數據');
});

  promise作為一個構造函數，接收的參數是個函數，傳入兩個參數（resolve，reject）分別表示異步操作執行成功和失敗的回調；

  resolve把狀態從pending變成resolve，reject把狀態從pending變成reject

  一般我們用promise的時候是包在一個函數中，在需要的時候去調用運行它：

function Async(){
    var test = new Promise(function(resolve,reject){
         resolve("成功返回數據")
    })
    return test;
}

Async()

 接下來我們就可以調用它：

Async().then(function(res){
    console.log(res)
//....
//可以對傳過來的數據進行一系列操作
})

你還可以不斷地then進行回調進行鏈式操作用法：

promise成功解決了之前es5的回調地獄

用代碼來展示下promise的精髓：

function Async1(){
    var p = new Promise(function(resolve, reject){
            resolve('隨便什么數據1');
    });
    return p;            
}
function Async2(){
    var p = new Promise(function(resolve, reject){
            resolve('隨便什么數據2');
    });
    return p;            
}
function Async3(){
    var p = new Promise(function(resolve, reject){
            resolve('隨便什么數據3');
    });
    return p;            
}


Async1()
.then(function(data){
    console.log(data);
    return Async2();
})
.then(function(data){
    console.log(data);
    return Async3();
})
.then(function(data){
    console.log(data);
});

//接下來可以清楚的看到：
// 隨便什么數據1
// 隨便什么數據2
// 隨便什么數據3

 

2.promise的用法已經介紹了，接下來我們來用es5實現promise：

function promise (fn) {
           if (typeof this !== 'object') { 
              throw new TypeError('Promises must be constructed via new');
           }
           if (typeof fn !== 'function') {
               throw new TypeError('Promise constructor\'s argument is not a function');
            }
            this.state = "pending"; //定義狀態
            this.msg="";
            var process=arguments[0];
            var that=this;
            process(function(){
                that.state="resolve"
                that.msg=arguments[0]
            },function(){
                that.state="reject"
                that.msg=arguments[0]
            })
            return this
      }
      promise.prototype.then=function(){
          constructor:promise
          if(this.state == "resolve"){
              arguments[0](this.msg)
          }else if(this.status=='reject'&&arguments[1]){
              arguments[1](this.msg)
          }
          promise=new this.constructor(function (resolve,reject) {resolve("2")}) //每次調用then之后重新返回一個新的promise實例進行下一步then的調用
        //   console.log(this)
        //   console.log(promise)
          return promise
      }
    var mm =  new promise(function(resolve,reject){
          resolve("1")
      })
      mm.then(function(res){ //then回調
          console.log(res)
      }).then(function(res){
          console.log(res)
      })