[PYTHON] Créez une application simple qui intègre l'API Fetch pour les requêtes Ajax dans Flask et expliquez-la rapidement.
introduction
・ Pour ceux qui ont commencé à étudier Flask et JavaScript -Utilisez TheCatAPI.com: Beta pour créer une application qui récupère des images de chats dans les requêtes Ajax.
Créez une application Flask pour obtenir des images de chats avec l'API Fetch
Préparez le flacon. Si vous n'êtes toujours pas sûr de Flask, consultez l'article ci-dessous. [Probablement le deuxième framework d'application Web le plus populaire en Python] Résumez les bases de Flask de manière facile à comprendre
La configuration est la suivante.
app.py
templates
└─hello.html
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('hello.html')
if __name__ == "__main__":
app.run(debug=True)
hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<h1>hello</h1>
</head>
<body>
</body>
</html>
Lorsque vous démarrez Flask ci-dessus, l'écran suivant apparaît dans le navigateur.
La version qui atteint l'API en JavaScript
Maintenant, affichons l'image du chat avec l'API Fetch. Cliquez sur le bouton pour afficher l'image du chat.
Le code HTML complet est ci-dessous
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello</title>
<style>
.w300 {
width: 300px;
}
</style>
</head>
<body>
<form id="form">
<div id="image"></div>
<button id="lookCatButton" type="button">Voir le chat</button>
</form>
<script>
const url = 'https://api.thecatapi.com/v1/images/search?size=full';
const options = {
method: 'GET'
}
function getCatImage(url, options){
return fetch(url, options)
.then( response => response.json() );
}
async function getImage(url, options){
const response = await getCatImage(url, options);
const imageDiv = document.getElementById("image");
const imageElement = document.createElement("img");
imageElement.src = response[0].url;
imageElement.className = "w300";
imageDiv.appendChild(imageElement);
}
document.getElementById("lookCatButton")
.addEventListener("click", () =>{
getImage(url, options)
})
</script>
</body>
</html>
La description
L'API Fetch vous permet de définir la destination de la requête ** URL ** et les secondes ** options ** comme premier argument. Cette fois, définissez l'URL et les options comme suit.
.js
const url = 'https://api.thecatapi.com/v1/images/search?size=full';
const options = {method: 'GET'};
Dans les options, spécifiez GET comme méthode de demande. Si vous souhaitez en savoir plus sur les options, veuillez vous reporter à ce qui suit. https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch
Puisque la valeur de retour de fetch est retournée par promise, vous pouvez utiliser la méthode **. Then () **. Je vais. Et comme la fonction de rappel peut être utilisée dans **. Then () **, omit () car il y a un ** argument dans ** arrow function **, et omit {} car c'est la seule instruction renvoyée. **.
.js
fetch(url, options)
.then( response => response.json() );
Si vous l'écrivez avec la fonction flèche qui n'est pas omise, ce sera comme suit.
.js
fetch(url, options)
.then( (response) => {
return response.json()
});
Lorsque vous utilisez fetch, le code écrit après peut être exécuté avant que la demande ne soit envoyée et que la réponse soit renvoyée. Par conséquent, ** asyn / await ** est utilisé pour exécuter l'extraction et exécuter le code suivant une fois la réponse renvoyée.
Définissez une ** fonction asynchrone ** et ajoutez ** await ** à la fonction qui utilise fetch et placez-la dans une variable. C'est la partie suivante
.js
async function getImage(url, options){
const response = await getCatImage(url, options);
Après cela, l'URL de l'image du chat s'affiche sous la forme appendChild.
Puisque la série de processus est exécutée après avoir cliqué sur le bouton, elle est exécutée lorsque ** click ** est fait avec ** addEventListener **.
.js
document.getElementById("lookCatButton")
.addEventListener("click", () =>{
getImage(url, options)
})
Désormais, chaque fois que vous appuyez sur le bouton, l'image du chat sera affichée.
Osez frapper l'API côté python
Comme mentionné ci-dessus, fetch nécessite que l'URL envoie la requête au premier argument, donc ** créez l'URL de destination de la requête avec le routage Flask **. Par conséquent, le code pour obtenir les données de l'API Neko-chan et ** return ** avec jsonify pour vider avec json lors du retour en tant que réponse.
J'ai fait le code suivant. ** / get_data ** est ajouté.
from flask import Flask, render_template, jsonify
import requests
app = Flask(__name__)
@app.route('/get_data')
def get_data():
url = 'https://api.thecatapi.com/v1/images/search?size=full' #API Neko-chan
response = requests.get(url)
cat_img_url = eval(response.text)[0]['url'] #Obtenez l'URL de l'image ici
response_data = {
'cat_img_url' : cat_img_url
}
return jsonify(response_data) #Revenir côté js avec jsonify
@app.route('/')
def hello_world():
return render_template('hello.html')
if __name__ == "__main__":
app.run(debug=True)
Du côté JavaScript, remplacez l'URL de la destination de la requête par **. / Get_data ** de la destination de routage que vous avez définie précédemment.
.js
const url = './get_data';
Puisque la valeur sauvegardée dans json est entrée à partir de python, obtenez le "cat_img_url" défini du côté python.
.js
imageElement.src = response.cat_img_url;
Tout le reste est le même et le code global est le suivant.
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.w300 {
width: 300px;
}
</style>
</head>
<body>
<form id="form">
<div id="image"></div>
<button id="lookCat" type="button">Voir le chat</button>
</form>
<script>
const url = './get_data';
const options = {
method: 'GET'
}
function getCatImage(url, options){
return fetch(url, options)
.then( response => response.json() );
}
async function getImage(url, options){
const response = await getCatImage(url, options);
const imageDiv = document.getElementById("image");
const imageElement = document.createElement("img");
imageElement.src = response.cat_img_url;
imageElement.className = "w300";
imageDiv.appendChild(imageElement);
}
document.getElementById("lookCat")
.addEventListener("click", () =>{
getImage(url, options)
})
</script>
</body>
</html>
Désormais, lorsque vous cliquez sur le bouton, vous pouvez obtenir l'image et l'afficher côté python.
D'ailleurs, si vous accédez directement à la destination de routage ajoutée cette fois, le contenu suivant sera affiché.
en conclusion
Cette fois, j'ai essayé de récupérer la requête et la réponse avec deux modèles, l'un demandant du côté python et l'autre demandant du côté JavaScript, ce qui était très bon pour organiser mon esprit.
Les références
Notes sur la dernière communication de requête Ajax et Fetch API [Probablement le deuxième framework d'application Web le plus populaire en Python] Résumez les bases de Flask de manière facile à comprendre MDN web docs - Fetch API Documents Web MDN - Utilisation de Fetch Documents Web MDN - Fonction de rappel Documents Web MDN - Fonctions de flèche MDN web docs - async function