new を介して Promise オブジェクトを作成する場合、 executorと呼ばれるコールバック関数を渡す必要があります。

このコールバック関数はすぐに実行され、他の 2 つのコールバック関数の解決と拒否が渡されます。

resolveコールバック関数を呼び出すと、 Promise オブジェクトのthenメソッドによって渡されたコールバック関数が実行されます。

rejectコールバック関数を呼び出すと、 Promise オブジェクトのcatchメソッドによって渡されたコールバック関数が実行されます。
const promise = new Promise((resolve, reject)=>{
    //调用resolve，那么then传入的回调会被执行
    resolve("成功信息")
    //调用reject，那么catch传入的回调会被执行
    reject("错误信息")
})

promise.then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

Promise の使用中は、次の 3 つの状態に分けることができます。

executorでコードを実行すると、保留中になります。初期状態で、承認も拒否もされていません。

resolveが実行されると、それは満たされた状態になり、Promise が満たされました。これは、操作が正常に完了したことを意味します。

rejectが実行されると、拒否された状態になり、Promise が拒否されました: 操作が失敗したことを意味します。

2. コールバック関数 Executor

Executor は、Promise を作成するときに渡す必要があるコールバック関数です. このコールバック関数はすぐに実行され、2 つのパラメーターが渡されます:

new Promise((resolve, reject) => {
    console.log("执行executor代码")
})

通常、Executor で Promise の状態を決定します。

resolveを通じて、(満たされた) Promise のステータスが満たされることができます。これを解決済み (解決済み) と呼ぶこともできます。
rejectを介して、 Promise の状態を拒否 ( reject )できます。

ここに注意してください: 状態が決定されると、Promise の状態はロックされ、Promise の状態は変更できません。

resolve を呼び出したときに、resolve によって渡された値が Promise ではない場合、Promise の状態は満たされた (満たされた) に変更されます。
後で reject を呼び出すと、応答がなくなります(このコード行が実行されないということではなく、Promise の状態を変更できないということです)。

3. 解決の異なる値の違い

ケース 1:通常の値またはオブジェクトがに渡された場合、この値はthen コールバックのパラメーターとして使用されます。

new Promise((resolve, reject) => {
    resolve("normal resolve")
}).then(res =>{
    console.log("res:", res)
})

ケース 2:別の Promiseが渡された場合、新しい Promise が元の Promise の状態を決定します。

new Promise((resolve, reject) => {
    resolve(new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("第二个Promise的resolve")
        }, 3000)
      }))
}).then(res => {
    console.log("res:",res)
}).catch(err => {
    console.log("err:",err)
})

ケース 3:オブジェクトが resolve に渡され、オブジェクトがthen メソッドを実装している場合、 thenメソッドが実行され、 then メソッドの結果に従って Promise の状態が決定されます。

new Promise((resolve, reject)=>{
    resolve({
        then: function(resolve, reject) {
            resolve("thenable value")
        }
    })
}).then(res => {
    console.log(res)
})

4.thenメソッド

then メソッドは Promise オブジェクトのメソッド (インスタンスメソッド) です。

Promise.prototype.then は Promise のプロトタイプに配置されます

then メソッドは 2 つのパラメーターを受け入れます。

フルフィルドのコールバック関数: ステータスがフルフィルドになったときにコールバックされる関数。

Reject コールバック関数: 状態が reject になったときにコールバックされる関数。

const promise = new Promise((resolve, reject) => {
    resolve("resolve")
    reject("reject")
})

promise.then(res => {
    console.log("res:", res)
}, err => {
       console.log("err:", err)
   }
)

//等价于

promise.then(res => {
    console.log("res:", res)
}).catch(err => {
    console.log("err:", err)
})

then メソッドは 2 つのパラメーターを受け入れることができますが、.catch メソッドを使用する方が読みやすいです。

Promise の then メソッドは 複数回呼び出すことができます 。

呼び出しごとに、対応するフルフィルドコールバックを渡すことができます。
Promise の状態が満たされると、これらのコールバック関数が実行されます。

promise.then(res=>{
    console.log("res1:", res)
})

promise.then(res=>{
    console.log("res2:", res)
})

promise.then(res=>{
    console.log("res3:", res)
})

5.キャッチメソッド

catch メソッドは Promise オブジェクトのメソッド (インスタンスメソッド) でもあります。

Promise のプロトタイプに配置された Promise.prototype.catch でもあります。

Promise の catch メソッドは複数回呼び出すことができます。

各呼び出しに対応する reject コールバックを渡すことができます。
Promise の状態が reject になると、これらのコールバック関数が実行されます。

promise.catch(err => {
    console.log("err1:", err)
})
promise.catch(err => {
    console.log("err2:", err)
})

実際、catch メソッドは Promise オブジェクトも返すため 、 catch メソッドの後に then メソッドまたは catch メソッドを引き続き呼び出すことができます 。

 次のコードの場合、err2 は catch フォローアップに出力する必要がありますか、それとも res は then に出力する必要がありますか?

