Question

我希望能够将成功的jquery ajax调用中的数据发送到我的应用程序中的其他方法，因为它非常大并且编码意义上有一个api方法可以工作，所以我选择尝试promises。这是我的第一枪。我得到了一些好的结果，但显然我仍然对背景和时间有点困惑。

当我运行以下代码时，我无法将来自ajax调用的返回数据作为jquery对象包装而不会出现错误：

    var widgetSystem={       

       listenForClick: function(){
        $('div').on('click','a',function(){
            var $selectTarget = $(this),
                widgetid = $(this).data('widgetid');
                apiRequestData = widgetSystem.makeApiRequestForSingleWidget(widgetid);

            apiRequestData.then(function(result) {
                widgetSystem.showWidget(result);
            }).catch(function(e) {
                console.log('no way big error ' +e);
            });
        });
    },




    makeApiRequest: function(widgetid){

        return new Promise(function(resolve, reject) {
            $.ajax({
                method: "POST",
                url: "localhost",
                dataType: 'json',
                data: {
                    data: {
                       widgetId: widgetid
                    },
                    action: 'apiMethod'
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);
                    reject();
                },
                success: function (data) {
                    resolve(data);
                }
            });
        });
    },

    showWidget: function(data){
        $(data).appendTo('body');
        //this causes an exception in my apiRequestData.then function in listenForClick
    }

}

我正在运行未缩小的jquery并在我的控制台中收到以下错误：

没有大错误TypeError：context is undefined

Answer 1

我不确切知道您的HTML是什么样的或者API是如何设置的，但假设API工作正常并且通过POST发送的数据是正确的，我能够使用{ {1}} api包含以下代码（您可以在JSbin上找到它。）

jsonplaceholder

我不认为您在ajax var widgetSystem={ listenForClick: function(){ $('div').on('click','a',function(){ console.log('clicked'); var $selectTarget = $(this); var widgetid = $(this).data('widgetid'); widgetSystem.makeApiRequest(widgetid) .then(function(result) { widgetSystem.showWidget(result); return result; }) .catch(function(e) { console.log('no way big error ' +e); }); }); }, makeApiRequest: function(widgetid){ return new Promise(function(resolve, reject) { var root = 'http://jsonplaceholder.typicode.com'; $.ajax({ method: "POST", url: root+'/posts/', dataType: 'json', data: { userId:1, title:"Havanagila", body:"Testing the greatness" }, success: function(xData, status){ resolve(xData); //reject('whoops'); }, error: function(xhr, status, error){ reject(status); } }); }); }, showWidget: function(data){ $('#space').append(document.createTextNode(JSON.stringify(data))); } } widgetSystem.listenForClick()回调中调用resolve(data)的方式存在问题。发送到您的API的数据可能存在问题，因此会调用success回调，然后调用error并导致传递给reject的回调被调用而不是预期的回调传递给.catch。

为什么我不能在jquery对象中包装js promise resolve？

1 个答案: