Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:javascript:web-api [2021/09/02 17:02] – créée sgariepy
+++ web:javascript:web-api [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 6: / Ligne 6: @@
 <code js>
 const response = await fetch(urlOrRequest[, options]);
+</code>
+Le premier argument URL ou request (objet) est obligatoire.  Les options sont optionnels.
+Options de base:
+  * ''option.method'': ''GET'' par default, peut être d'autres verbes HTTP.
+  * ''option.body''
+  * ''option.headers''
+===== GET JSON data =====
+<code javascript>
+async function loadNames() {
+  const response = await fetch('/api/names');
+  const names = await response.json();
+  console.log(names); // [{ name: 'Joe'}, { name: 'Jane' }]
+}
+loadNames();
+</code>
+===== Explicitement demander du JSON =====
+<code javascript>
+const response = await fetch('/api/names', {
+  headers: {'Accept': 'application/json'}
+});
+</code>
+===== POST JSON data =====
+<code>
+async function postName() {
+  const object = { name: 'James Gordon' };
+  const response = await fetch('/api/names', {
+    method: 'POST',    body: JSON.stringify(object)  });
+  const responseText = await response.text();
+  console.log(responseText); // logs 'OK'
+}
+postName();
+</code>
+Pour spécifier qu'on envoie du JSON:
+<code>
+  body: JSON.stringify(object),  headers: {    'Content-Type': 'application/json'  }
+</code>
+===== Objet request =====
+<code javascript>
+const object = { name: 'James Gordon' };
+const request = new Request('/api/names', {
+  method: 'POST',
+  body: JSON.stringify(object),
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+const response = await fetch(request);
 </code>