共通機能
Promise.prototype.then()
Promise.prototype.catch()
Promise.prototype.finally()
Promise.all()
Promise.race() //率先改变状态，p的状态就跟着改变
Promise.allSettled()
Promise.any()
Promise.resolve()
Promise.reject()
Promise.try()
目次
約束とは？
Promiseこれは、将来終了するイベント (通常は非同期操作) の結果を保持する単純なコンテナーです。構文的にはPromise、非同期操作のメッセージを取得できるオブジェクト。Promise統一された API を提供し、さまざまな非同期操作を同じ方法で処理できます。簡単に言えば、promise の役割は、将异步操作以同步操作的流程表达出来ネストされたコールバック関数を回避することです。
プロミスの特徴
- promise 非同期操作には、次の 3 つの状態があります
进行中，已成功，已失败。この状態を変更できるのは、非同期操作のみです。 - promise の状態が変更されると、再度変更されることはありません。promise オブジェクトの変更には 2 つの可能性があります
进行中—>已成功，进行中—>已失败。
promise の基本的な使い方
promise オブジェクトは、构造函数以下を生成するために使用される promise インスタンスです。
const promise = new Promise(function(resolve, reject) {
// ...
if (/* 满足条件 成功 反之失败 */){
resolve(value);
} else {
reject(error);
}
});
例：
promise1(){
new Promise(function(resolve, reject) {
let intData = Math.floor (Math.random()*10)
if (intData > 3){
resolve('数据正确，大于3');
} else {
reject('数据错误，小于3');
}
}).then(res=>{
console.log(res)
}).catch(e=>{
console.log(e)
})
}
受け入れられるパラメーターはresolveとreject2 つの関数です:
resolve的作用: による promise オブジェクトの状態进行中—>已完成。そして、非同期操作の結果をパラメーターとして
rejected的作用渡します。promise オブジェクトの状態と进行中—>已失败、非同期エラーの理由をパラメーターとして渡します。
then の使い方
then メソッドは 2 つのコールバック関数をパラメーターとして受け入れることができます. 最初のコールバック関数は promise オブジェクトの状態が解決 (完了) のときに呼び出され、2 番目のコールバック関数 (オプション) は promise オブジェクトの状態が拒否 (拒否) のときに呼び出されます (失敗しました) ) が呼び出されたとき。
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
});
連鎖して使用
then メソッドは、新しい Promise インスタンスを返します (元の Promise インスタンスではないことに注意してください)。したがって、then メソッドの後に別の then メソッドを呼び出す連鎖書き込みメソッドを使用できます。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
// 成功
console.log("resolved: ", comments);
}, function funcB(err){
// 错误
console.log("rejected: ", err);
});
上記のコードでは、最初の then メソッドで指定されたコールバック関数が別の Promise オブジェクトを返します。このとき、2 番目の then メソッドで指定されたコールバック関数は、新しい Promise オブジェクトの状態が変化するのを待ちます。解決された場合は funcA が呼び出され、状態が拒否された場合は funcB が呼び出されます。
キャッチメソッド
promise オブジェクトでは、非同期操作でエラーが発生するとステータスが reject になり、エラーを処理するために catch メソッドで指定されたコールバック関数が呼び出され、さらに then メソッドで指定されたコールバック関数も呼び出されます。操作中にエラーがスローされた場合にキャッチされます。
p.then((val) => console.log('fulfilled:', val))
.catch((err) => console.log('rejected', err));
// 等同于
// 等同于
p.then((val) => console.log('fulfilled:', val))
.then(null, (err) => console.log("rejected:", err));
promise オブジェクトのエラーには「バブリング」の性質があり、キャッチされるまで逆方向に渡されます。つまり、途中の then 関数をスキップします。
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 处理前面三个Promise产生的错误
});
最後にメソッド
finally メソッドは、promise オブジェクトの最終状態に関係なく実行されるアクションを指定するために使用されます。
server.listen(port).then(function () {
// ...
}).finally(server.stop);
サーバーは promise でリクエストを処理し、finally() メソッドでサーバーをシャットダウンします。
promise.all() メソッド
promise.all メソッドは、複数の promise インスタンスを新しい promise インスタンスにラップするために使用されます。
const p = Promise.all([p1, p2, p3]);
Promise.all メソッドは配列をパラメーターとして受け入れます。その要素はすべて promise インスタンスです如果不是，则会自动将参数转变为promie实例。
p の状態は、その配列内の要素によって決定され、2 つの状態に分割されます (上記の例を使用)。
p1 p2 p3 の状態が成立(完了)したときのみ成立(完了)となります.このとき,p1 p2 p3の戻り値を配列にしてpのコールバック関数に渡します.
p1 p2 p3 のうち 1 つが拒否 (未完了) になり、p のステータスが拒否 (未完了) になります. このとき、最初に拒否されたインスタンスの戻り値が p のコールバック関数に渡されます。
promise.race() メソッド
Promise.race メソッドは、複数の Promise インスタンスを新しい Promise インスタンスにラップすることもできます
const p = Promise.race([p1, p2, p3]);
p1、p2、および p3 の間に一个实例率先改变状態がありますp的状态就跟着改变。最初に変更された Promise インスタンスの戻り値は、p のコールバック関数に渡されます。
非同期関数
知らせ：！! await コマンドは非同期関数でのみ使用でき、通常の関数ではエラーが報告されます。
async の導入により、非同期操作がより便利になります. async 関数とは何ですか, 実際には、それは Generator 関数の構文シュガーです. 非同期関数とコールバック関数の構文を同期関数に近づけます。ジェネレーターはここでは紹介されていません。非同期の学習に直行しましょう
async の戻り値は promise オブジェクトなので、then メソッドを使用してコールバック関数を追加できます.関数が実行されると、一度 await に遭遇すると、最初に戻り、非同期操作が完了するまで待ってから実行します関数本体の背後にあるコンテンツ。
async function getStockPriceByName(name) {
const symbol = await getStockSymbol(name);
const stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function (result) {
console.log(result);
});
async関数の利用形態
//函数声明
async function foo(){
}
//函数表达式
const foo = async function（）{
}；
//对象的方法
let obj = {
async foo(){
}};
obj.foo().then(...)
//箭头函数
const foo =async()=>{
}；
async 関数内の return ステートメントによって返される値は、then メソッド呼び出し関数のパラメーターになります。
async function f(){
return ‘hello world’；
}
f().then(v=> console.log(v))
//"hello world"
await コマンド
通常の状況では、await コマンドの後に promise オブジェクトが続きます。そうでない場合は、自動的に promise オブジェクトに変換されます。
async function f(){
return await 123;
}
f().then(v =>console.log(v))
//123
async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
エラー処理
await の背後にある非同期操作が間違っている場合、async 関数によって返されたものと同等の promise オブジェクトは拒否されます (前述のように、promise オブジェクトのバブリングの性質について説明したとき)。
async function f() {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
}
f().then(v => console.log(v))
.catch(e => console.log(e))
// Error：出错了
エラーを防ぐには、try...catch ブロックを使用します。
async function f() {
try {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
} catch(e) {
}
return await('hello world');
}
複数の await コマンドが try...catch 構造に配置されている
async function main() {
try {
const val1 = await firstStep();
const val2 = await secondStep(val1);
const val3 = await thirdStep(val1, val2);
console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
}
関連プロパティ
allSettled() と all() の違い
- all() は直接ラッパーを返し
resolve内容的数组、allSettled() はラッパーを返します对象的数组。 - all() Promise オブジェクトがエラーを報告した場合、all() は実行できず、エラーが報告され、他の成功したデータを取得できません。allSettled() メソッドは、エラーの有無に関係なく、Promise インスタンスのすべてのデータをオブジェクトに返します。解決されたデータの場合、ステータス値は満たされ、それ以外の場合は拒否されます。
Promise.resolve() と Promise.reject()
resolve 成功
reject 失败
Promise.try()
トラブルシューティング。