Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
809 views
in Technique[技术] by (71.8m points)

angular promise - How to use the axios library with AngularJS

Why axios callback changes are displayed in angularjs, without using $apply

I was trying axios library on angularjs and I was surprised when I saw that the changes to $scope in the axios callback were detected by angular. I thought I had to call $apply like, for example, when you use 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)

Do you know why $apply is not needed in axios?

EDIT:

A comment by georgeawg helped me see that I was using $http on another place, so I guess the digest cycle triggered by $http is helping axios callback to be "digested" too.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

How to use the axios library with AngularJS

Bring its ES6 promises into the AngularJS context using $q.when:

  // 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;
  });

Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

Also use the $timeout service instead of setTimeout.

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

The $timeout service is integrated with the AngularJS framework and its digest cycle.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...