ホームページ > 記事 > ウェブフロントエンド > ES6 Promiseにおけるthenとcatchの戻り値の例
この記事では主に ES6 Promise の then と catch の戻り値の例を紹介します。必要な方は参考にしてください。Catch は構文です。 then の糖分
then メソッドと catch メソッドの両方は Promise オブジェクトを返します
(はい、戻り値が特定の値であっても、エラーがスローされたり、値が返されなくても) ) then方法与catch方法均会返回一个Promise对象
(对,即使return 为某个值,或者throw error,或者不返回值)
我们来看看MDN的定义,这里可能为了严谨而说得有点乱七八糟的
简单来说,就是分为return 值(无return的情况下即返回undefined,也是返回值)
,throw error
, return Promise
返回的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); });
输出结果如下:
调用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);});
输出结果如下:
返回的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的回调函数')})
结果如下图:
调用reject函数后,promise变为rejected状态,故执行第一个catch的回调函数
第一个catch的回调函数return 1
,故执行第一个then的回调函数
第一个then的回调函数throw Error
,故执行第二个catch的回调函数
第二个catch的回调函数ruturn undefined(如上文所言)
,故执行第二个then的回调函数
戻り値に分かれています(戻り値が無い場合は未定義が返されます)は戻り値でもあります)
、throw error
、return Promise
2. 戻り値と throw エラーについて説明します。 1. 戻り値の状況:
返された Promise は Fulfilled
状態になります。
戻り値は、新しい Promise オブジェクトの次の then コールバック関数のパラメーター値として使用されます
。例を確認するにはコードを投稿してください。
出力結果は次のとおりです:
fufill 関数を呼び出すと、戻り値が渡されます。コールバック関数上記の質問に戻りますが、 に return がない場合、unknown
を返します (つまり、関数は return なしで unfineed を返します)なので基礎がしっかりしている必要があります)rrreee
Rejected
ステータスになります、🎜次のステップは、catch
または Then の 2 番目のコールバック関数パラメータ でコールバック関数を実行することです🎜🎜 以前混乱していたことがあります。 🎜この文をもう一度繰り返します: catch は、then の糖衣構文であり、then(null、rejection) の別名です。
🎜言い換えると、catch も then であり、エラーをキャッチするために使用され、そのパラメータは then の 2 番目のパラメータです。 🎜 したがって、戻り値
が catch にあると仮定すると、新しい Promise オブジェクトも受け入れられた状態になります。 🎜例を見てください: 🎜rrreee🎜結果は以下のようになります: 🎜🎜🎜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 サイトの他の関連記事を参照してください。