2016-02-01 29 views
20

tôi đang cố gắng để thực hiện một yêu cầu bài qua jQuery sử dụng một lời hứa ES6:jQuery ajax với ES6 Promises

Tôi có một chức năng:

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 
    }); 
    }); 
} 

và tôi gọi nó là như vậy:

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

Máy chủ của tôi đang trả về phản hồi như mong đợi với phần thân yêu cầu ở định dạng JSON nhưng đầu ra bảng điều khiển của tôi là:

Tốt: undefined

Tại sao tôi không nhận được dữ liệu trả về?

Nhờ bất kỳ ai/mọi người giúp đỡ.

--- CẬP NHẬT EDIT ---

Tôi đã giảm js của mình tới chỉ:

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

tôi vẫn nhận được xác định là đầu ra. Nếu tôi mở yêu cầu trong tab mạng, tôi có thể thấy đối tượng phản hồi với dữ liệu chính xác. Yêu cầu được thực hiện, máy chủ của tôi rất vui và đáp ứng, và kết quả nằm trong trình duyệt của tôi nhưng thông số dữ liệu của thực hiện là không xác định. Tôi đang bối rối.

--- UPDATE 2 - GIẢI PHÁP FOUND ---

tôi phát hiện ra rằng vấn đề là với việc sử dụng: https://github.com/jpillora/xdomain để có được xung quanh CORS. Dường như thư viện đó sẽ tăng giá trị trở lại bằng cách nào đó. Tôi đã gỡ bỏ nó và sẽ thực hiện CORS đúng cách và địa ngục với các trình duyệt không hỗ trợ nó.

+1

tôi không thể tái tạo lỗi của bạn. –

Trả lời

27

Phương thức jQuery Ajax tự động trả lời, bạn không cần cần phải để bọc chúng.

Nhưng bạn có thể, tất nhiên, làm điều đó để nhất quán với API lời hứa ES6.

CẬP NHẬT jQuery 3.0+ thực hiện the Promise/A+ API, vì vậy không còn lý do gì để bọc bất kỳ thứ gì trong jQuery hiện đại. Đọc trên the peculiarities of jQuery's promise implementation prior to version 3.0.

Đối với phiên bản jQuery trước 3.0, tôi sẽ tách nó nhiều hơn bạn đã làm:

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

Bạn đã thử nghiệm đoạn mã của mình chưa? –

+0

@ elad.chen Nếu bạn có nghĩa là đi lạc '}' gây ra một lỗi cú pháp, đó là cố định, cảm ơn bạn. – Tomalak

+0

Tôi thích điều này, tôi sẽ kiểm tra nó khi tôi nhận được từ công việc và đánh dấu nó như được chấp nhận sau khi tôi xác nhận rằng nó là chính xác. Cảm ơn. –