Pending status persists for Axios post request

Here is a straightforward example of a POST request using Axios within Vue:

import axios from 'axios'
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    mounted () {
        const code = 'test'
        const url = 'http://localhost:3456/'
        axios.post(url, code, { headers: {'Content-type': 'application/x-www-form-urlencoded', } }).then(this.successHandler).catch(this.errorHandler)
    },
    methods: {
        successHandler (res) {
            console.log(res.data)
        },
        errorHandler (error) {
            console.log(error)
        }
    }
}

The GET method works fine. However, the POST request remains "Pending" in the Network tab. It has been verified that a POST method exists on the webservice and returns data (tested using Postman).

UPDATE

Sending code as a parameter:

axios(url, {
    method: 'POST',
    headers: {
        'content-type': 'application/json',
    },
    params: {
        code : 'test'
    },
}).then(this.successHandler).catch(this.errorHandler)

WEBSERVICE

server.post('/', (req, res, next) => {
    const { code }  = req.params

    const options = {
        validate: 'soft',
        cheerio: {},
        juice: {},
        beautify: {},
        elements: []
    }

    heml(code, options).then(
        ({ html, metadata, errors }) => {
            res.send({metadata, html, errors})
            next()      
        })
})

Answer №1

It seems like there might be a problem with the structure of your axios request. Give this a try:

const API_URL = *YOUR_API_URL*;
axios(API_URL, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    data: *YOUR_DATA_PAYLOAD*,
  })
    .then(response => response.data)
    .catch(error => {
      throw error;
    });

If you need to send a query parameter:

axios(API_URL, {
    method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
    params: {
     param: 'your_value'
    },
  })

If it's a path variable, make sure to set the URL correctly:

const url = `http://localhost:8000/${variable}`

Please let me know if you're still facing any issues.

Answer №2

After encountering a similar issue, I found that the network call was constantly pending. By passing the response back from server.js (route file) like this: res.json(1);, I managed to resolve the problem effectively.

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

Establish Angular data for all fields in the form

Being a beginner in Angular, I'm struggling with creating a form to update user information. Here's a snippet of my controller: // Fetch organization data from the database dataService.allOrganization().then(function ...

Automatically modify browser configurations to disable document caching

Is it possible to prevent browsers from caching pages using JavaScript? I've noticed that even though PHP has a redirection implemented once the user logs in, when they press the browser's history button, it goes back to the login form. This is b ...

Tips for managing a selection modification within a personalized JQuery component?

I have successfully created a widget using the JQuery factory which includes an option that can be modified post creation. How do I go about handling changes to this option? Are there any events or methods available for this specific purpose? I envision ...

Exploring the integration of Passport SAML authentication for a seamless experience across both the backend Node (Express) and client Vue

I have a unique situation where I have developed an application with a Node (Express) backend, and a Vue client. Recently, I decided to implement SAML Single Sign-On (SSO) using passport for authentication. While everything works perfectly within the Expre ...

The HTML and script tags are failing to connect

I recently started learning angularjs by watching the Egghead.io videos. However, I encountered an issue where I couldn't link my JavaScript page to my HTML page. my-index.html <!DOCTYPE html> <html> <head> <title>Angular ...

Meteor chat platform now offers the option to create multiple chat rooms

I've been working on an application that features multiple chat rooms. Currently, one of the rooms is functional in terms of sending and receiving messages. However, when I navigate to a different room and try to send a message, the message doesn&apos ...

Obtain value of dropdown selection upon change

What is the best way to retrieve the selected value in a drop-down menu when the ID dynamically changes with each refresh? Is it possible to access the particular selected value even when the ID changes? <select name="status" id="dropdown_status3352815 ...

Retrieve the text contained within a specific element's paragraph

Is there a way to extract the text content from a <p> tag that is located within an <li> element? Sample HTML code: <ul> <li onclick="myfunction()"> <span></span> <p>This Text</p> </li> &l ...

How can GraphQL facilitate JOIN requests instead of multiple sequential requests?

I am working with two GraphQL types: type Author { id: String! name: String! } type Book { id: String! author: Author! name: String! } In my database structure, I have set up a foreign key relationship within the books table: table authors (e ...

Customizing Event Colors in FullCalendar by Comparing Dates

Recently, I began experimenting with arshaw's fullcalendar. Throughout the development process, I scoured websites for solutions on how to change event colors based on both the event dates and the current date. This HTML, PHP, and Javascript code is t ...

Error encountered while testing karma: subscription function is not recognized

I encountered an issue with my karma unit test failing with the following error message. "this.gridApi.getScaleWidth().subscribe is not a function" GridApi.ts export class GridApi { private scaleWidthSubject = new BehaviorSubject<{value: number}& ...

Utilizing Vector3 for Parametric Geometry calculations

As I update a script to a newer version of three.js, I encountered an issue with ParametricGeometry. The error message "THREE.ParametricGeometry: Function must now modify a Vector3 as third parameter" keeps appearing. Below is the section of code causing t ...

What is the best method for transferring state between a page and a component, and then back to the page

Is there a way to manage state without using Redux in my home.js page (using hooks, not classes), so that I can set/use a state, pass it to my component MyComponent.js, and update the state when a div is clicked inside this component (reflecting the change ...

Unlock the Power of Sockets in JavaScript and HTML

How can I work with sockets in JavaScript and HTML? Could HTML5 features be helpful? Are there any recommended libraries, tutorials, or blog articles on this topic? ...

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

stop bootstrap collapse from re-activating when an item is clicked

I'm currently facing an issue with my sidebar that is implemented using bootstrap collapsible. The menus are all in tags, but the problem arises when I click on one of these tags - the page refreshes, re-animating the collapsible panel and creating a ...

Add a fresh listing arranged alphabetically using either JavaScript or jQuery

I currently have a set of lists that are already alphabetically sorted. For example: <ul> <li><a href='#'>Apple</a></li> <li><a href='#'>Banana</a></li> <li><a href=& ...

The method for organizing boxes on the stack exchange website's list page

I can't help but wonder about a unique and innovative feature on this stackexchange page that showcases all the stackexchange sites in a grid layout. Upon clicking on a site box, it expands in size while the surrounding boxes adjust their positions t ...

Unable to backtrack once a response has been sent

My Express application keeps crashing after sending a response to the client. It appears that the code continues to run even after the response has been returned. Can you please review the code snippet provided below? const EditUser = async (req, res) => ...

Instructions for connecting a camera to a bone or vertices on a model in A-Frame without influencing its rotation

How can I attach a first-person camera to the head of an animated GTLF model? My plan is to eliminate the model's head and combine the neck into one vertex to avoid obstructing the camera. I am curious about the process of attaching my camera to the v ...