如何在AxularJS中使用axios库

Question

为什么axios回调更改显示在angularjs中，而不使用$ apply

我在axios上尝试了angularjs库，当我看到axios回调中$scope的变化被角度检测到时，我感到很惊讶。例如，当您使用$apply时，我认为必须调用setTimeout。

  // axios example
  axios.get(url).then((response) => {
    // Here I don't need $apply, why??
    $scope.axiosResult = response.data;
  });


  // setTimeout example
  setTimeout(() => {
    // Here I need $apply for the timeoutResult to appear on the HTML
    $scope.$apply(() => $scope.timeoutResult = {message: "timeout!"});
  }, 2000)

你知道为什么axios不需要$apply吗？

编辑：

A comment by georgeawg帮助我看到我在另一个地方使用$http，所以我认为$http触发的摘要周期正在帮助axios回调“消化”。

Answer 1

如何将axios library与AngularJS

一起使用

使用$q.when：

将其ES6承诺带入AngularJS上下文

  // axios example
  ̶a̶x̶i̶o̶s̶.̶g̶e̶t̶(̶u̶r̶l̶)̶.̶t̶h̶e̶n̶(̶(̶r̶e̶s̶p̶o̶n̶s̶e̶)̶ ̶=̶>̶ ̶{̶
  $q.when(axios.get(url)).then((response) => {
    $scope.axiosResult = response.data;
  });

只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定，异常处理，属性监视等。

同时使用$timeout service代替setTimeout。

  $timeout(() => {
    $scope.timeoutResult = {message: "timeout!"});
  }, 2000)

$timeout服务与AngularJS框架及其摘要周期集成在一起。