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