web-dev-qa-db-ja.com

ES6 Promisesを使用したjQuery ajax

私はES6プロミスを使用してjQuery経由で投稿リクエストを作成しようとしています：

私には機能があります：

getPostPromise(something, anotherthing) {
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: someURL,
      type: 'post',
      contentType: 'application/json; charset=utf-8',
      data: JSON.stringify(
        something: something,
        anotherthing: anotherthing
      }),
      dataType: 'json',
      success: resolve,
      error: reject
    });
  });
}

そして私はそれを次のように呼び出します：

getPostPromise(
  'someFooStuff',
  'someBarStuff'
).then(
  function(returnedData) {
    console.log("Good: ", returnedData);
  },
  function(responseObject) {
    console.log("Bad: ", responseObject);
  }
).catch(
  function(errorThrown) {
    console.log("Exception: ", errorThrown);
  }
);

私のサーバーは、要求本文がJSON形式であると期待どおりに応答を返していますが、コンソール出力は次のとおりです。

良い：未定義

返されたデータを取得できないのはなぜですか？

誰でも/助けてくれてありがとう。

---更新の編集---

私はjsを次のものに減らしました：

import $ from 'jquery';
$.get('http://localhost:8008/api/user')
  .done(function(data) {
    console.log(data);
  });

出力として未定義のままです。 [ネットワーク]タブで要求を開くと、正しいデータを含む応答オブジェクトが表示されます。要求が行われ、サーバーは満足して応答し、結果はブラウザーに表示されますが、doneのデータパラメーターは未定義です。私は困惑しています。

---アップデート2-ソリューションが見つかりました---

問題の原因は、CORSを回避するために https://github.com/jpillora/xdomain を使用していることです。そのライブラリは、何らかの形で値を返すことを台無しにしているように思えます。私はそれを削除し、CORSを適切に実装し、それをサポートしていないブラウザで地獄に行きます。

javascriptjqueryajaxcorses6-promise
27
Chad Befus

jQuery Ajaxメソッドはプロミス自体を返しますが、それらをラップする必要はありません。

もちろん、ES6 promise APIとの一貫性を保つためにそれを行うことができます。

[〜＃〜] update [〜＃〜]jQuery 3.0+は Promise/A + API を実装しているため、現代のjQueryで何かをラップする理由はもうありません。 バージョン3.0より前のjQueryのpromise実装の特性 を読んでください。

3.0より前のjQueryバージョンの場合、あなたが行った以上に分離します。

function ajax(options) {
  return new Promise(function (resolve, reject) {
    $.ajax(options).done(resolve).fail(reject);
  });
}

そして

ajax({
  url: someURL,
  type: 'post',
  contentType: 'application/json; charset=utf-8',
  data: JSON.stringify({
    something: something,
    anotherthing: anotherthing
  })
}).then(
  function fulfillHandler(data) {
    // ...
  },
  function rejectHandler(jqXHR, textStatus, errorThrown) {
    // ...
  }
).catch(function errorHandler(error) {
  // ...
});
32
Tomalak