Making an HTTP request using AngularJS takes significantly more time than directly accessing the endpoint through a web browser

I'm currently working on improving the functionality of a WordPress website using AngularJS. To achieve this, I am utilizing the WP-API (v2) plugin to create custom endpoints and consuming them on the front end with the Angular $http service.

Below is a snippet of the Angular request code:

function fetchData(slug) {
    return $http.get(endpoints.specialData.replace(':slug', slug)).then(function (response) {
        var data = response.data || {};
        return data;
    }, function (response) {
        return response;
    });
}

Upon inspecting the page where this call is made, I noticed that the XHR time is approximately 4.5 seconds (as per Chrome dev tools).

Interestingly, when directly accessing the same endpoint URL in the browser, the JSON result is returned in just 900ms. It's worth mentioning that the endpoint URL uses a relative path (/path/relative/from/site/root) instead of the full http:// path.

Any insights into why there might be such a significant delay when using Angular?

Answer №1

When it comes to debugging performance, it can be a unique challenge that requires patience and diligence. I am here to assist you on your journey towards finding the root cause of any slowdowns. One helpful tip is to utilize the Network tab in DevTools to troubleshoot the request and identify the specific issue causing the slowdown. For further guidance, I recommend reading this comprehensive article from Google: https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool

To summarize, if you notice a lot of green in your request, it may indicate a server-related problem, while blue could suggest that you are sending too many bytes and need to optimize your JSON.

By following these steps, you can gradually narrow down the potential causes of performance issues.

I wish you the best of luck!

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

The parameter '{ validator: any; }' cannot be assigned to the ValidatorFn type in this context

I am currently experiencing a challenge while attempting to create a custom validator using Angular. I have created a form for my sign-up page and wanted to ensure that the password and confirm password fields match by implementing a custom validator. Des ...

Prevent Button Click in ASP.NET After Validating Regular Expression in Textbox

How can I ensure that the asp button is disabled only after the user submits the form with the correct regular expression? Below is the form code: <asp:TextBox ID="TextBox2" runat="server" placeholder="Email" class="form-control" type="email" Font-Siz ...

Using HTML, jQuery, and JSON with an AJAX call to populate two web tables stacked on top of each other

I am encountering an issue with populating two tables using two searches based on user input in mySQL-JSON-AJAX. When the user enters a search term and clicks the corresponding button, data should populate the respective table. The problem arises when clic ...

Mastering JSON looping for each distinct group

I'm new to JavaScript and recently encountered an issue with JSON. Here is the object I am working with: var users = [ { "firstName":"John" , "lastName":"Doe" }, { "firstName":"Anna" , "lastName":"Smith" }, { "firstName":"Peter" , "lastName": ...

Ways to customize the TextInput component in React-Admin

I am facing a challenge with overriding specific fields in my custom theme. It seems that setting the custom theme also overrides other fields unintentionally. I attempted to use useStyles to resolve this issue, but unfortunately, it did not work as expec ...

What is the best way to retrieve the value of a nested function in JavaScript?

I am currently working on a project that involves a function. function findParentID(parentName) { Category.findOne({ categoryName: parentName }, function (err, foundParent) { var parentID = foundParent.categoryID;    return parentID;<br> } ...

Modify the `div` content based on the selected items from the bootstrap dropdown menu

My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...

Utilizing auto-generated Nonce for Content Security Policy in a Node.js/Express web application

I've exhausted all possible solutions in my attempt to create a nonce and pass it successfully to the CSP and inline scripts with the nonce variable. Despite reading numerous articles, the guidance on accomplishing this task remains vague. Fortunately ...

A step-by-step guide to implementing Google Analytics Event tracking using PHP

Implementing Google Analytics Events in Javascript can be done using the following code: ga('send', 'event', 'test', 'test','value'); I am trying to incorporate this feature throughout my entire project. ...

Issue: Module 'js' not found in Node.js Express application

I am currently working on a NodeJS express application. While developing, I encountered the following issue: Error: Cannot find module 'js' After researching online, I couldn't find a solution. The typical troubleshooting steps didn&ap ...

Utilize AngularJS ngResource to transmit JSON data to the server and receive a response

My Angular JS application requires sending data to the server: "profile":"OLTP", "security":"rsh", "availability":"4", "performance": { "TRANSACTION_PER_SEC":1000, "RESPONSE_TIME":200, "CONCURRENT_CONNECTION_COUNT":500, "STORAGE_SIZE": ...

Can you explain the functionality of the following Express router?

In the tutorial I am currently following, there are 2 router methods used to retrieve articles from the database. router.param('article', function(req, res, next, slug) { Article.findOne({ slug: slug}) .populate('author') .th ...

implementing automatic ajax requests when user scrolls

This is a piece of JavaScript code: $(window).scroll(function() { $.ajax({ type: "GET", url: "not_data.php", data: dataString, success: function my_func () { //show new name ...

What is the most effective way to ensure consistency of a unique identifier between AngularJS and the database?

In my Angular and Node application, a timeline of user events is displayed. Users have the ability to add, edit, and delete events. When a new event is added, AngularJS includes the event content as JSON in a timeline array for immediate display to the us ...

Discovering the flaw in my programming that pertains to JSON parsing

After countless hours of searching and reviewing documentation, I am still unable to identify the issue with my jQuery code. My goal is to practice reading a local JSON file and displaying its contents in the body of my HTML document. $(document).ready(fu ...

Error in React+Redux: Trying to access the "address" property of a null value is not permitted

I am new to using react and encountering an issue with my ecommerce app. The app runs smoothly until I log out and then log back in at the shipping address page, which triggers the following error: TypeError: Cannot read property 'address' of nu ...

What is stopping me from sending data via POST - Express?

I'm encountering an issue with Express [POST request]: I have developed server-side and client-side code to send data to both the terminal and the browser.. Unfortunately, I am unable to view the result of the post function!! Please assist me, I feel ...

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger screens: <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> ...

Looking to create a format for displaying short comic strips in a grid pattern

I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, b ...

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...