Как сделать POST-вызов API с помощью Axios.js в JavaScript?

Опубликовано: 2 Августа, 2021

Axios - это HTTP-клиент на основе обещаний, разработанный для Node.js и браузера. С помощью Axios мы можем легко отправлять асинхронные HTTP-запросы к REST API и выполнять операции создания, чтения, обновления и удаления. Это совместный проект с открытым исходным кодом, размещенный на Github. Его можно импортировать в простой Javascript или, соответственно, в любую библиотеку.
Следующий scrpt src будет включать axios.js в заголовок вашего HTML-кода.

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

Когда мы отправляем запрос к API с помощью axios, он возвращает ответ. Объект ответа состоит из:

  • data: данные, возвращаемые сервером.
  • status: HTTP-код, возвращенный сервером.
  • statusText: статус HTTP, возвращаемый сервером.
  • заголовки: заголовки, полученные с сервера.
  • config: исходная конфигурация запроса.
  • запрос: объект запроса.

В целях демонстрации мы разместим API на локальном хосте:

 http://127.0.0.1:5000

Python Script: для запуска API вам потребуются следующие пакеты: flask, requests, jsonify, flask_cors . Код для Python API выглядит следующим образом:

  • Программа:




    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 )

Примечание. Вы можете разместить этот API, просто запустив указанный выше код Python.

Скрипт JS: включите axios.js и соответствующий файл JS в файл HTML. В файле JS напишите следующий код, который выполняет запрос POST с использованием axios к API. Для POST-запроса к API требуются следующие переменные:

  • path: путь к методу API.
  • queryObj: объект запроса, содержащий данные заголовка для вызова POST. Объект запроса имеет форму объекта Javascript. Например: {name: 'GeeksForGeeks', введите: 'Website'}.
  • Программа:




    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);
  • Вывод: он вызовет API с запросом POST, содержащим упомянутые данные заголовка. Полученный ответ будет отображаться в окне консоли .



Предыдущий
Как сделать GET-вызов API с помощью Axios в JavaScript?
Следующий
D3.js метод line ()
Рекомендуемые статьи
Страница :
Статья предоставлена:
chitrank_0614
@ chitrank_0614
Голосуйте за трудности
Теги статьи:
  • JavaScript-Разное
  • JavaScript
  • Node.js
  • Веб-технологии
  • Написать из дома
Сообщить о проблеме

РЕКОМЕНДУЕМЫЕ СТАТЬИ