How to make POST call to an API using Axios.js in JavaScript ?

Axios is a promise-based HTTP client designed for Node.js and browser. With Axios, we can easily send asynchronous HTTP requests to REST APIs and perform create, read, update and delete operations. It is an open-source collaboration project hosted on Github. It can be imported in plain Javascript or with any library accordingly.
The following scrpt src will include axios.js in the head section of your HTML code

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

When we send a request to the API using axios, it returns a response. The response object consists of:

  • data: the data returned from the server.
  • status: the HTTP code returned from the server.
  • statusText: the HTTP status returned by the server.
  • headers: headers obtained from the server.
  • config: the original request configuration.
  • request: the request object.

For the purpose of demonstration, we will be hosting an API on the localhost:

http://127.0.0.1:5000

Python Script: You will be requiring the following packages to run the API: flask, requests, jsonify, flask_cors. The code for the Python API is as follows:

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    from flask import Flask, jsonify, request
    from flask_cors import CORS
      
    app = Flask(__name__)
    CORS(app)
      
    @app.route('/test', methods =['POST'])
    def test():
       return jsonify({"Result": "Welcome to GeeksForGeeks, "
                                       +request.json['name']})
      
    if __name__ == '__main__':
        app.run(debug = True)

    chevron_right

    
    

Note: You can host this API by simply running the above python code.

JS Script: Include axios.js and the corresponding JS file in the HTML file. In the JS file, write the following code which makes a POST request using axios to the API. A POST request to the API requires the following variables:

  • path: The path to the API method.
  • queryObj: Query Object which contain the header data for the POST call. The query object is in the form of a Javascript object. For example: {name:’GeeksForGeeks’, type:’Website’}
  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    function makePostRequest(path, queryObj) {
        axios.post(path, queryObj).then(
            (response) => {
                var result = response.data;
                console.log(result);
            },
            (error) => {
                console.log(error);
            }
        );
    }
      
    queryObj = { name: 'Chitrank' };
    makePostRequest('http://127.0.0.1:5000/test', queryObj);

    chevron_right

    
    

  • Output: It will call the API with a POST request carrying the mentioned header data. The response obtained will be obtained on the console window.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.