如何等待一个函数在 angularJS 中完成它的执行？答案

【问题标题】：How to wait for a function to finish it's execution in angularJS?如何等待一个函数在 angularJS 中完成它的执行？
【发布时间】：2020-06-23 16:12:33
【问题描述】：

我有一个名为 validityCheck() 的函数，如果用户有效则返回 valid，如果用户无效则返回 invalid。我需要从其他地方调用这个函数并在if-else 条件下使用结果。

这是函数定义（这个函数定义在一个普通的javascript库名library.js）：

function validityCheck(userid, serviceid, system) {
    $(document).ready(function () {
        $.get("https:*******userValidation?serviceid=" + serviceid + "&userid=" + userid + "&system=" + system, function (data, status) {
            console.log(data);
            return data[0];
        });

    });
}

现在我想这样做（此代码部分在我项目的controller 中）：

var validity = validityCheck($scope.userid, serviceid, 'abc');
if(validity=="VALID"){
    //do something
}else{
    //do something
}

我需要等到我得到数据。我想我需要使用 callback_ 或类似的东西，但我不知道该怎么做。

【问题讨论】：

您不需要也不应该将检查放在 $.ready 中，将其定义在主范围中，或者更好地将其公开为服务。将代码包装在 promise 中以供重用。并且不要使用 $.get，而是使用 angular $http。如果可以，请避免使用 jquery
@SonNguyen 实际上函数validityCheck() 是一个javascript 函数并在library.js 中定义，这是一个普通的javascript 文件。我已经包含了那个库并且必须使用那个函数。
如果你打算只运行一次函数（$.ready 只触发一次）而不重用它，那么很好，但你需要修改代码以供你自己使用。如果您不熟悉 Promise，目前最快的方法是将结果检查插入函数中（在 console.log(data) 之后）
@SonNguyen 实际上我需要在我的项目中检查它。不能在函数 validityCheck() 中做到这一点

标签： javascript angularjs asynchronous

【解决方案1】：

为什么不返回 angularjs 的承诺 $http 并像这样在你的代码中使用 then？

function validityCheck(userid, serviceid, system) {
    let params = {
        userid: userid,
        serviceid: serviceid,
        system: system
    };
    let request = {
        url: "https:*******userValidation",
        method: "GET",
        headers: {"Content-Type": "application/x-www-form-urlencoded"},
        params: params
    };

    return $http(request).then((response) => {
        return response.data[0] ? response.data[0] : '';
    });
}

用法：

validityCheck($scope.userid, serviceid, 'abc').then((validity) => {
    if (validity === "VALID") {
        //do something
    } else {
        //do something
    }
});

附：不要忘记注入 angularjs $http

更新：在 Angular 中注册 library.js

(function () {
    "use strict";

    angular
        .module("yourAngularModuleName")
        .factory("LibraryFactory", LibraryFactory);

        function LibraryFactory($http) {
            // Add your functions here...
        }

})();

更新：使用现有代码的纯 JavaScript

function validityCheck(userid, serviceid, system) {
    return new Promise((resolve, reject) => {
        $.get("https:*******userValidation?serviceid=" + serviceid + "&userid=" + userid + "&system=" + system, function (data, status) {
            console.log(data);
            resolve(data[0]);
        });
    });
}

在我提供的 USAGE 中使用相同的代码。

【讨论】：

函数validityCheck($scope.userid, serviceid, 'abc')在javascript文件中定义。而且我实际上不知道如何在javascripthttp请求中使用promise。
因为我可以在您的代码中看到您正在使用 $scope，所以我可以说您已经在 Angular 模块中注册了 library.js。你能告诉我 library.js 的内容吗？
这里是场景，虽然我已经在问题中描述过：我已经明确了 javascript 库名称 library.js 其中定义了函数 validityCheck(userid, serviceid, system) 。现在，我已经在我的angularJS 项目中包含了library.js，并且我必须从我的项目中调用这个validityCheck(userid, serviceid, system) 函数并使用返回的结果。在library.js 中定义了两个函数，一个是validityCheck($scope.userid, serviceid, 'abc')，另一个是redTobaseURL()，它只是重定向到一个基本的url。
您是如何将 library.js 包含到您的 Angular 项目中的？你是否在你的 Angular 模块中将它注册为控制器、服务或工厂？
@Araf 我建议您将 library.js 注册到您的 Angular 应用程序中，以便您可以在 library.js 中使用它的功能。我已经更新了上面的答案以显示如何注册您的 javascript。