Question

我对javascript和angular还是陌生的。我的代码从API检索数据并可以将其打印到控制台，但是当我尝试将其分配给$scope.saveData时，它仅在提取内部起作用。我已经了解到我的问题与异步运行的代码和诺言的方式有关，但我似乎找不到任何能解决我的问题的资源。这是我的代码。

角度

angular.module('myApp',[])
.controller('testCtrl',['$scope',  function($scope){

   const response = await fetch("http://localhost:3000/conferences").then(res=>{
      // $scope.saveData = null;
        if(res.url == "http://localhost:3000/outlook"){
            res.json().then(data=> {
                window.location.replace(data.url)
            })
       }else{
           res.json().then(data=> {
            $scope.saveData = data
            console.log($scope.saveData)
           });
       }
   });
   console.log($scope.saveData)
}]);

html

<!DOCTYPE html>
<html ng-app = 'myApp'>
    <head>
        <title>Scheduled Calls</title>
        <link rel="stylesheet/less" type = "text/css" href="./scheduledCalls.less" />
    </head>
    <body>
        <header style="text-align: center">
            <h1 class = "header" >Scheduled Calls</h1>
        </header>
        <div ng-controller="testCtrl" >
            <p>{{saveData}}</p>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src = "scheduledCalls.js"></script>
    </body>
</html>

$scope.saveData = data下的console.log有效。不适用于js代码底部的console.log。

Answer 1

您要完成什么？为什么在回调内部记录$scope.saveData不够？

正如您提到的，问题是因为fetch是异步发生的。在.then(...)内部，可以确保已检索localhost:3000/conferences的内容。由于此调用是异步的，因此意味着代码可能会无序执行。正在发生以下情况：

（1）获取对localhost：3000 / conferences的调用

（2）console.log（$ scope.saveData）已执行（此值尚未分配）

（3）从fetch调用返回的结果将返回并执行.then（...）中的所有内容（此console.log（$ scope.saveData）可以正常工作，因为可以确保提取已完成

如果您绝对必须让代码等待获取结果，我建议您看看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

如何将获取数据分配给$ scope.variable

1 个答案: