javascript - Promise Angularjs 1.6 如何强制函数等待 api 响应

Question

我正在使用这个插件:http://www.codingdrama.com/bootstrap-markdown/

我想 Hook onPreview

因此，在 onPreview 上，我尝试进行 api 调用:

   app.directive("markdowntextarea",function ($http, $q) { // inject $q
    return {
        link: function (el_scope, element, attr) {
            element.markdown(
                {
                    autofocus: false,
                    savable: false,
                    onPreview: function (e) {
                        var deferred = $q.defer();
                        if (e.isDirty()) {
                            var originalContent = e.getContent();
                            $http({
                                url: '/api/markdown/',
                                data: {"body": originalContent, "actual_format": "md"},
                                method: 'POST'
                            }).then(function successCallback(response) {
                                console.log("successCallback", response.data.content);
                                deferred.resolve(response.data.content);
                            }, function errorCallback(response) {
                                console.log("errorCallback");
                                deferred.reject("error");
                            });
                        } else {
                            deferred.resolve("");
                        }
                        return deferred.promise;
                    }
                }
            );
        }
    }
});

控制台:

successCallback from api!!!

我从 api 得到了成功响应，response.data.content 就是我想要使用的。这里的问题是 return deferred.promise; 总是返回原始值。我在这里能做什么？我对 angularjs 真的很陌生

Answer 1

对于 Promise，您不能立即返回值，通常您返回称为 Promise 句柄的 Promise 对象，并使用“then”子句等待 Promise 解析(成功)或拒绝(失败)。

在您的情况下，如果您想等待响应然后执行某些操作，我建议您调用 onPreview 并使用其 then 子句，例如:

onPreview(e).then(function(response){}, function(error){});

onPreview 已经返回了应该可以使用的 Promise。

编辑后:

所以 onPreview 是 API 方法，需要一个文本而不是 promise ，现在你可以做的是定义一个函数，如 makePreview 或其他东西:

function makePreview(e) {
    var deferred = $q.defer();
    if (e.isDirty()) {
        var originalContent = e.getContent();
        $http({
            url: '/api/markdown/',
            data: {"body": originalContent, "actual_format": "md"},
            method: 'POST'
        }).then(function successCallback(response) {
            console.log("successCallback", response.data.content);
            deferred.resolve(response.config.data.body);
        }, function errorCallback(response) {
            console.log("errorCallback");
            deferred.reject("error");
        });
    } else {
        deferred.resolve("");
    }
    return deferred.promise;
}

然后你的 onPreview 应该如下所示:

autofocus: false,
savable: false,
onPreview: function (e) {
    makePreview(e).then(function(response){
        e.setContent(response);
        return response;
    }, function(error){
        return error;
    });
}

我希望这有帮助:)