Javascript非同期プログラミングモデル Promiseモード詳細紹介_JavaScriptスキル

Promise プログラミング モードは thenable とも呼ばれ、遅延実行として理解できます。各 Promise には then と呼ばれる固有のインターフェイスがあり、Promise が失敗または成功したときにコールバックされます。これは、長時間実行される可能性がある操作の結果を表し、必ずしも完了する必要はありません。このパターンは、ブロックして長い操作が完了するのを待つ代わりに、約束された結果を表すオブジェクトを返します。

現在の多くの JavaScript ライブラリ (jQuery や Dojo、AngularJS など) には、Promise と呼ばれるこの抽象化が追加されています。これらのライブラリを通じて、開発者は実際のプログラミングで Promise パターンを使用できます。

以下では、例として jQuery を使用して、JavaScript ライブラリが Promise モードを使用して非同期処理を処理する方法について説明します。実際、jQuery はコールバックを通じてフォールト トレランス サポートを提供します。操作が成功または失敗したとき、またはいかなる状況下でも、対応するコールバックを実行し、特定のロジック部分で発生する可能性のあるすべての状況の処理を試みます。

まず、jQuery が一般的にどのように動作するかを見てみましょう:

コードをコピー コードは次のとおりです。

var $info = $("#info ");
$.ajax({
url:"/echo/json/",
データ: { json: JSON.stringify({"name": "someValue"}) },
タイプ: "POST",
成功: function(response)
{
$info.text(response.name);
}
});

この例では、設定が成功するとコールバックが指定されることがわかりますが、これは適切なコールバック メソッドであり、jQuery 公式ドキュメントではこのメソッドは推奨されていません (http:// api. .jquery.com/jQuery.ajax/#jqXHR)。 Ajax 呼び出しが完了すると、success 関数が実行されます。ライブラリで使用される非同期操作に応じて、さまざまなコールバックを使用できます (つまり、タスクが成功したかどうかに関係なく、応答するためにコールバックが作成されます)。 Promise パターンを使用するとこのプロセスが簡素化され、非同期操作ではオブジェクト呼び出しを返すだけで済みます。この Promise を使用すると、then というメソッドを呼び出すことができ、コールバック関数の数を指定できます。

jQuery が Promise を作成する方法を見てみましょう:

コードをコピーします コードは次のとおりです:

var $info = $("#info");
$.ajax({
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.then(function (応答) {
$info.text(response.name);
});

jQuery ajax オブジェクトは、xhr オブジェクトを返すことによって Promise モードを実装するため、then メソッドを呼び出すことができます。この利点は、以下に示すように呼び出しを連鎖して独立した操作を実現できることです。

コードをコピー コードは次のとおりです。

var $info = $("#info ");
$.ajax({
url: "/echo/json/",
データ: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.then(function (response) {
$info.text(response.name);
})
.then(function () {
$info.append("...続きを読む");
})
.done(function () {
$info.append (". ..ついに!");
});

多くのライブラリが Promise パターンを採用し始めているため、非同期操作が非常に簡単になります。しかし、逆の視点で考えてみると、Promiseはどのようなものになるでしょうか？非常に重要なパターンの 1 つは、関数が成功時のコールバックと失敗時のコールバックという 2 つの関数を受け入れることができるということです。

コードをコピー コードは次のとおりです:

var $info = $("#info");

$.ajax({
// URL を変更してエラーが発生することを確認します
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.then(function (response) {
// success
$info.text(response.name);
},
function () {
// 失敗
$info.text("良い開発者には悪いことが起こる");
})
.always(function () {
$info.append("...finally");
});

jQuery では、成功か失敗に関係なく、呼び出しを使用して呼び出したいものを指定することに注意してください。
実際、次のように記述することもできます。これは、jQuery の公式ドキュメントでも推奨されている方法です。

コードをコピー コードは次のとおりです。

var $info = $("#info ");

$.ajax({
// URL を変更してエラーが発生することを確認します
url: "/echo/json/",
data: {
json: JSON.stringify({
"name": "someValue"
})
},
type: "POST"
})
.done(function (response) {
// success
$info.text(response.name);
}).fail(function () {
// 失敗
$info.text("良い開発者には悪いことが起こる");
})
.always(function () {
$info.append("...finally");
});

AngularJS が Promise パターンをどのように使用するかを見てみましょう:

コードをコピー コードは次のとおりです。

var m = angular.module("myApp ", [ ]);

m.factory("dataService", function ($q) {
function _callMe() {
var d = $q.defer();
setTimeout(function () {
d.resolve();
//defer.reject();
}, 100); 🎜 > };
});

function myCtrl($scope, dataService) {
$scope.name = "None";
$scope.isBusy = true;
dataService.callMe()

.then(function ( ) {

JSFiddle でこれらの例を試して、何が起こるかを確認できます。 Promise を使用して非同期操作を行うのは非常に簡単な方法であり、コードも簡素化でき、まさに一石二鳥です。
Promise の詳細な紹介と例については、公式 Web サイト (http://www.promisejs.org/) をご覧ください。