約束する

JavaScriptプロトタイプチェーンを簡単に理解した後、最初にプロミスを書きたいと思います。これまでに多くの記事を読んだことがありますが、それでももう一度実行する必要があると感じています。
es6構文のPromiseは、非同期コールバックの問題を正常に解決します。その使用方法だけです。
最初にウェーブを分析しましょう。Promiseの使用は、上記の構築関数によって作成されたインスタンスオブジェクトである新しいPromise（）です。インスタンスのメソッドは、彼のインスタンスプロトタイプであるPromise関数のプロパティプロトタイプに登録する必要があります。 .prototype.then = function（）{}であり、Promiseが非同期操作を実行する方法は、現在の状態を判断することによって実行する必要があります。状態を成功と失敗に示す2つの方法があり、新しいPromise（）のパラメーターは1つです。パラメータを持つ関数は解決および拒否するため、コンストラクタから始めます。
最初にこのビルド関数を作成します

function MyPromise(init){
    const _this = this  //定义变量_this
    this.successValue = null  //成功结果
    this.failValue = null  //失败结果
    this.state = 'initial'  //初始默认值为initial
    
    init(resolve,reject) //构建时先执行用户自定义方法
    
    function resolve(successValue){  //成功方法
        if(_this.state==='initial'){ //状态更变后不可再修改
            _this.successValue = successValue  //成功结果为resolve传参
            _this.state = 'success'   //修改状态为成功
        }
    }  
    function reject(failValue){  //失败方法
        if(_this.state==='initial'){  //状态更变后不可再修改
            _this.failValue = failValue  //失败结果为reject传参
            _this.state = 'fail'  //修改状态为失败
        }
    }
};

次に、非同期の問題を解決するために、非同期操作を実行する方法について、次の一連のPromiseを実行します。次に、pmのthenメソッドが呼び出されましたが、2秒後に実行される理由は、コールが成功した後にthenパラメーターメソッドが実行されることを示しています。、これはPromiseのresolveメソッドで実行されるため、解決して解放するための内部メソッドを格納するためのキューが必要です。

let pm = new Promise((resolve,reject)=>{
    setTimeout(()=>{  //异步操作
        resolve('成功回调')
    },2000)
})
pm.then((res)=>{
    console.log(res)
})

上で定義したMyPromiseを変更します

function MyPromise(init){
  const _this = this  //定义变量_this
  this.successValue = null  //成功结果
  this.successList = [] //成功执行队列
  this.failValue = null  //失败结果
  this.failList = [] //失败执行队列
  this.state = 'initial'  //初始默认值为initial
  
  init(resolve,reject) //构建时先执行初始方法
  
  function resolve(successValue){  //成功方法
    if(_this.state==='initial'){ //状态更变后不可再修改
      _this.successValue = successValue  //成功结果为resolve传参
      _this.successList.forEach(item=>item(successValue))  //遍历成功队列并执行
      _this.state = 'success'   //修改状态为成功
    }
  }  
  function reject(failValue){  //失败方法
    if(_this.state==='initial'){  //状态更变后不可再修改
      _this.failValue = failValue  //失败结果为reject传参
      _this.failList.forEach(item=>item(successValue))  //遍历失败队列并执行
      _this.state = 'fail'  //修改状态为失败
    }
  }
};

次に、thenメソッドを登録します

MyPromise.prototype.then = function(successFun,failFun){
  if(this.state==='initial'){
    if(typeof successFun === 'function'){ //判断successFun是否为函数，是的话就存！
      this.successList.push(successFun)
    }
    if(typeof failFun === 'function'){  //判断failFun是否为函数，是的话就存！
      this.failList.push(failFun)
    }
  }
}

ここでは、thenメソッドを使用した単純なPromiseを使用できます。呼び出してみてください

let p = new MyPromise((resolve,reject)=>{
  setTimeout(()=>{
    resolve('回调啊')
  },2000)
})
p.then(res=>{
  console.log(res)
})

ビュー
ここに写真の説明を挿入
catchメソッドの追加catchメソッドは、実際にはPromiseの状態を失敗に変えてから、失敗したキューに移動します。これは実際にはthenメソッドですが、成功したキューはありません。

MyPromise.prototype.catch = function(failFun){
  return this.then(null,failFun)
}

初期化方法を変更します。ここでは、try関数を使用する必要があります

  try{
    init(resolve,reject) //构建时先执行初始方法
  } catch(failValue){
    reject(failValue);  //初始化方法失败时走失败队列
  }

おすすめ