Je travaille sur un projet qui m'oblige à faire des requêtes à une API. Quelle est la forme appropriée pour faire une demande POST avec Async/Await?
À titre d'exemple, voici ma recherche pour obtenir une liste de tous les appareils. Comment pourrais-je changer cette demande en POST pour créer un nouveau périphérique? Je comprends que je devrais ajouter un en-tête avec un corps de données.
getDevices = async () => {
const location = window.location.hostname;
const response = await fetch(
`http://${location}:9000/api/sensors/`
);
const data = await response.json();
if (response.status !== 200) throw Error(data.message);
return data;
};
en fait, votre code peut être amélioré comme ceci:
pour faire un post, ajoutez simplement la méthode sur les paramètres de l'appel de récupération.
getDevices = async () => {
const location = window.location.hostname;
const settings = {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
}
};
try {
const fetchResponse = await fetch(`http://${location}:9000/api/sensors/`, settings);
const data = await fetchResponse.json();
return data;
} catch (e) {
return e;
}
}
Voici un exemple de configuration:
try {
const config = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
}
const response = await fetch(url, config)
//const json = await response.json()
if (response.ok) {
//return json
return response
} else {
//
}
} catch (error) {
//
}
N'oubliez pas d'éviter de combiner async/await
et then
voici un exemple:
const addDevice = async (device) => {
const { hostname: location } = window.location;
const settings = {
method: 'POST',
body: JSON.stringify(device),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}
const response = await fetch(`http://${location}:9000/api/sensors/`, settings);
if (!response.ok) throw Error(response.message);
try {
const data = await response.json();
return data;
} catch (err) {
throw err;
}
};