[{"data":1,"prerenderedAt":574},["ShallowReactive",2],{"page-\u002Fapi\u002Fcomprendre-les-api":3,"pieces-api":529,"autour-\u002Fapi\u002Fcomprendre-les-api":554,"prerequis-\u002Fapi\u002Fcomprendre-les-api":559,"plan-api":563},{"id":4,"title":5,"body":6,"description":496,"extension":497,"ligne":498,"meta":499,"motsCles":500,"navigation":502,"niveau":503,"path":504,"prerequis":505,"ressources":507,"seo":519,"sources":520,"stem":527,"__hash__":528},"docs\u002Fapi\u002F01.comprendre-les-api.md","Comprendre les API",{"type":7,"value":8,"toc":487},"minimark",[9,14,27,31,48,66,70,85,95,98,104,107,130,151,155,162,267,270,302,315,319,326,362,365,381,386,390,393,453,459,463,483],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Ce qu'est une API et pourquoi un site en a besoin.",[18,22,23],{},"À quoi ressemblent une requête et une réponse HTTP.",[18,25,26],{},"Lire du JSON et observer un échange réel dans les outils du navigateur.",[10,28,30],{"id":29},"une-api-cest-un-guichet","Une API, c'est un guichet",[32,33,34,35,39,40,43,44,47],"p",{},"Une ",[36,37,38],"strong",{},"API"," (interface de programmation) est un ensemble d'adresses auxquelles un programme peut poser des questions et obtenir des réponses. Le programme qui demande s'appelle le ",[36,41,42],{},"client",", celui qui répond le ",[36,45,46],{},"serveur",".",[32,49,50,51,55,56,59,60,65],{},"Ton site de recettes en a besoin : la page ",[52,53,54],"code",{},"\u002Frecettes"," ne contient pas les recettes, elle les demande à une API. Tu as déjà fait ce geste avec ",[52,57,58],{},"useFetch"," dans le cours ",[61,62,64],"a",{"href":63},"\u002Fnuxt\u002Frecuperer-des-donnees","Récupérer des données",". Ici, on regarde ce qui voyage vraiment.",[10,67,69],{"id":68},"une-requête-et-une-réponse","Une requête et une réponse",[32,71,72,73,76,77,80,81,84],{},"Le langage de cet échange s'appelle ",[36,74,75],{},"HTTP",". Le client envoie une ",[36,78,79],{},"requête",", le serveur renvoie une ",[36,82,83],{},"réponse",". Voici une requête, telle qu'elle part :",[86,87,92],"pre",{"className":88,"code":90,"language":91},[89],"language-text","GET \u002Fapi\u002Frecettes\u002F2 HTTP\u002F1.1\nHost: monsite.fr\nAccept: application\u002Fjson\n","text",[52,93,90],{"__ignoreMap":94},"",[32,96,97],{},"Et la réponse du serveur :",[86,99,102],{"className":100,"code":101,"language":91},[89],"HTTP\u002F1.1 200 OK\nContent-Type: application\u002Fjson\n\n{ \"id\": 2, \"titre\": \"Ratatouille\", \"duree\": 60 }\n",[52,103,101],{"__ignoreMap":94},[32,105,106],{},"Un message HTTP a toujours la même forme, d'après MDN :",[108,109,110,113,124,127],"ol",{},[18,111,112],{},"une ligne de départ (la méthode et l'adresse pour une requête, le code de statut pour une réponse) ;",[18,114,115,116,119,120,123],{},"des ",[36,117,118],{},"en-têtes",", des lignes ",[52,121,122],{},"Nom: valeur"," qui décrivent le message ;",[18,125,126],{},"une ligne vide ;",[18,128,129],{},"un corps, facultatif, qui contient les données.",[131,132,133],"note",{},[32,134,135,136,139,140,143,144,147,148,47],{},"Dans la requête ci-dessus, ",[52,137,138],{},"GET"," est la ",[36,141,142],{},"méthode"," (l'action demandée) et ",[52,145,146],{},"\u002Fapi\u002Frecettes\u002F2"," l'adresse. Le cours suivant détaille les méthodes et les codes comme ",[52,149,150],{},"200",[10,152,154],{"id":153},"le-json-le-format-des-données","Le JSON, le format des données",[32,156,157,158,161],{},"Le corps de la réponse est écrit en ",[36,159,160],{},"JSON"," (JavaScript Object Notation), un format texte pour décrire des données. Il ressemble à un objet JavaScript, avec des règles plus strictes.",[86,163,167],{"className":164,"code":165,"language":166,"meta":94,"style":94},"language-json shiki shiki-themes github-light-default github-dark-default github-dark-default","{\n  \"id\": 2,\n  \"titre\": \"Ratatouille\",\n  \"duree\": 60,\n  \"vegetarien\": true,\n  \"ingredients\": [\"aubergine\", \"courgette\", \"tomate\"]\n}\n","json",[52,168,169,178,195,209,222,235,261],{"__ignoreMap":94},[170,171,174],"span",{"class":172,"line":173},"line",1,[170,175,177],{"class":176},"scfrF","{\n",[170,179,181,185,188,192],{"class":172,"line":180},2,[170,182,184],{"class":183},"s5JFL","  \"id\"",[170,186,187],{"class":176},": ",[170,189,191],{"class":190},"s5iOY","2",[170,193,194],{"class":176},",\n",[170,196,198,201,203,207],{"class":172,"line":197},3,[170,199,200],{"class":183},"  \"titre\"",[170,202,187],{"class":176},[170,204,206],{"class":205},"shWOn","\"Ratatouille\"",[170,208,194],{"class":176},[170,210,212,215,217,220],{"class":172,"line":211},4,[170,213,214],{"class":183},"  \"duree\"",[170,216,187],{"class":176},[170,218,219],{"class":190},"60",[170,221,194],{"class":176},[170,223,225,228,230,233],{"class":172,"line":224},5,[170,226,227],{"class":183},"  \"vegetarien\"",[170,229,187],{"class":176},[170,231,232],{"class":190},"true",[170,234,194],{"class":176},[170,236,238,241,244,247,250,253,255,258],{"class":172,"line":237},6,[170,239,240],{"class":183},"  \"ingredients\"",[170,242,243],{"class":176},": [",[170,245,246],{"class":205},"\"aubergine\"",[170,248,249],{"class":176},", ",[170,251,252],{"class":205},"\"courgette\"",[170,254,249],{"class":176},[170,256,257],{"class":205},"\"tomate\"",[170,259,260],{"class":176},"]\n",[170,262,264],{"class":172,"line":263},7,[170,265,266],{"class":176},"}\n",[32,268,269],{},"Les règles à retenir :",[15,271,272,275,278,299],{},[18,273,274],{},"les noms de clés sont entre guillemets doubles ;",[18,276,277],{},"les textes aussi (pas de guillemets simples) ;",[18,279,280,281,283,284,249,287,290,291,294,295,298],{},"les valeurs possibles sont : texte, nombre, ",[52,282,232],{}," \u002F ",[52,285,286],{},"false",[52,288,289],{},"null",", tableau ",[52,292,293],{},"[]",", objet ",[52,296,297],{},"{}"," ;",[18,300,301],{},"pas de virgule après le dernier élément.",[32,303,304,305,308,309,312,313,47],{},"En JavaScript, ",[52,306,307],{},"JSON.parse(texte)"," transforme du JSON en objet, et ",[52,310,311],{},"JSON.stringify(objet)"," fait l'inverse. Nuxt le fait pour toi avec ",[52,314,58],{},[10,316,318],{"id":317},"observer-un-échange-réel","Observer un échange réel",[32,320,321,322,325],{},"Le meilleur moyen de comprendre est de regarder. Lance ton site avec ",[52,323,324],{},"npm run dev",", puis :",[108,327,328,334,344,351],{},[18,329,330,331,298],{},"ouvre ",[52,332,333],{},"http:\u002F\u002Flocalhost:3000\u002Frecettes",[18,335,336,337,340,341,298],{},"ouvre les outils du navigateur (touche ",[52,338,339],{},"F12","), onglet ",[36,342,343],{},"Réseau",[18,345,346,347,350],{},"recharge la page et clique sur la ligne ",[52,348,349],{},"recettes"," qui apparaît ;",[18,352,353,354,357,358,361],{},"lis les onglets ",[36,355,356],{},"En-têtes"," (la requête et la réponse) et ",[36,359,360],{},"Réponse"," (le JSON).",[32,363,364],{},"Tu peux aussi appeler une API sans page du tout. Dans un terminal :",[86,366,370],{"className":367,"code":368,"language":369,"meta":94,"style":94},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","curl http:\u002F\u002Flocalhost:3000\u002Fapi\u002Frecettes\n","bash",[52,371,372],{"__ignoreMap":94},[170,373,374,378],{"class":172,"line":173},[170,375,377],{"class":376},"sIXEE","curl",[170,379,380],{"class":205}," http:\u002F\u002Flocalhost:3000\u002Fapi\u002Frecettes\n",[32,382,383,385],{},[52,384,377],{}," envoie la requête et affiche le corps de la réponse.",[10,387,389],{"id":388},"où-se-passe-léchange","Où se passe l'échange ?",[32,391,392],{},"Selon le moment, le client n'est pas le même. Au premier chargement, c'est le serveur Nuxt qui appelle l'API. Après un clic sur un lien, c'est le navigateur.",[394,395,396,412],"table",{},[397,398,399],"thead",{},[400,401,402,406,409],"tr",{},[403,404,405],"th",{},"Qui demande",[403,407,408],{},"Quand",[403,410,411],{},"Où voir l'échange",[413,414,415,427,440],"tbody",{},[400,416,417,421,424],{},[418,419,420],"td",{},"Le navigateur",[418,422,423],{},"Navigation, clic, formulaire",[418,425,426],{},"Onglet Réseau",[400,428,429,432,435],{},[418,430,431],{},"Le serveur Nuxt",[418,433,434],{},"Premier chargement d'une page",[418,436,437,438],{},"Terminal de ",[52,439,324],{},[400,441,442,445,448],{},[418,443,444],{},"Toi, à la main",[418,446,447],{},"Test d'une route",[418,449,450,452],{},[52,451,377],{},", navigateur",[454,455,456],"tip",{},[32,457,458],{},"Une API qui ne renvoie que des données (JSON) n'a pas d'écran. C'est ce qui permet à ton site, à une appli mobile et à un autre programme d'utiliser les mêmes recettes.",[10,460,462],{"id":461},"à-retenir","À retenir",[15,464,465,468,471,474,480],{},[18,466,467],{},"Une API est un ensemble d'adresses qu'un programme interroge ; le client demande, le serveur répond.",[18,469,470],{},"HTTP échange des messages : ligne de départ, en-têtes, ligne vide, corps.",[18,472,473],{},"Le JSON décrit les données : clés et textes entre guillemets doubles, pas de virgule finale.",[18,475,476,477,479],{},"L'onglet Réseau des outils du navigateur et ",[52,478,377],{}," permettent de voir un échange réel.",[18,481,482],{},"Le détail des méthodes et des codes de statut vient au chapitre suivant.",[484,485,486],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}",{"title":94,"searchDepth":180,"depth":197,"links":488},[489,490,491,492,493,494,495],{"id":12,"depth":180,"text":13},{"id":29,"depth":180,"text":30},{"id":68,"depth":180,"text":69},{"id":153,"depth":180,"text":154},{"id":317,"depth":180,"text":318},{"id":388,"depth":180,"text":389},{"id":461,"depth":180,"text":462},"Ce qu'est une API web, comment une requête HTTP et sa réponse en JSON s'échangent, et comment les observer dans ton navigateur.","md","api",{},[38,75,79,83,160,42,46,118,501],"DevTools",true,"debutant","\u002Fapi\u002Fcomprendre-les-api",[506],"\u002Fnuxt\u002Fintroduction",[508,512,516],{"nom":509,"url":510,"type":511},"Un aperçu de HTTP sur MDN","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FHTTP\u002FGuides\u002FOverview","doc",{"nom":513,"url":514,"type":515},"Manipuler des données JSON sur MDN","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FScripting\u002FJSON","cours",{"nom":517,"url":518,"type":511},"Messages HTTP sur MDN","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FHTTP\u002FGuides\u002FMessages",{"title":5,"description":496},[521,523,525],{"nom":522,"url":510},"Un aperçu de HTTP (MDN)",{"nom":524,"url":518},"Messages HTTP (MDN)",{"nom":526,"url":514},"Manipuler des données JSON (MDN)","api\u002F01.comprendre-les-api","cmDrjMiGCPj9-PFQI7-z1uJeQoKezT350eSesuW8JEk",[530,531,535,539,543,547,551],{"path":504,"title":5,"stem":527},{"path":532,"title":533,"stem":534},"\u002Fapi\u002Fmethodes-et-codes-de-statut","Méthodes et codes de statut","api\u002F02.methodes-et-codes-de-statut",{"path":536,"title":537,"stem":538},"\u002Fapi\u002Fconsommer-une-api-externe","Consommer une API externe","api\u002F03.consommer-une-api-externe",{"path":540,"title":541,"stem":542},"\u002Fapi\u002Fcacher-une-cle-d-api","Cacher une clé d'API","api\u002F04.cacher-une-cle-d-api",{"path":544,"title":545,"stem":546},"\u002Fapi\u002Fecrire-une-api-complete","Écrire une API complète","api\u002F05.ecrire-une-api-complete",{"path":548,"title":549,"stem":550},"\u002Fapi\u002Fsecurite-et-limites","Sécurité et limites","api\u002F06.securite-et-limites",{"path":552,"title":38,"stem":553},"\u002Fapi","api\u002Findex",[555,557],{"title":38,"path":552,"stem":553,"description":556,"children":-1},"Le mémo des API web avec Nuxt : HTTP, méthodes et codes, appels externes, clés secrètes, CRUD, validation et sécurité.",{"title":533,"path":532,"stem":534,"description":558,"children":-1},"Choisir la bonne méthode HTTP (GET, POST, PUT, PATCH, DELETE) et lire les codes de réponse pour savoir ce qui s'est passé.",[560],{"path":506,"title":561,"ligne":562},"Introduction à Nuxt","nuxt",[564,565,566,567,569,570,572],{"path":504,"title":5,"niveau":503,"stem":527},{"path":532,"title":533,"niveau":503,"stem":534},{"path":536,"title":537,"niveau":503,"stem":538},{"path":540,"title":541,"niveau":568,"stem":542},"intermediaire",{"path":544,"title":545,"niveau":568,"stem":546},{"path":548,"title":549,"niveau":571,"stem":550},"avance",{"path":552,"title":38,"niveau":573,"stem":553},"memo",1794583449462]