問題描述

我正在嘗試使用 ES6 承諾通過 jQuery 發出發布請求:

I am trying to make a post request via jQuery using an ES6 promise:

我有一個函數:

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 格式，但我的控制臺輸出為:

My server is returning a response as expected with the request body being in JSON format but my console output is:

好:未定義

為什么我沒有收到返回的數據?

Why am I not getting the returned data?

感謝任何人/每個人的任何幫助.

Thanks to anyone/everyone for any help.

--- 更新編輯 ---

--- UPDATE EDIT ---

我已將我的 js 縮減為:

I have reduced my js to only:

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

我仍然得到未定義的輸出.如果我在網絡選項卡中打開請求，我可以看到帶有正確數據的響應對象.發出請求，我的服務器很高興并做出響應，結果在我的瀏覽器中，但 done 的數據參數未定義.我被難住了.

I still get undefined as output. If I open up the request in the network tab I can see the response object with the correct data. The request is made, my server is happy and responds, and the results are in my browser but the data parameter of done is undefined. I am stumped.

--- 更新 2 - 找到解決方案 ---

--- UPDATE 2 - SOLUTION FOUND ---

我發現問題在于使用:https://github.com/jpillora/xdomain繞過CORS.似乎該庫以某種方式搞砸了傳回值.我已將其刪除，并將正確實施 CORS，并且在不支持它的瀏覽器上見鬼.

I discovered that the problem was with using: https://github.com/jpillora/xdomain to get around CORS. It would seem that that library screws up passing back values somehow. I have removed it and will implement CORS properly and to hell with browsers that don't support it.

推薦答案

jQuery Ajax 方法本身返回 Promise，你根本不需要 包裝它們.

jQuery Ajax methods return promises themselves, you don't need to wrap them at all.

當然，您可以這樣做以與 ES6 Promise API 保持一致.

But you can, of course, do it for consistency with the ES6 promise API.

更新 jQuery 3.0+ 實現了Promise/A+ API，所以沒有理由不再用現代 jQuery 包裝任何東西.閱讀jQuery 3.0 之前的 promise 實現的特性.

UPDATE jQuery 3.0+ implements the Promise/A+ API, so there is no reason anymore to wrap anything in modern jQuery. Read up on the peculiarities of jQuery's promise implementation prior to version 3.0.

對于 3.0 之前的 jQuery 版本，我會比你更解耦:

For jQuery versions before 3.0, I would decouple it more than you did:

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) {
  // ...
});

這篇關于帶有 ES6 Promises 的 jQuery ajax的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！