为什么我不能返回 $.ajax 结果但可以返回 $http.post 结果？

Question

我有 2 个返回语句：

return $http.post({ 
    url: CHEAPWATCHER.config.domain + 'api/Authenticate',
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    data: data
});

return $.ajax({
    type: 'POST',
    url: CHEAPWATCHER.config.domain + 'api/Authenticate',
    data: data
}).done(function (result) {
    console.log('logged successfuly');
}).fail(function (result) {
    console.log('loging failed');
});

还有我使用 API 方法的 background.js 函数：

// REGISTER API COMMAND LISTENER
chrome.runtime.onConnect.addListener(function (port) {
    port.onMessage.addListener(function (request, portInfo) {
        // Globally accessible function to execure API calls
        CHEAPWATCHER.executeApiCall = function (request, senderId) {
            var originalRequestMethod = request.method;
            //Dinamically call API method
            CHEAPWATCHER.api[request.method](request, senderId).then(function (response) {
                port.postMessage(response);
            }, function (error) {
                port.postMessage(error);
            });
        };
        CHEAPWATCHER.executeApiCall(request, request.sender);
    });
});

当然，当我运行我的 chrome 扩展程序时，我会评论其中一个，但关键是它们都返回相同的对象类型 jqXHR，如果我使用的是 $http.post，它会给我以下错误：

事件处理程序中的错误（未知）：TypeError：无法读取 null 的属性“错误”

和

POST chrome-extension://cmakfpdagfeiefcmmpmhjrtyhonmgnbi/background/[object%20Object] net::ERR_FILE_NOT_FOUND

当我使用 $.ajax 时，它可以工作，我得到了我需要的令牌，但它给了我这个错误：

事件处理程序中的错误（未知）：TypeError：无法读取 null 的属性“错误”

之后我的扩展程序无法继续工作。昨天我问为什么 $.ajax 给了我这个错误，我得到了答案，因为我不能返回 jqXHR 类型，但是如果我使用的是

return $http.post(CHEAPWATCHER.config.domain + 'api/Authenticate', data);

一切都很好，只是 post 方法需要我给他 grant_type=password 和 Content-Type application/x-www-form-urlencoded 所以这就是我使用 $http.post([settings]) 结构的原因。

谁能解释一下它们是如何工作的以及为什么我会收到这些错误？也许我使用的 post 方法不正确，或者我需要声明更多我不知道的东西？

Answer 1

您没有正确使用$http.post。此方法需要 3 个参数，而不是像这样的一个对象：

return $http.post(
   CHEAPWATCHER.config.domain + 'api/Authenticate',
   transformDataToUrlEncoded(data),
   {contentType: 'application/x-www-form-urlencoded; charset=UTF-8'}
});

如您所见，我放置了一个 transformDataToUrlEncoded。因为 Angular 只在 JSON 中序列化，所以他不会主动将 javascript 对象转换为 urlencoded。

---

来自超出主题的旧答案

$http.post 返回一个可以使用 .then 的承诺。 Angular promise 是可更改的，这意味着您可以一次又一次地执行 .then().then().then() 以对结果进行多层处理。当然你不需要那么频繁。我会说几乎永远不会超过 2 级：

1. 在服务层处理来自服务器的结果并格式化数据
2. 在控制器层中使用结果

我不太了解 JQuery，但我想那是它不能像 Angular 那样链接。

你应该可以的

.done().fail()

因为 .done 返回可以执行 .fail() 但不能执行的对象

.done().done(). 

因为 .done 返回的对象没有 .done() 方法。

最后 .fail() 是终止点：它什么也不返回，所以你返回空值。

---

Answer 2

所以经过大量的谷歌搜索和思考后，我找到了解决方案，也许有一天它可能会对某人有所帮助。安装了 $html.post() 和 $.ajax() 方法，我将我的数据转换为 x-www-form-urlencoded 作为@Walfrat 和@TheMadDeveloper 的建议，所以我现在可以完美运行的代码看起来像这样：

return $http({
    method: 'POST',
    url: CHEAPWATCHER.config.domain + 'api/Authenticate',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    transformRequest: function (obj) {
        var str = [];
        for (var p in obj)
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            return str.join("&");
        },
        data: data
    }).success(function (result) {
            console.log(result);
});

谢谢大家的帮助！！！