How come I am unable to terminate this Angular HTTP request?

I've been trying to implement a solution for canceling HTTP requests in AngularJS by referring to this Stack Overflow post. Here's the code snippet I'm using:

var canceller = $q.defer();

$timeout(function() {
  canceller.resolve();
  alert("HTTP request failed.");
}, 5000);

$http({
  url: endpoint + "/encode",
  timeout: canceller.promise,
  data: {
    post: posts.post[id]
  }
}).success(successFunction);

However, my console keeps showing an error message saying

ReferenceError: timeout is not defined
. What am I missing here?

Answer №1

Unfortunately, without a plunker example, it's challenging to reproduce the issue. However, I was able to successfully halt an HTTP request using your code as a reference. Check out the Plunker here

Modified Controller.js

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $q, $http, $timeout) {

  $scope.message = 'Operation not completed';

  var canceller = $q.defer();

  $scope.performAction = function() {
    $timeout(function() {
      canceller.resolve();
      $scope.message = "Action canceled";
    }, 1);

    $scope.message = "Action performed";
    var url = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22nome%2C%20ak%22)&format=json&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys';
    var request = $http.get(url, { timeout: canceller.promise });
    request.success(function(results) {
      $scope.message = "Data loaded successfully";
      $scope.results = results;
    });
  }
});

view.html

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p>{{message}}</p>
    <a href="" ng-click="performAction()">Perform action</a>
    <p>
      {{results}}
    </p>
  </body>

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

Verify the existence of the email address, and if it is valid, redirect the user to the dashboard page

Here is the code snippet from my dashboard's page.jsx 'use client' import { useSession } from 'next-auth/react' import { redirect } from 'next/navigation' import { getUserByEmail } from '@/utils/user' export d ...

Combining strings and variables in Vue.js with the use of bootstrap-vue syntax

Hey, I'm facing a little syntax hiccup with '="collapse-{{ product.id }}"' in both the b-button and b-collapse. Any ideas on how to properly structure this? Just looking to set up a unique ID that connects the button to the collaps ...

Creating distinctive ng-form tags within a form using ng-repeat in Angular

I need help with creating a form that includes a table looping over a list of objects. Each object should have checkboxes for the user to check/uncheck attributes. The issue I am facing is setting the ng-model attribute on the checkboxes. This is what my ...

Creating a Typescript interface for a anonymous function being passed into a React component

I have been exploring the use of Typescript in conjunction with React functional components, particularly when utilizing a Bootstrap modal component. I encountered some confusion regarding how to properly define the Typescript interface for the component w ...

The Backbone.js template does not automatically inherit attributes from the model

Hey there, I'm currently working on setting up a simple SPA using Backbone for testing purposes. However, when I try to render my view, the Underscore template doesn't seem to be picking up any attributes from my model. I've been trying to t ...

Can we invoke a function through Ajax?

Apologies for my lack of experience, I am just getting acquainted with Ajax. Please bear with me if my question seems unrefined. I attempted to do something, but unfortunately, I did not achieve success. Let me explain what I was trying to accomplish: I ...

The function cannot be accessed during the unit test

I have just created a new project in VueJS and incorporated TypeScript into it. Below is my component along with some testing methods: <template> <div></div> </template> <script lang="ts"> import { Component, Vue } from ...

When a user clicks on a child element in ReactJS, the onclick event returns as undefined

I am experiencing an issue with my restaurants list component. While I have an onClick event set up for each list item, clicking on a child element of the list item does not trigger the expected response. When this occurs, nothing happens or I see an undef ...

Building an expansive navigation menu with react-bootstrap

My current project involves creating a mega menu. Although I successfully made a responsive navbar, the challenge now is to implement a dropdown panel with 100% width. I've tried various approaches but haven't found one that works. Note: The oth ...

PHP is unable to render Google Maps on the webpage

My PHP code retrieves location information from a database (test) and table named manu, created using phpmyadmin in Wamp. It then displays those locations on a map with markers, showing latitude and longitude values. UPDATED <? $dbname =&ap ...

Guide on changing the CSS of MUI parent components to set the display of buttons to 'block' in React

I'm facing a challenge with my modal design for mobile view. I need the buttons to display in a stacked format, one above the other, taking up the full width of the modal. I've been exploring ways to override the existing CSS within the component ...

Develop a video in mp4 format using Node.js and ffmpeg by combining two or more jpg images

I am currently working on a video animator project where I generate .jpg images from an html canvas tag and then use these images as frames for the video. The tool I am using for video generation is ffmpeg. Successful with Single Image const ffmpeg = req ...

Tips for streaming AWS Lambda response in nodeJS

I have a serverless AWS Lambda function that I need to trigger from my Node.js application and stream the response back to the client. Despite searching through the official documentation, I cannot find a straightforward way to achieve this. I am hoping to ...

When a function is passed as an argument in Javascript code, the setTimeout function may behave in unique ways

After running the code below, I noticed an interesting behavior: setTimeout(() => console.log('first'), 0) console.log('second'); As expected in JavaScript's asynchronous nature, the output was as follows: second first Howev ...

React: Issue with input values not correctly updating across multiple fields when changing state toggles

I am working on a React component that needs to update input values for multiple players independently. However, I am facing an issue where toggling a state causes the first input's value to incorrectly propagate to all other inputs. Additionally, cle ...

Error message: The method is not defined in the unit test of an Angular

I have been working on writing some unit tests for my existing AngularJS application. There are only a few methods in this particular service. While I managed to make getFollowUpList function properly, I am encountering issues with the refresh() method eve ...

Adding to and retrieving data from an array

I am relatively new to the world of JavaScript and jQuery, and I have spent the last three days working on a script. Despite my efforts to find a solution by searching online, I have been unsuccessful so far. It seems like my search skills are lacking. My ...

Generate Sub Menu for Navigation Bar based on Main Menu Selection

I'm currently working on dynamically setting menu items and sub menu items using React Props. My code successfully iterates through the main list items navItems.label and displays them. However, I'm facing an issue with displaying the sub menu i ...

Embed a Telegram account onto an HTML page using the <iframe> element

Is there a way to display the personal Telegram account in an iframe tag? I experimented with the code below, but unfortunately it did not produce the desired result: <iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe> ...

Safari not updating Angular ng-style properly

I created a simple carousel using Angular and CSS animations which works well in Chrome. However, I recently tested it in Safari and noticed that the click and drag functionality does not work. I've been trying to fix this issue for days and could use ...