promise.catch(err => {
    console.log("err1:", err)
}).catch(err => {
    console.log("err2:", err)
}).then(res => {
    console.log("res:", res)
})

catchによって渡されたコールバックが実行された後も、デフォルトの状態が引き続き満たされるため、答えは res 印刷です。

◼ その後、catch を実行し続けたい場合は、例外をスローする必要があります。

promise.catch(err => {
    console.log("err1:", err)
    throw new Error("error message")
}).then(res => {
    console.log("res:", res)
}).catch(err => {
    console.log("err2:", err)
})

6.finally メソッド

◼ finally は ES9 (ES2018) で追加された新機能です: Promise オブジェクトが満たされるか拒否されるかに関係なく 、 コードは 最終的に実行されることを意味します 。

◼ finally メソッドは、 処理済み状態か拒否状態かに関係なく実行されるため、 パラメーターを受け取りません。

const promise = new Promise((resolve, reject) => {
    resolve("resolve")
    reject("reject")
})



promise.then(res => {
    console.log("res:", res)
}).catch(err => {
    console.log("err:", err)
}).finally(() =>{
    console.log("finally")
})

7.解決方法

◼ 先ほど学んだ then、catch、finally メソッドはすべて Promise のインスタンスメソッドに属し 、すべて Promise のプロトタイプに格納されています 。

次に、 Promise クラスのメソッドについて学びましょう。

◼すでに 既成のコンテンツが あり、それを Promise に変換して使用したい場合があります. このとき、Promise.resolve メソッドを使用してそれを完成させることができます.

 Promise.resolve の使用法は new Promise と同等であり、解決操作が実行されます。

Promise.resolve("这样会简洁一点")

//等价于

new Promise((resolve) => {
    resolve("fulfilled")
})

8.拒否方法

◼ reject メソッドは、Promise オブジェクトの状態が reject に設定されることを除いて、resolve メソッドと似ています。

◼ Promise.reject の使用法は new Promise と同等ですが、reject を呼び出します。

Promise.reject("简洁")

//等价于

new Promise((resolve, reject) => {
    reject("reject")
})

◼ Promise.reject で渡されるパラメータの形式に関係なく、reject 状態のパラメータとして直接 catch に渡されます。

9.すべての方法

◼別の クラスメソッドは Promise.all です。

 その機能は、複数の Promise をラップして新しい Promise を形成することです。

 新しい Promise の状態は、パッケージ内のすべての Promise によって共同で決定されます。

✓ すべてのPromise 状態が満たされると、新しい Promise 状態が満たされ、すべての Promise の戻り値が配列を形成します。

✓Promise ステータスが却下されると、新しい Promise ステータスが却下され、最初の却下の戻り値がパラメータとして使用されます。

const promise1 = new Promise((resolve, reject) => {
    resolve("resolve")
    reject("reject")
})
const promise2 = new Promise((resolve, reject) => {
    resolve("resolve")
    reject("reject")
})
const promise3 = new Promise((resolve, reject) => {
    resolve("resolve")
    reject("reject")
})

Promise.all([promise1, promise2, promise3]).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

10. allSettled メソッド

◼ all メソッドには欠点があります。Promise の 1 つが拒否状態になると、新しい Promise がすぐに対応する拒否状態になります。

その後、解決された Promise とまだ保留状態にある Promise については、対応する結果を取得できません。

◼ES11 (ES2020) では、新しい API Promise.allSettled が追加されました。

このメソッドは、すべての Promise が実行されたか拒否されたかに関係なく、すべての Promise に結果がある (解決された) 場合にのみ最終状態になります。

そして、この約束の結果は果たされなければなりません。

//创建三个promise promise1 promise2 promise3
Promise.allSettled([promise1, promise2, promise3]).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

◼ 印刷結果を見てみましょう。

 allSettled の結果は、各 Promise の結果を格納し、オブジェクトに対応する配列です。

このオブジェクトには、ステータスと対応する値が含まれています。

11.レース方法

結果を伴う Promise がある場合、新しい Promise の最終状態を決定したい場合は、race メソッドを使用できます。

 race は競争と競争を意味します。つまり、複数の Promise が互いに競争し、最初にその結果を使用します。

//创建三个promise promise1 promise2 promise3

Promise.race([promise1, promise2, promise3]).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

12.任意の方法

◼ any メソッドは ES12 の新しいメソッドで、race メソッドに似ています。

 any メソッドは、新しい Promise の状態を決定する前に、状態が満たされるのを待ちます。

 すべての Promises が拒否された場合、すべての Promises が拒否されるまで待機します。

//创建三个promise promise1 promise2 promise3

Promise.any([promise1, promise2, promise3]).then(res => {
    console.log(res)
}).catch(err => {
    console.log(err)
})

◼ すべての Promise が拒否された場合、AggregateError エラーが 報告されます 。

Promise は使用から認識されます

1.約束の理解