ホームページ  >  記事  >  ウェブフロントエンド  >  ES6 Promiseにおけるthenとcatchの戻り値の例

ES6 Promiseにおけるthenとcatchの戻り値の例

不言
不言オリジナル
2018-07-09 11:08:525954ブラウズ

この記事では主に ES6 Promise の then と catch の戻り値の例を紹介します。必要な方は参考にしてください。Catch は構文です。 then の糖分

したがって、then メソッドと catch メソッドの両方は Promise オブジェクトを返します (はい、戻り値が特定の値であっても、エラーがスローされたり、値が返されなくても) )

MDN の定義を見てみましょう。ここでは厳格ですが、少し乱雑です

2391029044- 5b40aad37ae52_articlex[1].pngthen方法与catch方法均会返回一个Promise对象(对,即使return 为某个值,或者throw error,或者不返回值)
我们来看看MDN的定义,这里可能为了严谨而说得有点乱七八糟的
ES6 Promiseにおけるthenとcatchの戻り値の例

简单来说,就是分为return 值(无return的情况下即返回undefined,也是返回值)throw errorreturn Promise

二.说说return值与throw error的情况。

1.return 值的情况:

返回的Promise会成为Fulfilled状态。
return的值会作为新Promise对象下一个then的回调函数的参数值,贴代码看例子

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    fulfill(i);
})
example
.then((value)=>{ console.log(value); value++; return value;  })
.then((value) => {console.log(value);                        });

输出结果如下:
ES6 Promiseにおけるthenとcatchの戻り値の例

调用fufill函数return value会传给下一个回调函数
回到上面的疑问,如果没有return呢,那么就会返回undefined
(就是函数无return返回的是undefined的情况,基础要扎实啊啊啊)

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    fulfill(i);
})
example
.then((value)=>{ console.log(value); value++; })
.then((value) => {console.log(value);});

输出结果如下:
ES6 Promiseにおけるthenとcatchの戻り値の例

2.throw error的情况:

返回的Promise会成为Rejected状态,
下一步执行catch中的回调函数或者then的第二个回调函数参数

这里出现了之前一直搞混的东西。
再次重复这一句话:catch为then的语法糖,它是then(null, rejection)的别名。
也就是说,catch也是then,它用于捕获错误,它的参数也就是是then的第二个参数。
所以,假设catch中如果return 值的话,新的Promise对象也会是接受状态。
看看例子:

var example = new Promise((fulfill, reject)=>{
    let i = 1;
    reject(i);
})
example
.catch(()=>{console.log('我是第一个catch的回调函数'); return 1;})
.then(() =>{console.log('我是第一个then的回调函数');    throw Error    })
.catch(()=>{console.log('我是第二个catch的回调函数')})
.then(() => {console.log('我是第二个then的回调函数')})

结果如下图:
ES6 Promiseにおけるthenとcatchの戻り値の例

调用reject函数后,promise变为rejected状态,故执行第一个catch的回调函数
第一个catch的回调函数return 1,故执行第一个then的回调函数
第一个then的回调函数throw Error,故执行第二个catch的回调函数
第二个catch的回调函数ruturn undefined(如上文所言),故执行第二个then的回调函数

簡単に言うと、戻り値に分かれています(戻り値が無い場合は未定義が返されます)は戻り値でもあります)throw errorreturn Promise

2. 戻り値と throw エラーについて説明します。

1. 戻り値の状況:


返された Promise は Fulfilled 状態になります。
戻り値は、新しい Promise オブジェクトの次の then コールバック関数のパラメーター値として使用されます。例を確認するにはコードを投稿してください。

rrreee

出力結果は次のとおりです:

fufill 関数を呼び出すと、戻り値が渡されます。コールバック関数

上記の質問に戻りますが、 に return がない場合、unknown を返します (つまり、関数は return なしで unfineed を返します)なので基礎がしっかりしている必要があります)rrreee

出力結果は以下の通りです:

2156426177-5b40aafad4116_articlex[1 ].png2.スローエラー状況:

返された Promise は Rejected ステータスになります、🎜次のステップは、catch または Then の 2 番目のコールバック関数パラメータ でコールバック関数を実行することです🎜🎜 以前混乱していたことがあります。 🎜この文をもう一度繰り返します: catch は、then の糖衣構文であり、then(null、rejection) の別名です。 🎜言い換えると、catch も then であり、エラーをキャッチするために使用され、そのパラメータは then の 2 番目のパラメータです。 🎜 したがって、戻り値 が catch にあると仮定すると、新しい Promise オブジェクトも受け入れられた状態になります。 🎜例を見てください: 🎜rrreee🎜結果は以下のようになります: 🎜ES6 Promiseにおけるthenとcatchの戻り値の例🎜🎜reject 関数を呼び出した後、Promise は拒否されるため、最初の catch のコールバック関数を実行します🎜コールバック最初のキャッチの関数は return 1 なので、最初の then のコールバック関数を実行します🎜最初の then のコールバック関数は throw Error、したがって、 は 2 番目の catch のコールバック関数を実行します🎜2 番目の catch のコールバック関数は、ruturn (上記のように) 未定義なので、2 番目のコールバック関数を実行しますthen🎜🎜3. return Promise の場合🎜🎜 return Promise の場合も、最初に Promise 構文に触れたときは、同じことが当てはまりました。 Promise オブジェクトを自動的に生成しますか? !その後、ソースコード解析の一部を読んで、なぜこうなったのかが大体分かりましたので、以下にリンクも貼っておきます🎜🎜新しく学んだ知識と実践を活かして、:🎜https://github.com/Joeoeoe/-i...🎜よく書かれていない点はご指摘ください笑🎜🎜以上がこの記事の全内容です、よろしくお願いします皆さんの学習に役立ちます。関連コンテンツをもっと見るには、PHP 中国語に注目してください。 🎜🎜関連する推奨事項: 🎜🎜🎜ES6 クラス継承とスーパーの概要🎜🎜🎜🎜jQuery-Ajax は Json データをリクエストし、それをフロントエンド ページにロードします🎜🎜🎜

以上がES6 Promiseにおけるthenとcatchの戻り値の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。