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

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

我想钩上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的新手

最佳答案

使用promise不能一次返回值，通常会返回称为promise handle的promise对象，并使用“ then”子句来等待promise解析（成功）或拒绝（failure）。

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

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

onPreview已经在返回应有的承诺。

编辑后：

因此onPreview是一种API方法，并且期望文本不被允许，现在您可以定义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;
    });
}

我希望这有帮助 ：）