[{"data":1,"prerenderedAt":1200},["ShallowReactive",2],{"page-\u002Fjs\u002Fasynchrone-et-modules":3,"pieces-js":1158,"autour-\u002Fjs\u002Fasynchrone-et-modules":1183,"prerequis-\u002Fjs\u002Fasynchrone-et-modules":1187,"plan-js":1189},{"id":4,"title":5,"body":6,"description":1128,"extension":1129,"ligne":67,"meta":1130,"motsCles":1131,"navigation":99,"niveau":1133,"path":1134,"prerequis":1135,"ressources":1137,"seo":1149,"sources":1150,"stem":1156,"__hash__":1157},"docs\u002Fjs\u002F06.asynchrone-et-modules.md","Asynchrone et modules",{"type":7,"value":8,"toc":1115},"minimark",[9,14,46,50,54,62,163,169,173,185,196,286,292,296,308,380,391,395,406,493,501,503,517,528,602,606,609,688,692,702,804,808,815,936,983,990,994,1000,1041,1048,1058,1062,1111],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,37],"ul",{},[18,19,20],"li",{},"Comprendre pourquoi certaines opérations sont asynchrones.",[18,22,23,24,28,29,32,33,36],{},"Utiliser les promesses, ",[25,26,27],"code",{},"async"," et ",[25,30,31],{},"await"," et charger des données avec ",[25,34,35],{},"fetch",".",[18,38,39,40,28,43,36],{},"Répartir ton code dans plusieurs fichiers avec ",[25,41,42],{},"import",[25,44,45],{},"export",[10,47,49],{"id":48},"pourquoi-de-lasynchrone","Pourquoi de l'asynchrone",[51,52,53],"p",{},"Charger des recettes depuis un serveur prend du temps. Si JavaScript attendait la réponse sans rien faire, la page serait figée.",[51,55,56,57,61],{},"Une opération ",[58,59,60],"strong",{},"asynchrone"," est lancée, puis ton code continue. Le résultat arrive plus tard, et le navigateur te prévient.",[63,64,69],"pre",{"className":65,"code":66,"language":67,"meta":68,"style":68},"language-js shiki shiki-themes github-light-default github-dark-default github-dark-default","console.log('1 : début')\n\nsetTimeout(() => {\n  console.log('3 : deux secondes plus tard')\n}, 2000)\n\nconsole.log('2 : la suite continue')\n","js","",[25,70,71,94,101,117,132,144,149],{"__ignoreMap":68},[72,73,76,80,84,87,91],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"scfrF","console.",[72,81,83],{"class":82},"syCW7","log",[72,85,86],{"class":78},"(",[72,88,90],{"class":89},"shWOn","'1 : début'",[72,92,93],{"class":78},")\n",[72,95,97],{"class":74,"line":96},2,[72,98,100],{"emptyLinePlaceholder":99},true,"\n",[72,102,104,107,110,114],{"class":74,"line":103},3,[72,105,106],{"class":82},"setTimeout",[72,108,109],{"class":78},"(() ",[72,111,113],{"class":112},"sOnC1","=>",[72,115,116],{"class":78}," {\n",[72,118,120,123,125,127,130],{"class":74,"line":119},4,[72,121,122],{"class":78},"  console.",[72,124,83],{"class":82},[72,126,86],{"class":78},[72,128,129],{"class":89},"'3 : deux secondes plus tard'",[72,131,93],{"class":78},[72,133,135,138,142],{"class":74,"line":134},5,[72,136,137],{"class":78},"}, ",[72,139,141],{"class":140},"s5iOY","2000",[72,143,93],{"class":78},[72,145,147],{"class":74,"line":146},6,[72,148,100],{"emptyLinePlaceholder":99},[72,150,152,154,156,158,161],{"class":74,"line":151},7,[72,153,79],{"class":78},[72,155,83],{"class":82},[72,157,86],{"class":78},[72,159,160],{"class":89},"'2 : la suite continue'",[72,162,93],{"class":78},[51,164,165,166,168],{},"Les messages s'affichent dans l'ordre 1, 2, puis 3. ",[25,167,106],{}," lance un minuteur sans bloquer le reste.",[10,170,172],{"id":171},"les-promesses","Les promesses",[51,174,175,176,179,180,184],{},"Une ",[58,177,178],{},"promesse"," (",[181,182,183],"em",{},"Promise",") représente un résultat qui n'est pas encore disponible. Elle est dans l'un de ces trois états : en attente, tenue (résolue) ou rompue (rejetée).",[51,186,187,188,191,192,195],{},"Tu lui accroches des fonctions avec ",[25,189,190],{},"then"," pour le succès et ",[25,193,194],{},"catch"," pour l'échec.",[63,197,199],{"className":65,"code":198,"language":67,"meta":68,"style":68},"fetch('\u002Fapi\u002Frecettes')\n  .then((reponse) => reponse.json())\n  .then((recettes) => console.log(recettes))\n  .catch((erreur) => console.error(erreur))\n",[25,200,201,212,240,263],{"__ignoreMap":68},[72,202,203,205,207,210],{"class":74,"line":75},[72,204,35],{"class":82},[72,206,86],{"class":78},[72,208,209],{"class":89},"'\u002Fapi\u002Frecettes'",[72,211,93],{"class":78},[72,213,214,217,219,222,226,229,231,234,237],{"class":74,"line":96},[72,215,216],{"class":78},"  .",[72,218,190],{"class":82},[72,220,221],{"class":78},"((",[72,223,225],{"class":224},"sIXEE","reponse",[72,227,228],{"class":78},") ",[72,230,113],{"class":112},[72,232,233],{"class":78}," reponse.",[72,235,236],{"class":82},"json",[72,238,239],{"class":78},"())\n",[72,241,242,244,246,248,251,253,255,258,260],{"class":74,"line":103},[72,243,216],{"class":78},[72,245,190],{"class":82},[72,247,221],{"class":78},[72,249,250],{"class":224},"recettes",[72,252,228],{"class":78},[72,254,113],{"class":112},[72,256,257],{"class":78}," console.",[72,259,83],{"class":82},[72,261,262],{"class":78},"(recettes))\n",[72,264,265,267,269,271,274,276,278,280,283],{"class":74,"line":119},[72,266,216],{"class":78},[72,268,194],{"class":82},[72,270,221],{"class":78},[72,272,273],{"class":224},"erreur",[72,275,228],{"class":78},[72,277,113],{"class":112},[72,279,257],{"class":78},[72,281,282],{"class":82},"error",[72,284,285],{"class":78},"(erreur))\n",[51,287,288,289,291],{},"Chaque ",[25,290,190],{}," reçoit le résultat du précédent. Cette chaîne fonctionne, mais devient vite difficile à lire.",[10,293,295],{"id":294},"async-et-await","async et await",[51,297,298,28,300,302,303,305,306,36],{},[25,299,27],{},[25,301,31],{}," donnent à une promesse l'allure d'un code ordinaire. Le mot-clé ",[58,304,31],{}," met la fonction en pause jusqu'à ce que la promesse soit terminée. Il s'utilise dans une fonction marquée ",[25,307,27],{},[63,309,311],{"className":65,"code":310,"language":67,"meta":68,"style":68},"async function chargerRecettes() {\n  const reponse = await fetch('\u002Fapi\u002Frecettes')\n  const recettes = await reponse.json()\n  return recettes\n}\n",[25,312,313,326,349,367,375],{"__ignoreMap":68},[72,314,315,317,320,323],{"class":74,"line":75},[72,316,27],{"class":112},[72,318,319],{"class":112}," function",[72,321,322],{"class":82}," chargerRecettes",[72,324,325],{"class":78},"() {\n",[72,327,328,331,334,337,340,343,345,347],{"class":74,"line":96},[72,329,330],{"class":112},"  const",[72,332,333],{"class":140}," reponse",[72,335,336],{"class":112}," =",[72,338,339],{"class":112}," await",[72,341,342],{"class":82}," fetch",[72,344,86],{"class":78},[72,346,209],{"class":89},[72,348,93],{"class":78},[72,350,351,353,356,358,360,362,364],{"class":74,"line":103},[72,352,330],{"class":112},[72,354,355],{"class":140}," recettes",[72,357,336],{"class":112},[72,359,339],{"class":112},[72,361,233],{"class":78},[72,363,236],{"class":82},[72,365,366],{"class":78},"()\n",[72,368,369,372],{"class":74,"line":119},[72,370,371],{"class":112},"  return",[72,373,374],{"class":78}," recettes\n",[72,376,377],{"class":74,"line":134},[72,378,379],{"class":78},"}\n",[51,381,382,383,385,386,388,389,36],{},"Une fonction ",[25,384,27],{}," renvoie toujours une promesse. Pour récupérer sa valeur, utilise ",[25,387,31],{}," à nouveau, ou ",[25,390,190],{},[10,392,394],{"id":393},"gérer-les-erreurs","Gérer les erreurs",[51,396,397,398,400,401,28,404,36],{},"Avec ",[25,399,31],{},", une promesse rompue lève une erreur que tu attrapes avec ",[25,402,403],{},"try",[25,405,194],{},[63,407,409],{"className":65,"code":408,"language":67,"meta":68,"style":68},"async function afficherRecettes() {\n  try {\n    const recettes = await chargerRecettes()\n    console.log(recettes.length)\n  } catch (erreur) {\n    console.error('Chargement impossible', erreur)\n  }\n}\n",[25,410,411,422,429,444,459,469,483,488],{"__ignoreMap":68},[72,412,413,415,417,420],{"class":74,"line":75},[72,414,27],{"class":112},[72,416,319],{"class":112},[72,418,419],{"class":82}," afficherRecettes",[72,421,325],{"class":78},[72,423,424,427],{"class":74,"line":96},[72,425,426],{"class":112},"  try",[72,428,116],{"class":78},[72,430,431,434,436,438,440,442],{"class":74,"line":103},[72,432,433],{"class":112},"    const",[72,435,355],{"class":140},[72,437,336],{"class":112},[72,439,339],{"class":112},[72,441,322],{"class":82},[72,443,366],{"class":78},[72,445,446,449,451,454,457],{"class":74,"line":119},[72,447,448],{"class":78},"    console.",[72,450,83],{"class":82},[72,452,453],{"class":78},"(recettes.",[72,455,456],{"class":140},"length",[72,458,93],{"class":78},[72,460,461,464,466],{"class":74,"line":134},[72,462,463],{"class":78},"  } ",[72,465,194],{"class":112},[72,467,468],{"class":78}," (erreur) {\n",[72,470,471,473,475,477,480],{"class":74,"line":146},[72,472,448],{"class":78},[72,474,282],{"class":82},[72,476,86],{"class":78},[72,478,479],{"class":89},"'Chargement impossible'",[72,481,482],{"class":78},", erreur)\n",[72,484,485],{"class":74,"line":151},[72,486,487],{"class":78},"  }\n",[72,489,491],{"class":74,"line":490},8,[72,492,379],{"class":78},[51,494,495,496,498,499,36],{},"Le bloc ",[25,497,194],{}," s'exécute si une erreur survient dans le ",[25,500,403],{},[10,502,35],{"id":35},[51,504,505,508,509,512,513,516],{},[25,506,507],{},"fetch(url)"," envoie une requête HTTP et renvoie une promesse qui donne un objet ",[58,510,511],{},"Response",". ",[25,514,515],{},"reponse.json()"," lit le corps de la réponse et le convertit en objet.",[518,519,520],"warning",{},[51,521,522,524,525,36],{},[25,523,35],{}," ne rejette pas la promesse sur une erreur HTTP comme 404 ou 500. Elle n'est rompue qu'en cas de problème réseau. Teste toi-même ",[25,526,527],{},"reponse.ok",[63,529,531],{"className":65,"code":530,"language":67,"meta":68,"style":68},"const reponse = await fetch('\u002Fapi\u002Frecettes\u002F99')\n\nif (!reponse.ok) {\n  throw new Error(`Erreur ${reponse.status}`)\n}\n",[25,532,533,553,557,570,598],{"__ignoreMap":68},[72,534,535,538,540,542,544,546,548,551],{"class":74,"line":75},[72,536,537],{"class":112},"const",[72,539,333],{"class":140},[72,541,336],{"class":112},[72,543,339],{"class":112},[72,545,342],{"class":82},[72,547,86],{"class":78},[72,549,550],{"class":89},"'\u002Fapi\u002Frecettes\u002F99'",[72,552,93],{"class":78},[72,554,555],{"class":74,"line":96},[72,556,100],{"emptyLinePlaceholder":99},[72,558,559,562,564,567],{"class":74,"line":103},[72,560,561],{"class":112},"if",[72,563,179],{"class":78},[72,565,566],{"class":112},"!",[72,568,569],{"class":78},"reponse.ok) {\n",[72,571,572,575,578,581,583,586,588,590,593,596],{"class":74,"line":119},[72,573,574],{"class":112},"  throw",[72,576,577],{"class":112}," new",[72,579,580],{"class":82}," Error",[72,582,86],{"class":78},[72,584,585],{"class":89},"`Erreur ${",[72,587,225],{"class":78},[72,589,36],{"class":89},[72,591,592],{"class":78},"status",[72,594,595],{"class":89},"}`",[72,597,93],{"class":78},[72,599,600],{"class":74,"line":134},[72,601,379],{"class":78},[10,603,605],{"id":604},"envoyer-des-données","Envoyer des données",[51,607,608],{},"Pour envoyer une recette, ajoute des options : la méthode, un en-tête et le corps converti en JSON.",[63,610,612],{"className":65,"code":611,"language":67,"meta":68,"style":68},"await fetch('\u002Fapi\u002Frecettes', {\n  method: 'POST',\n  headers: { 'Content-Type': 'application\u002Fjson' },\n  body: JSON.stringify({ titre: 'Crêpes', minutes: 20 })\n})\n",[25,613,614,627,638,655,683],{"__ignoreMap":68},[72,615,616,618,620,622,624],{"class":74,"line":75},[72,617,31],{"class":112},[72,619,342],{"class":82},[72,621,86],{"class":78},[72,623,209],{"class":89},[72,625,626],{"class":78},", {\n",[72,628,629,632,635],{"class":74,"line":96},[72,630,631],{"class":78},"  method: ",[72,633,634],{"class":89},"'POST'",[72,636,637],{"class":78},",\n",[72,639,640,643,646,649,652],{"class":74,"line":103},[72,641,642],{"class":78},"  headers: { ",[72,644,645],{"class":89},"'Content-Type'",[72,647,648],{"class":78},": ",[72,650,651],{"class":89},"'application\u002Fjson'",[72,653,654],{"class":78}," },\n",[72,656,657,660,663,665,668,671,674,677,680],{"class":74,"line":119},[72,658,659],{"class":78},"  body: ",[72,661,662],{"class":140},"JSON",[72,664,36],{"class":78},[72,666,667],{"class":82},"stringify",[72,669,670],{"class":78},"({ titre: ",[72,672,673],{"class":89},"'Crêpes'",[72,675,676],{"class":78},", minutes: ",[72,678,679],{"class":140},"20",[72,681,682],{"class":78}," })\n",[72,684,685],{"class":74,"line":134},[72,686,687],{"class":78},"})\n",[10,689,691],{"id":690},"plusieurs-requêtes-en-parallèle","Plusieurs requêtes en parallèle",[51,693,694,695,697,698,701],{},"Deux ",[25,696,31],{}," à la suite attendent l'un après l'autre. ",[25,699,700],{},"Promise.all"," lance tout en même temps et attend la fin de toutes.",[63,703,705],{"className":65,"code":704,"language":67,"meta":68,"style":68},"const [recettes, ingredients] = await Promise.all([\n  fetch('\u002Fapi\u002Frecettes').then((r) => r.json()),\n  fetch('\u002Fapi\u002Fingredients').then((r) => r.json())\n])\n",[25,706,707,741,772,799],{"__ignoreMap":68},[72,708,709,711,714,716,719,722,725,728,730,733,735,738],{"class":74,"line":75},[72,710,537],{"class":112},[72,712,713],{"class":78}," [",[72,715,250],{"class":140},[72,717,718],{"class":78},", ",[72,720,721],{"class":140},"ingredients",[72,723,724],{"class":78},"] ",[72,726,727],{"class":112},"=",[72,729,339],{"class":112},[72,731,732],{"class":140}," Promise",[72,734,36],{"class":78},[72,736,737],{"class":82},"all",[72,739,740],{"class":78},"([\n",[72,742,743,746,748,750,753,755,757,760,762,764,767,769],{"class":74,"line":96},[72,744,745],{"class":82},"  fetch",[72,747,86],{"class":78},[72,749,209],{"class":89},[72,751,752],{"class":78},").",[72,754,190],{"class":82},[72,756,221],{"class":78},[72,758,759],{"class":224},"r",[72,761,228],{"class":78},[72,763,113],{"class":112},[72,765,766],{"class":78}," r.",[72,768,236],{"class":82},[72,770,771],{"class":78},"()),\n",[72,773,774,776,778,781,783,785,787,789,791,793,795,797],{"class":74,"line":103},[72,775,745],{"class":82},[72,777,86],{"class":78},[72,779,780],{"class":89},"'\u002Fapi\u002Fingredients'",[72,782,752],{"class":78},[72,784,190],{"class":82},[72,786,221],{"class":78},[72,788,759],{"class":224},[72,790,228],{"class":78},[72,792,113],{"class":112},[72,794,766],{"class":78},[72,796,236],{"class":82},[72,798,239],{"class":78},[72,800,801],{"class":74,"line":119},[72,802,803],{"class":78},"])\n",[10,805,807],{"id":806},"les-modules","Les modules",[51,809,810,811,814],{},"Un ",[58,812,813],{},"module"," est un fichier JavaScript qui expose des éléments à d'autres fichiers. Tu découpes ton code, chaque fichier a un rôle précis.",[63,816,819],{"className":65,"code":817,"filename":818,"language":67,"meta":68,"style":68},"export const TVA = 0.055\n\nexport function prixTTC(prixHT) {\n  return prixHT * (1 + TVA)\n}\n\nexport default function formaterPrix(valeur) {\n  return `${valeur.toFixed(2)} €`\n}\n","prix.js",[25,820,821,836,840,857,879,883,887,905,931],{"__ignoreMap":68},[72,822,823,825,828,831,833],{"class":74,"line":75},[72,824,45],{"class":112},[72,826,827],{"class":112}," const",[72,829,830],{"class":140}," TVA",[72,832,336],{"class":112},[72,834,835],{"class":140}," 0.055\n",[72,837,838],{"class":74,"line":96},[72,839,100],{"emptyLinePlaceholder":99},[72,841,842,844,846,849,851,854],{"class":74,"line":103},[72,843,45],{"class":112},[72,845,319],{"class":112},[72,847,848],{"class":82}," prixTTC",[72,850,86],{"class":78},[72,852,853],{"class":224},"prixHT",[72,855,856],{"class":78},") {\n",[72,858,859,861,864,867,869,872,875,877],{"class":74,"line":119},[72,860,371],{"class":112},[72,862,863],{"class":78}," prixHT ",[72,865,866],{"class":112},"*",[72,868,179],{"class":78},[72,870,871],{"class":140},"1",[72,873,874],{"class":112}," +",[72,876,830],{"class":140},[72,878,93],{"class":78},[72,880,881],{"class":74,"line":134},[72,882,379],{"class":78},[72,884,885],{"class":74,"line":146},[72,886,100],{"emptyLinePlaceholder":99},[72,888,889,891,894,896,899,902],{"class":74,"line":151},[72,890,45],{"class":112},[72,892,893],{"class":112}," default",[72,895,319],{"class":112},[72,897,898],{"class":82}," formaterPrix",[72,900,901],{"class":224},"(valeur) ",[72,903,904],{"class":78},"{\n",[72,906,907,909,912,915,917,920,922,925,928],{"class":74,"line":490},[72,908,371],{"class":112},[72,910,911],{"class":89}," `${",[72,913,914],{"class":78},"valeur",[72,916,36],{"class":89},[72,918,919],{"class":82},"toFixed",[72,921,86],{"class":89},[72,923,924],{"class":140},"2",[72,926,927],{"class":89},")",[72,929,930],{"class":89},"} €`\n",[72,932,934],{"class":74,"line":933},9,[72,935,379],{"class":78},[63,937,940],{"className":65,"code":938,"filename":939,"language":67,"meta":68,"style":68},"import formaterPrix, { prixTTC, TVA } from '.\u002Fprix.js'\n\nconsole.log(formaterPrix(prixTTC(10)))\n","script.js",[25,941,942,955,959],{"__ignoreMap":68},[72,943,944,946,949,952],{"class":74,"line":75},[72,945,42],{"class":112},[72,947,948],{"class":78}," formaterPrix, { prixTTC, TVA } ",[72,950,951],{"class":112},"from",[72,953,954],{"class":89}," '.\u002Fprix.js'\n",[72,956,957],{"class":74,"line":96},[72,958,100],{"emptyLinePlaceholder":99},[72,960,961,963,965,967,970,972,975,977,980],{"class":74,"line":103},[72,962,79],{"class":78},[72,964,83],{"class":82},[72,966,86],{"class":78},[72,968,969],{"class":82},"formaterPrix",[72,971,86],{"class":78},[72,973,974],{"class":82},"prixTTC",[72,976,86],{"class":78},[72,978,979],{"class":140},"10",[72,981,982],{"class":78},")))\n",[51,984,985,986,989],{},"Les exports nommés s'importent entre accolades, avec le même nom. L'export ",[25,987,988],{},"default"," s'importe sans accolades, sous le nom de ton choix. Un fichier n'en a qu'un.",[10,991,993],{"id":992},"utiliser-les-modules-dans-une-page","Utiliser les modules dans une page",[51,995,996,997,36],{},"Dans le navigateur, déclare ton script avec ",[25,998,999],{},"type=\"module\"",[63,1001,1006],{"className":1002,"code":1003,"filename":1004,"language":1005,"meta":68,"style":68},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cscript type=\"module\" src=\"script.js\">\u003C\u002Fscript>\n","index.html","html",[25,1007,1008],{"__ignoreMap":68},[72,1009,1010,1013,1017,1020,1022,1025,1028,1030,1033,1036,1038],{"class":74,"line":75},[72,1011,1012],{"class":78},"\u003C",[72,1014,1016],{"class":1015},"s5JFL","script",[72,1018,1019],{"class":140}," type",[72,1021,727],{"class":78},[72,1023,1024],{"class":89},"\"module\"",[72,1026,1027],{"class":140}," src",[72,1029,727],{"class":78},[72,1031,1032],{"class":89},"\"script.js\"",[72,1034,1035],{"class":78},">\u003C\u002F",[72,1037,1016],{"class":1015},[72,1039,1040],{"class":78},">\n",[51,1042,1043,1044,1047],{},"Un script de type module est exécuté après la lecture de la page, comme avec ",[25,1045,1046],{},"defer",". Ses variables restent privées au fichier.",[1049,1050,1051],"note",{},[51,1052,1053,1054,1057],{},"Les modules ne fonctionnent pas en ouvrant le fichier directement (adresse ",[25,1055,1056],{},"file:\u002F\u002F","). Lance un petit serveur local, ou utilise un outil comme Vite ou Nuxt qui s'en charge.",[10,1059,1061],{"id":1060},"à-retenir","À retenir",[15,1063,1064,1067,1075,1087,1094,1099],{},[18,1065,1066],{},"Une opération asynchrone ne bloque pas le reste du code : le résultat arrive plus tard.",[18,1068,1069,1070,28,1072,1074],{},"Une promesse est tenue ou rompue, ",[25,1071,190],{},[25,1073,194],{}," en lisent le résultat.",[18,1076,1077,1079,1080,718,1082,28,1084,1086],{},[25,1078,31],{}," attend une promesse dans une fonction ",[25,1081,27],{},[25,1083,403],{},[25,1085,194],{}," gèrent les erreurs.",[18,1088,1089,1091,1092,36],{},[25,1090,35],{}," ne rejette pas sur un 404 ou un 500 : vérifie ",[25,1093,527],{},[18,1095,1096,1098],{},[25,1097,700],{}," lance plusieurs opérations en parallèle.",[18,1100,1101,1103,1104,1106,1107,1110],{},[25,1102,45],{}," expose, ",[25,1105,42],{}," récupère, et ",[25,1108,1109],{},"\u003Cscript type=\"module\">"," active les modules dans la page.",[1112,1113,1114],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}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}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}",{"title":68,"searchDepth":96,"depth":103,"links":1116},[1117,1118,1119,1120,1121,1122,1123,1124,1125,1126,1127],{"id":12,"depth":96,"text":13},{"id":48,"depth":96,"text":49},{"id":171,"depth":96,"text":172},{"id":294,"depth":96,"text":295},{"id":393,"depth":96,"text":394},{"id":35,"depth":96,"text":35},{"id":604,"depth":96,"text":605},{"id":690,"depth":96,"text":691},{"id":806,"depth":96,"text":807},{"id":992,"depth":96,"text":993},{"id":1060,"depth":96,"text":1061},"Gérer ce qui prend du temps avec les promesses, async et await, charger des données avec fetch, puis découper son code avec import et export.","md",{},[60,183,27,31,35,1132,813,42,45,999],"try\u002Fcatch","avance","\u002Fjs\u002Fasynchrone-et-modules",[1136],"\u002Fjs\u002Fdom-et-evenements",[1138,1142,1145],{"nom":1139,"url":1140,"type":1141},"MDN, Utiliser les promesses","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide\u002FUsing_promises","cours",{"nom":1143,"url":1144,"type":1141},"MDN, Récupérer des données depuis le serveur","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FScripting\u002FNetwork_requests",{"nom":1146,"url":1147,"type":1148},"MDN, Les modules JavaScript","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide\u002FModules","doc",{"title":5,"description":1128},[1151,1152,1155],{"nom":1139,"url":1140},{"nom":1153,"url":1154},"MDN, Utiliser l'API Fetch","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FAPI\u002FFetch_API\u002FUsing_Fetch",{"nom":1146,"url":1147},"js\u002F06.asynchrone-et-modules","xwFCc6dHebxfqRB2xbItYub3ezkwFC6bSzLWz1Yetpo",[1159,1163,1167,1171,1175,1178,1179],{"path":1160,"title":1161,"stem":1162},"\u002Fjs\u002Fpremiers-pas","Premiers pas en JavaScript","js\u002F01.premiers-pas",{"path":1164,"title":1165,"stem":1166},"\u002Fjs\u002Fconditions-et-boucles","Conditions et boucles","js\u002F02.conditions-et-boucles",{"path":1168,"title":1169,"stem":1170},"\u002Fjs\u002Ffonctions","Les fonctions","js\u002F03.fonctions",{"path":1172,"title":1173,"stem":1174},"\u002Fjs\u002Ftableaux-et-objets","Tableaux et objets","js\u002F04.tableaux-et-objets",{"path":1136,"title":1176,"stem":1177},"Le DOM et les événements","js\u002F05.dom-et-evenements",{"path":1134,"title":5,"stem":1156},{"path":1180,"title":1181,"stem":1182},"\u002Fjs","JavaScript","js\u002Findex",[1184,1186],{"title":1176,"path":1136,"stem":1177,"description":1185,"children":-1},"Sélectionner et modifier les éléments d'une page avec le DOM, puis réagir aux clics et aux formulaires avec addEventListener.",null,[1188],{"path":1136,"title":1176,"ligne":67},[1190,1192,1193,1194,1196,1197,1198],{"path":1160,"title":1161,"niveau":1191,"stem":1162},"debutant",{"path":1164,"title":1165,"niveau":1191,"stem":1166},{"path":1168,"title":1169,"niveau":1191,"stem":1170},{"path":1172,"title":1173,"niveau":1195,"stem":1174},"intermediaire",{"path":1136,"title":1176,"niveau":1195,"stem":1177},{"path":1134,"title":5,"niveau":1133,"stem":1156},{"path":1180,"title":1181,"niveau":1199,"stem":1182},"memo",1794583437777]