如何在 JavaScript 中使用 Axios.js 对 API 进行 POST 调用？

Axios 是一个基于Promise 的 HTTP 客户端，专为Node.js和浏览器设计。使用 Axios，我们可以轻松地向 REST API 发送异步 HTTP 请求并执行创建、读取、更新和删除操作。这是一个托管在 Github 上的开源协作项目。它可以用纯 Javascript 或相应的任何库导入。
以下脚本 src 将在 HTML 代码的 head 部分中包含axios.js

当我们使用 axios 向 API 发送请求时，它会返回响应。响应对象包括：

data：服务器返回的数据。
status：从服务器返回的 HTTP 代码。
statusText：服务器返回的HTTP状态。
headers：从服务器获取的 headers。
config：原始请求配置。
request：请求对象。

出于演示的目的，我们将在 localhost 上托管一个 API：

http://127.0.0.1:5000

Python脚本：您将需要以下包来运行 API： flask、requests、jsonify、flask_cors 。 Python API 的代码如下：

程序：

Python3

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)

javascript

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);

注意：您可以通过简单地运行上述Python代码来托管此 API。
JS Script：在 HTML 文件中包含axios.js和对应的 JS 文件。在 JS 文件中，编写以下代码，使用 axios 向 API 发出 POST 请求。对 API 的 POST 请求需要以下变量：

path： API 方法的路径。
queryObj：查询对象，其中包含 POST 调用的标头数据。查询对象采用 Javascript 对象的形式。例如：{name:'GeeksForGeeks', type:'Website'}

程序：

javascript

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);

输出：它将使用带有上述标头数据的 POST 请求调用 API。获得的响应将在控制台窗口上获得。