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

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 发送的数据是正确的，我能够使用 让它工作jsonplaceholder api 使用以下代码(您可以在 JSbin 上找到它)。

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()

我认为您在 ajax success 回调中调用 resolve(data) 的方式没有问题。发送到您的 API 的数据可能存在问题，因此调用了 error 回调，这又调用了 reject 并导致回调传递给 。 catch 被调用，而不是传递给 .then 的预期回调。