Exploring the variances among Angular promise objects

Can you explain the distinction between promise 1 and promise 2? The first one only has a $$state property, while the second one also includes error and success callbacks. What makes them different?

<div ng-app="app">
 <div ng-controller="TodoCtrl">

  </div>
 </div>




angular.module('app', [])
 .controller('TodoCtrl', function ($scope, $http) {
//promise 1    
console.log('p1',$http.get("/echo/json/").then(
  function(){ console.log('s1',arguments); }, 
  function(){ console.log('e1',arguments); }
 )
);

var p = $http.get("/echo/json/");
//promise 2
console.log('p2',p);
p.then(
  function(){ console.log('s2',arguments);}, 
  function(){console.log('e2',arguments);});
}
);

When checking the console log:

p1 Promise { $$state: Object }
   $$state: Object
   __proto__: Object
 p2 Promise { $$state: Object } 
      $$state: Object
      error: (fn) 
      success: (fn)
      __proto__: Object

Answer №1

When dealing with promises in your code, there are a few key points to keep in mind. In the first scenario, you make an HTTP request using $http.get("/echo/json/"), which returns a Promise. You then chain a "then" method with callbacks to this initial promise, creating a new promise. Only after the real result is returned will these callback functions be executed and your console output will display the new promise. On the other hand, in the second case, you first create a promise and log it without any additional callbacks. It's not until you apply a "then" method with callbacks to this promise that the callback functions will run upon receiving results. For more detailed information, refer to the Promise API documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Do the Push Notification APIs in Chrome and Firefox OS follow the same set of guidelines and standards?

Do Chrome and Firefox OS both use Push Notifications APIs that adhere to the same standard? If not, is either one moving towards standardization? ...

Invalid Domain Attribute - Cookie Setting

My project consists of a demo backend built using nodejs and a user interface created with reactjs. Upon logging in with my credentials, I encounter an issue with setting cookies. The error message displays "this. set-cookie domain attribute was invalid wi ...

Upon initializing mean.io assetmanager, a javascript error is encountered

I am eager to utilize the MEAN.io stack. I completed all the necessary initialization steps such as creating the folder, performing npm install, and obtaining the required libraries. Currently, in server/config/express.js file, I have the following code: ...

Only one request allowed per time unit

I am currently utilizing the React library for a project. My task involves retrieving data by typing in an input field. However, the challenge lies in only making a request once the user has finished typing. This means that I should wait until the user h ...

Issue with onClick in parallax.js and animate.css libraries

In my current project, I am utilizing both parallax.js and animate.css. My goal is to click on a specific red circle in order to trigger a function. However, I am encountering an issue where the click event does not seem to be working on any elements withi ...

Learn how to move to a new line when inputting data into a CSV file with JavaScript

My challenge involves taking an array of objects, for example: array=[hello, how, are, you], extracted from the document.innerHTML. I aim to write these objects to a CSV file using puppeteer and JavaScript, each on a new line. Although when using the sta ...

What could be the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

Trying to integrate Typescript into my react project and encountering a particular error: Type 'string' is not assignable to type 'Color | undefined'. The issue arises when I have the following setup... const foo = {stuff:"succes ...

Flickity remains in plain sight on desktop devices

I am trying to hide the flickity slider on desktop and larger devices. I have followed the instructions in the documentation, but for some reason, it's not working as expected. Here is how the div looks: <div class="w-full flex pl-4 pb-16 overflo ...

When the Bootstrap carousel slides, enhance the navbar text with motion blur effects

One issue I'm facing is that when the bootstrap carousel changes the image, it adds the class "next" (transform: translate3d(100%, 0, 0); ) to the item and causes motion blur in my navbar menu text. https://i.sstatic.net/kRnb4.png You can check out a ...

Syncing Google Map marker movement with MySQL database updates

I have implemented a Google map that displays positions with movable markers, with latitude and longitude information coming from a database. Now I need to update the database with new latitude and longitude values whenever a marker is moved. Can this be a ...

Transfer the HTTP functionality to a separate service using Angular2 and TypeScript

Currently diving into learning Angular2 and TypeScript after years of using Angular 1.*. I have a top level component that has a property derived from a custom type created in another class. When ngOnInit() is triggered, it makes an HTTP call to a mock RES ...

How can I stop a user from navigating through links or submitting forms using jQuery?

I'm exploring the idea of converting my website into a Single Page Application. One challenge I am facing is capturing the navigation process, for example: <a href="myData.php">Change My Data</a> When a user clicks on the "Change My Data ...

Show a nested outline when hovering over the main list item

I have a structured menu with nested lists for sub menus <nav> <ul> <li class="itm">A <ul> <li>One</li> <li>Two <ul> <li>Menu Item 1</li> ...

Waiting for JavaScript/Vue/Angular to finish loading using Selenium in Java

I am currently developing an automation tool for a website using Selenium in Java. To enhance the real automation process, I heavily rely on JavaScript with JavascriptExecutor. While things usually run smoothly, there are occasional crashes (around 1 out o ...

JavaScript versus Non-JavaScript Links and Forms: A Comparison

The other day, I posted a query that got me thinking: Comparing AJAX link with normal link It revolved around the idea of creating links that function for JavaScript-enabled browsers using AJAX, while also providing a normal link for non-JavaScript brows ...

The email link with a computed property is failing to display the entire message content

When creating a mailto link, I have encountered an issue where the email body is being cut off at around 200 characters, even though my total email length is 1500 characters. This happens despite being below the mailto limit. To address this problem, I hav ...

Exploring the depths of a JSON data structure

Newbie Alert: I'm dealing with a JSON response that triggers a .on('click') function and it looks like this: {"1411939719-8696.jpeg":true} My goal is to delete a row in a table based on the source of the call, but for some reason, it&apos ...

Creating HTML elements using Vue.js

Currently, I am facing an issue while attempting to render a template using the push mutation method. My goal is to push a section component, but instead of seeing the desired template content on my page, I am only getting the raw output of <vsection> ...

Using ng-repeat in Angular JS to generate forms

Having just recently delved into angular JS, I began working on it a mere week ago. Utilizing the Angular-UI Bootstrap Tabs directive in my application, upon load, a grid displaying a list of records is presented within a static tab. Once a user selects a ...

Testing the updated version 18 of Create React APP index.js using Jest

Previously, I had this index.js file created for React version <= 17. import React from 'react'; import ReactDOM from 'react-dom'; import App from './views/App'; import reportWebVitals from './reportWebVitals'; im ...