6

jqXHR や Promise が成功した場合に呼ばれる done(fn) の fn に渡される引数を、事前に変形できるでしょうか?

次のようなイメージです。

$.ajax(...)
    .???(function(originalResult) {
      // originalResult を変形して return
      return someTransform(originalResult);
    }).done(function(result) {
      // result には someTransform(originalResult) が渡される。
    });

3 件の回答 3

5

then がある:

$.get("/")
.then(function(originalResult){
    return "OK";
})
.done(function(result){
    //result === "OK"
});
2
  • 2
    このサイト上で $.get("/").then(function(originalResult) { return "OK"; }).done(function(result) { console.log(result === "OK"); }); を実行すると false と出るのでおかしいな、と思ったのですが、 jQuery のバージョンによって挙動が違うようですね。
    – kawty
    Commented 2014年12月16日 6:18
  • 1
    蛇足ですが then(function() { }) の中で Deferred/Promise を返すと、その Deferred/Promise が解決された値が done() で取得できます。 $.get('/') .then(function(originalResult) { return $.get('/something', { id: originalResult }); }) .done(function(result) { // result は '/something' へのリクエストの結果 }); Commented 2014年12月16日 9:35
2

Promiseといえば、.then()がPromiseのもっとも重要なメソッドで、まさにkawtyさんが求めているものです。

.then()メソッドは関数を受け取り、その関数が返す値を代表するPromiseを返します。例えば、

var d = $.Deferred();

d.promise().then(function (v) {
  snippet.log(v);                // 9
  return v * 2;
}).then(function (v2) {
  snippet.log(v2);               // 18
  return v2 + 7;
}).then(function (v3) {
  snippet.log(v3);               // 25
});

d.resolve(9);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

それだけではなくて、例え.then()へ渡す関数から別のPromiseを返しても、そのPromiseの中の値がちゃんと次の.then()に渡されます

var d = $.Deferred();

d.promise().then(function (v) {
  snippet.log(v);
  return v * 2;
}).then(function (v2) {
  snippet.log(v2);

  var d2 = $.Deferred();
  d2.resolve(v2 + 7);
  return d2.promise();
}).then(function (v3) {
  snippet.log(v3);
});

d.resolve(9);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>


ちなみに、このようなコードを書く必要はありません。

$.ajax(...)
.then(function(originalResult) {
  return someTransform(originalResult);
}).done(function(result) {
  // result には someTransform(originalResult) が渡される。
});

.then()に渡されている匿名関数はただoriginalResultをそのままsomeTransform()に渡しているので、この場合はsomeTransformを直接.then()に渡すことができるし、この方が読みやすいと思われることが多いです。

$.ajax(...)
.then(someTransform)
.done(function(result) {
  // result には someTransform(originalResult) が渡される。
});

そして最後に、jQueryのPromiseにはいくつかの問題点があり、あまり使わない方がいいという人が多いです。jqXHRを扱っている場合、早く別のPromiseライブラリ又はJS6の.when()メソッドに渡して、ちゃんとしたPromiseに変換した方がいいです。

1

ちょっと求められているのとは異なりますが、 以下のように wrapTransform() 関数を定義して、 done で呼び出すべき関数、をwrapTransform()の引数としてしまうという方法はどうでしょうか。

function wrapTransform(fn) {
  return function (originalResult) {
    return fn(someTransform(originalResult));
  }
}


$.ajax(...)
  .done(wrapTransform(function(result) {
    // result には someTransform(originalResult) が渡される。
  }));
1
  • 2
    今回は Promise から Promise の変形をしたいのです。
    – kawty
    Commented 2014年12月16日 6:11

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。