JavaScript で Promise オブジェクトを使用する方法-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript で Promise オブジェクトを使用する方法

不言

Dec 11, 2018 pm 04:38 PM

プロミスオブジェクト

Promise は、非同期処理の最終的な完了または失敗を表すオブジェクトです。promise を使用すると、非同期実行の成功と失敗の過程を明確にすることもできます。問題の原因を取り除くことができます。

JavaScript で Promise オブジェクトを使用する方法

Promise オブジェクトは、同時に非同期処理を実行することもできます。つまり、複数の非同期処理を順番に実行し、前の処理の結果を使用することができます。次の処理。

#JavaScript はコマンド文を順番に実行します。

たとえば、以下の 3 つの関数があり、sample2 関数の処理が遅れた場合、sample3 関数は処理されません。。

逐次実行されるJavaScriptプログラムの例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
<script>
var result = "正确。";
var doSomething1 = function() {
  console.log(&#39;处理没有出现问题１&#39; + result);
};
var doSomething2 = function() {
  console.log(&#39;出现错误 &#39; + result2);
};
var doSomething3 = function() {
  console.log(&#39;处理没有出现问题 ３&#39; + result);
};
doSomething1();
doSomething2();
doSomething3();
</script>
</body>
</html>

ログイン後にコピー

実行結果は以下のとおりです

JavaScript で Promise オブジェクトを使用する方法

JavaScriptコールバック関数

これとは対照的に、

これとは対照的に、一部のメソッドはページを読み取って順番に処理しません。

たとえば、ページを読み取った後、5秒後に実行できます。

このアクションは、ページが読み込まれ、他の処理が完了した 5 秒後に実行されます。

ページの読み取りの 5 秒後に実行されるプログラム

コードは次のとおりです

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
<script>
setTimeout(function() {
  alert(&#39;刚刚过去了5秒！&#39;);
}, 5000)
</script>
</body>
</html>

ログイン後にコピー

結果は次のとおりです。次のページ5秒後に表示されます

JavaScript で Promise オブジェクトを使用する方法

このように、ある処理が完了した後に呼び出される対応する関数のことをコールバックと呼びます。コールバック関数。

コールバック関数とプロミス

コールバック関数があると、コールバック関数を使用して非同期処理やその他の問題を簡単に解決することはできません。

これは、コールバック関数を使用して複雑な非同期処理を作成すると、コードが非常に複雑になるためです。

また、コールバック関数は非同期実行の結果を受け取るために使用され、その仕様は各ライブラリに依存します。

そこに現れるのは「約束」。

Promise を使用すると、非同期処理をより簡単に作成でき、結果を統一的かつ標準的に受け取ることができます。

利用環境

ブラウザによってはPromiseに対応していないものもありますので、ご利用の環境に対応しているブラウザがあるか事前にご確認ください。

Promise の役割

1. Promise を使用すると、現在処理中の JavaScript イベントループが完了する前に Promise が呼び出されないようにすることができます。これにより、実用的に順序を考慮した処理が可能となる。

2. Promise を使用すると、非同期処理が完了しても失敗した場合に、.then を使用してコールバックを登録することによって動作を保証することもできます。つまり、現在処理中の JavaScript イベントループの実行が完了するまで呼び出しは行われません。

3. .promise を使用すると、.then を複数回実装できます。つまり、複数のコールバック関数は、追加された順序で独立して実行されることが保証されます。

次に、

Promise の使用方法を見てみましょう

次の構文を使用して Promise を記述します。

new Promise( function(resolve, reject) { ... } );

ログイン後にコピー

実行順序は

function(resolve, reject) { ... }

ログイン後にコピー

が実行されました

new Promise

ログイン後にコピー

これから実行されます

function(resolve, reject)

ログイン後にコピー

Resolveは、処理が成功した場合、処理が失敗した場合はリジェクトを実行します。

具体的な例を見てみましょう

コールバック関数と同様に、5秒後に処理するプログラムを作成します。

コードは次のとおりです

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
<script>
function hidouki() {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve(&#39;异步执行成功&#39;);
        }, 5000);
    });
}
hidouki().then(function (value) {
  console.log(value);
}).catch(function (error) {
  console.log(error);
});
</script>
</body>
</html>

ログイン後にコピー

実行結果

JavaScript で Promise オブジェクトを使用する方法

以上がJavaScript で Promise オブジェクトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7470

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

Javaのコレクションフレームワークを効果的に使用するにはどうすればよいですか？ Mar 13, 2025 pm 12:28 PM

この記事では、Javaのコレクションフレームワークの効果的な使用について説明します。データ構造、パフォーマンスのニーズ、スレッドの安全性に基づいて、適切なコレクション（リスト、セット、マップ、キュー）の選択を強調しています。コレクションの使用を効率的に最適化します

初心者向けのタイプスクリプト、パート2：基本データ型 Mar 19, 2025 am 09:10 AM

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル（ES6によって導入）とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。ヌルデータ型 JavaScriptのように、Typescriptのnull

chart.js：パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。パイとリングチャートを作成しますパイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します

See all articles

JavaScript で Promise オブジェクトを使用する方法

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック