One place for hosting & domains

      données

      Comment sauvegarder, restaurer et migrer une base de données MongoDB sur Ubuntu 20.04


      L’auteur a choisi le COVID-19 Relief Fund pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      MongoDB est l’un des moteurs de base de données NoSQL les plus populaires. Il doit sa célébrité à son évolutivité, sa robustesse, sa fiabilité et sa facilité d’utilisation. À l’aide de cet article, vous allez sauvegarder, restaurer et migrer un échantillon de base de données MongoDB.

      Lorsque l’on parle d’importation et d’exportation d’une base de données, nous faisons référence à la gestion de données sous un format lisible par l’homme et qui sont compatibles avec d’autres produits logiciels. En revanche, les opérations de sauvegarde et de restauration de MongoDB créent ou utilisent des données binaires spécifiques à MongoDB. Elles préservent non seulement la cohérence et l’intégrité de vos données mais également leurs attributs MongoDB spécifiques. Par conséquent, lors de la migration, il est généralement recommandé d’utiliser la sauvegarde et la restauration dans la mesure où les systèmes source et cible sont compatibles.

      Conditions préalables

      Avant de suivre ce tutoriel, vérifiez si vous répondez bien aux conditions préalables suivantes :

      Sauf indication contraire, toutes les commandes qui nécessitent des privilèges root dans ce tutoriel doivent être exécutées en tant que non-root user avec des privilèges sudo.

      Étape 1 — Utiliser JSON et BSON dans MongoDB

      Avant de poursuivre avec cet article, vous devez avoir quelques connaissances de base sur le sujet. Si vous avez de l’expérience avec d’autres systèmes de base de données NoSQL comme Redis, il se peut que vous trouviez quelques similitudes avec MongoDB.

      MongoDB utilise les formats JSON et BSON (JSON binaire) pour stocker ses informations. JSON est le format lisible par l’homme, idéal pour exporter et éventuellement importer vos données. Vous pouvez également gérer vos données exportées avec tout outil qui prend en charge JSON et notamment un éditeur de texte simple.

      Voici à quoi ressemble un exemple de document JSON :

      Example of JSON Format

      {"address":[
    {"building":"1007", "street":"Park Ave"},
    {"building":"1008", "street":"New Ave"},
]}

      Bien que le format JSON soit pratique pour travailler, il ne prend cependant pas en charge tous les types de données disponibles dans BSON. Cela signifie que, si vous utilisez JSON, vous ferez l’expérience de ce que l’on nomme une « perte de fidélité » des informations. Que ce soit pour la sauvegarde ou la restauration, il est donc préférable d’utiliser le format binaire BSON.

      Deuxièmement, vous n’aurez plus à vous soucier de créer explicitement une base de données MongoDB. Si la base de données spécifiée que vous souhaitez importer n’existe pas encore, elle sera automatiquement créée. Cette fonctionnalité est encore plus pratique avec la structure des collections (tables de la base de données). Contrairement à d’autres moteurs de base de données, dans MongoDB, la structure est également créée automatiquement à l’insertion du premier document (ligne de la base de données).

      Troisièmement, dans MongoDB, il se peut que la lecture et l’insertion de grandes quantités de données, (comme les tâches de cet article par exemple) exigent un volume intensif de ressources et consomment une grande partie de votre CPU, de votre mémoire et de votre espace disque. Ce point est crucial, car on utilise fréquemment MongoDB avec de grandes bases de données et les Big Data. Pour palier ce problème, la solution la plus simple consiste à exécuter les exportations et les sauvegardes pendant la nuit ou en-dehors des heures de pointe.

      Quatrièmement, il se peut que la cohérence des informations pose des problèmes si le serveur MongoDB est occupé et si les informations qui s’y trouvent changent pendant le processus d’exportation ou de sauvegarde de la base de données. Il existe une solution possible à ce problème qui est la réplication. Vous pourrez envisager de l’utiliser une fois que vous en saurez davantage sur MongoDB.

      Bien que vous puissiez utiliser les fonctions import et export pour sauvegarder et restaurer vos données, il existe de meilleures façons d’assurer la complète intégrité de vos bases de données MongoDB. Pour sauvegarder vos données, nous vous recommandons d’utiliser la commande mongodump. Pour la restauration, utilisez mongorestore. Voyons comment ces deux commandes fonctionnent.

      Étape 2 — Utiliser mongodump pour sauvegarder une base de données MongoDB

      Examinons tout d’abord de quelle manière sauvegarder votre base de données MongoDB.

      Un des arguments essentiels de mongodump est --db. Il spécifie le nom de la base de données que vous souhaitez sauvegarder. Si vous omettez de spécifier le nom de la base de données, mongodump procédera à la sauvegarde de toutes vos bases de données. Le second argument important est --out. Il permet de définir le répertoire dans lequel les données seront déchargées. Par exemple, sauvegardons la base de données newdb et sauvegardons-la dans le répertoire /var/backups/mongobackups. Idéalement, chacune de nos sauvegardes devraient se trouver dans un répertoire affichant la date du jour comme suit : /var/backups/mongobacackup/10-29-20.

      Créez tout d’abord ce répertoire /var/backups/mongobackups :

      • sudo mkdir /var/backups/mongobackups

      Ensuite, exécutez mongodump :

      • sudo mongodump --db newdb --out /var/backups/mongobackups/`date +"%m-%d-%y"`

      Vous verrez un résultat similaire à ce qui suit :

      Output
      2020-10-29T19:22:36.886+0000    writing newdb.restaurants to
2020-10-29T19:22:36.969+0000    done dumping newdb.restaurants (25359 documents)

      Notez que, dans le chemin du répertoire ci-dessus, nous avons utilisé date +"%m-%d-%y qui permet d’obtenir la date du jour automatiquement. Nos sauvegardes se trouveront ainsi dans le répertoire nommé de la manière suivante : /var/backups/10-29-20/. Ceci est particulièrement pratique pour automatiser les sauvegardes.

      À ce stade, vous disposez d’une sauvegarde complète de la base de données newdb dans le répertoire /var/backups/mongobackups/10-29-20/newdb/. Cette sauvegarde intègre tout ce dont vous avez besoin pour restaurer la newdb correctement et préserver sa dénommée « fidélité ».

      En règle générale, vous devriez régulièrement procéder à des sauvegardes, de préférence au moment où le serveur est le moins chargé. Par conséquent, vous pouvez configurer la commande mongodump comme un travail cron afin qu’elle s’exécute régulièrement, par exemple, chaque jour à 03:03 du matin.

      Pour cela, ouvrez crontab, l’éditeur de cron :

      Notez que, lorsque vous exécutez sudo crontab, vous allez modifier les tâches cron pour le root user. Cette commande est recommandée. En effet, si vous configurez les crons pour votre utilisateur, ils ne s'exécuteront pas correctement, surtout si votre profil sudo nécessite une vérification du mot de passe.

      Dans l'invite crontab, insérez la commande mongodump suivante :

      crontab

      3 3 * * * mongodump --out /var/backups/mongobackups/`date +"%m-%d-%y"`

      Dans la commande ci-dessus, nous avons omis l'argument --db sur l'objet délibérément, car vous souhaiterez généralement sauvegarder toutes vos bases de données.

      En fonction de la taille de votre base de données MongoDB, vous devriez rapidement manquer d'espace disque à cause du nombre élevé de sauvegardes. C'est pourquoi il est également recommandé de nettoyer ou de compresser régulièrement les anciennes sauvegardes.

      Par exemple, si vous souhaitez supprimer toutes les sauvegardes de plus de sept jours, vous pouvez utiliser la commande bash suivante :

      • find /var/backups/mongobackups/ -mtime +7 -exec rm -rf {} ;

      De la même manière que la commande mongodump précédente, vous pouvez également ajouter cette commande en tant que cron. Elle devra être exécutée juste avant de commencer la prochaine sauvegarde, par exemple, à 03:01 du matin. Pour cela, ouvrez à nouveau crontab :

      Ensuite, insérez la ligne suivante :

      crontab

      1 3 * * * find /var/backups/mongobackups/ -mtime +7 -exec rm -rf {} ;

      Enregistrez et fermez le fichier.

      En exécutant toutes les tâches de cette étape, vous disposerez d'une solution de sauvegarde adaptée à vos bases de données MongoDB.

      Étape 3 — Utiliser mongorestore pour restaurer et migrer une base de données MongoDB

      Lorsque vous restaurez votre base de données MongoDB à l'aide d'une sauvegarde précédente, vous obtenez la copie exacte de vos informations MongoDB à un moment particulier qui inclut tous les index et les types de données. Ceci est particulièrement utile pour migrer vos bases de données MongoDB. Pour restaurer MongoDB, nous allons utiliser la commande mongorestore qui fonctionne avec les sauvegardes binaires générées par mongodump.

      Continuons à travailler sur nos exemples avec la base de données newdb pour voir de quelle manière nous pouvons la restaurer à partir de la sauvegarde précédemment réalisée. Nous allons tout d'abord spécifier le nom de la base de données en utilisant l'argument --nsInclude. Nous allons ensuite utiliser newdb.* pour restaurer toutes les collections. Pour restaurer une collection unique, comme restaurants, utilisez plutôt newdb.restaurants.

      Puis, en utilisant --drop, nous allons veiller à ce que la base de données cible soit tout d'abord supprimée afin que la sauvegarde puisse être restaurée dans une base de données propre. Pour finir, nous allons spécifier le répertoire de la dernière sauvegarde, dont l'appellation devrait ressembler à ce qui suit : /var/backups/mongobackups/10-29-20/newdb/.

      Une fois que vous disposez d'une sauvegarde horodatée, vous pouvez la restaurer en utilisant la commande suivante :

      • sudo mongorestore --db newdb --drop /var/backups/mongobackups/10-29-20/newdb/

      Vous verrez un résultat similaire à ce qui suit :

      Output
      2020-10-29T19:25:45.825+0000    the --db and --collection args should only be used when restoring from a BSON file. Other uses are deprecated and will not exist in the future; use --nsInclude instead
2020-10-29T19:25:45.826+0000    building a list of collections to restore from /var/backups/mongobackups/10-29-20/newdb dir
2020-10-29T19:25:45.829+0000    reading metadata for newdb.restaurants from /var/backups/mongobackups/10-29-20/newdb/restaurants.metadata.json
2020-10-29T19:25:45.834+0000    restoring newdb.restaurants from /var/backups/mongobackups/10-29-20/newdb/restaurants.bson
2020-10-29T19:25:46.130+0000    no indexes to restore
2020-10-29T19:25:46.130+0000    finished restoring newdb.restaurants (25359 documents)
2020-10-29T19:25:46.130+0000    done

      Dans le cas ci-dessus, nous avons restauré les données sur le serveur dans lequel nous avons créé la sauvegarde. Si vous souhaitez migrer les données sur un autre serveur et utiliser la même technique, vous devrez alors copier le répertoire de sauvegarde, c'est-à-dire /var/backups/mongobackups/10-29-20/newdb/ dans notre cas, sur l'autre serveur.

      Conclusion

      Vous avez désormais exécuté quelques-unes des tâches essentielles liées à la sauvegarde, la restauration et la migration de vos bases de données MongoDB. Aucun serveur MongoDB de production ne devrait jamais être exécuté sans une stratégie de sauvegarde fiable, comme celle décrite ici.



      Source link

      Comment importer et exporter une base de données MongoDB sur Ubuntu 20.04


      L’auteur a choisi le COVID-19 Relief Fund pour recevoir un don dans le cadre du programme Write for DOnations.

      Introduction

      MongoDB est l’un des moteurs de base de données NoSQL les plus populaires. Il doit sa célébrité à son évolutivité, sa puissance, sa fiabilité et sa facilité d’utilisation. Dans cet article, nous allons vous montrer de quelle manière importer et exporter vos bases de données MongoDB.

      Notez que par import et export, nous faisons référence aux opérations qui traitent des données sous un format lisible par l’homme, compatibles avec d’autres produits logiciels. En revanche, les opérations de sauvegarde et de restauration créent ou utilisent des données binaires spécifiques à MongoDB, qui préservent la cohérence et l’intégrité de vos données et également ses attributs MongoDB spécifiques. Par conséquent, lors de la migration, il est généralement recommandé d’utiliser la sauvegarde et la restauration dans la mesure où les systèmes source et cible sont compatibles.

      La sauvegarde, la restauration et les tâches de migration ne sont pas traitées dans cet article. Pour plus d’informations à ce sujet, consultez Comment sauvegarder, restaurer et migrer une base de données MongoDB sur Ubuntu 20.04.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

      Étape 1 — Importer des informations dans MongoDB

      Pour apprendre à importer des informations dans MongoDB, nous allons utiliser un échantillon populaire de base de données MongoDB, les restaurants. Elle est au format .json et peut être téléchargée en utilisant wget de la manière suivante :

      • wget https://raw.githubusercontent.com/mongodb/docs-assets/primer-dataset/primer-dataset.json

      Une fois le téléchargement terminé, vous devriez obtenir un fichier nommé primer-dataset.json (de 12 Mo) dans le répertoire actuel. Importons les données de ce fichier dans une nouvelle base de données que nous appellerons newdb et dans une collection nommée restaurants.

      Utilisez la commande mongoimport de la manière suivante :

      • sudo mongoimport --db newdb --collection restaurants --file primer-dataset.json

      Le résultat ressemblera à ceci :

      Output
      2020-11-11T19:37:55.607+0000    connected to: mongodb://localhost/
2020-11-11T19:37:57.841+0000    25359 document(s) imported successfully. 0 document(s) failed to import

      Comme la commande ci-dessus l’indique, nous avons importé 25 359 documents. Étant donné que nous ne disposions pas d’une base de données appelée newdb, MongoDB l’a créée automatiquement.

      Vérifions l’importation.

      Connectez-vous à la base de données newdb nouvellement créée :

      Vous êtes maintenant connecté à l'instance de base de données newdb. Notez que votre invite a changé et indique désormais que vous êtes connecté à la base de données.

      Comptez les documents dans la collection de restaurants en utilisant la commande suivante :

      Le résultat affichera 25359, qui correspond au nombre de documents importés. Pour procéder à une vérification plus approfondie, vous pouvez sélectionner le premier document dans la collection des restaurants de la manière suivante :

      Le résultat ressemblera à ceci :

      [secondary label Output]
{
    "_id" : ObjectId("5fac3d937f12c471b3f26733"),
    "address" : {
        "building" : "1007",
        "coord" : [
            -73.856077,
            40.848447
        ],
        "street" : "Morris Park Ave",
        "zipcode" : "10462"
    },
    "borough" : "Bronx",
    "cuisine" : "Bakery",
    "grades" : [
        {
            "date" : ISODate("2014-03-03T00:00:00Z"),
            "grade" : "A",
            "score" : 2
        },
...
    ],
    "name" : "Morris Park Bake Shop",
    "restaurant_id" : "30075445"
}

      Une telle vérification détaillée pourrait révéler la présence de problèmes avec les documents comme avec leur contenu, leur encodage, etc. Le format json utilise l'encodage UTF-8 et vos exportations et importations devraient utiliser ce même encodage. Gardez cela à l'esprit lorsque vous modifiez des fichiers json manuellement. Dans le cas contraire, MongoDB gérera cela automatiquement à votre place.

      Pour quitter l'invite MongoDB, tapez exit à l'apparition de l'invite :

      Vous serez renvoyé à l'invite de ligne de commande normale en tant que non-root user.

      Étape 2 — Exporter des informations à partir de MongoDB

      Comme nous l'avons précédemment mentionné, en exportant des informations MongoDB, vous pouvez obtenir un fichier de texte lisible par l'humain. Les informations sont exportées par défaut sous format json, mais vous pouvez les également exporter sous csv (valeur séparée par des virgules).

      Pour exporter des informations de MongoDB, utilisez la commande mongoexport. Elle vous permet de procéder à une exportation très minutieuse afin que vous puissiez spécifier une base de données, une collection, un champ et même utiliser une requête pour l'exportation.

      Par exemple, un mongoexport simple consisterait à exporter la collection de restaurants à partir de la base de données newdb que nous avons précédemment importée. Vous pouvez procéder à cette opération de la manière suivante :

      • sudo mongoexport --db newdb -c restaurants --out newdbexport.json

      Dans la commande ci-dessus, nous utilisons ---db pour spécifier la base de données, -c pour la collection et --out pour le fichier dans lequel les données seront enregistrées.

      La sortie d'un mongoexport réussie devrait ressembler à ceci :

      Output
      2020-11-11T19:39:57.595+0000    connected to: mongodb://localhost/
2020-11-11T19:39:58.619+0000    [###############.........]  newdb.restaurants  16000/25359  (63.1%)
2020-11-11T19:39:58.871+0000    [########################]  newdb.restaurants  25359/25359  (100.0%)
2020-11-11T19:39:58.871+0000    exported 25359 records

      La sortie ci-dessus indique que 25 359 documents ont été importés, le même nombre que celui des documents importés.

      Dans certains cas, vous aurez éventuellement besoin d'exporter uniquement une partie de votre collection. En considérant la structure et le contenu du fichier json des restaurants, exportons tous les restaurants qui satisfont aux critères suivants : localisés dans le quartier du Bronx et proposant de la cuisine chinoise. Pour obtenir ces informations directement, tout en étant connecté à MongoDB, connectez-vous à nouveau à la base de données :

      Ensuite, utilisez la requête suivante :

      • db.restaurants.find( { "borough": "Bronx", "cuisine": "Chinese" } )

      Les résultats s'affichent sur le terminal :

      Output
      • 2020-12-03T01:35:25.366+0000    connected to: mongodb://localhost/

      • 2020-12-03T01:35:25.410+0000    exported 323 records

      Pour quitter l'invite MongoDB, tapez exit :

      Si vous souhaitez exporter les données à partir d'une ligne de commande sudo, plutôt que pendant que vous êtes connecté à la base de données, intégrez la requête précédente dans la commande mongoexport, en la spécifiant pour l'argument -q comme ceci :

      • sudo mongoexport --db newdb -c restaurants -q "{"borough": "Bronx", "cuisine": "Chinese"}" --out Bronx_Chinese_retaurants.json

      Notez que nous omettons les guillemets en utilisant backslash () dans la requête. De la même manière, vous devez omettre tout autre caractère spécial dans la requête.

      Si l'exportation est probante, le résultat devrait ressembler à ce qui suit :

      Output
      2020-11-11T19:49:21.727+0000    connected to: mongodb://localhost/
2020-11-11T19:49:21.765+0000    exported 323 records

      Ce qui précède indique que 323 enregistrements ont été exportés. Vous pouvez les trouver dans le fichier Bronx_Chinese_retaurants.json que nous avons spécifié.

      Utilisez cat et less pour analyser les données :

      • cat Bronx_Chinese_retaurants.json | less

      Utilisez SPACE pour paginer à travers les données :

      Output
      • date":{"$date":"2015-01-14T00:00:00Z"},"grade":"Z","score":36}],"na{"_id":{"$oid":"5fc8402d141f5e54f9054f8d"},"address":{"building":"1236","coord":[-73.8893654,40.81376179999999],"street":"238 Spofford Ave","zipcode":"10474"},"borough":"Bronx","cuisine":"Chinese","grades":[{"date":{"$date":"2013-12-30T00:00:00Z"},"grade":"A","score":8},{"date":{"$date":"2013-01-08T00:00:00Z"},"grade":"A","score":10},{"date":{"$date":"2012-06-12T00:00:00Z"},"grade":"B","score":15}],

      • 

      • . . .

      Appuyez sur q pour fermer. Vous pouvez maintenant importer et exporter une base de données MongoDB.

      Conclusion

      Cet article vous a présenté les éléments essentiels de l'importation et l'exportation d'informations vers et depuis une base de données MongoDB. Vous pouvez approfondir vos connaissances en consultant Comment sauvegarder, restaurer et migrer une base de données MongoDB sur Ubuntu 20.04.

      Vous pouvez également envisager d'utiliser une réplication. La réplication vous permet de continuer à exécuter votre service MongoDB sans interruption à partir d'un serveur MongoDB esclave alors que vous restaurez le maître à partir d'une défaillance. Une partie de la réplication est le operations log (oplog). Il enregistre toutes les opérations qui modifient vos données. Vous pouvez utiliser ce journal, tout comme vous utiliseriez le journal binaire dans MySQL, pour restaurer vos données une fois la dernière sauvegarde effectuée. N'oubliez pas que, étant donné que les sauvegardes se font généralement pendant la nuit, si vous décidez de restaurer une sauvegarde le soir, vous manquerez toutes les mises à jour qui auront lieu depuis la dernière sauvegarde.



      Source link

      Comment utiliser l’API Fetch de JavaScript pour récupérer des données


      Introduction

      Il fut un temps où l’on utilisait XMLHttpRequest pour créer des requêtes API. Il n’intégrait pas les promesses et n’était pas conçu pour générer des codes JavaScript propres. En utilisant jQuery, vous avez utilisé la syntaxe de nettoyage avec jQuery.ajax().

      Maintenant, JavaScript intègre un moyen qui lui est propre de créer des requêtes API. Il s’agit de l’API Fetch, une nouvelle norme qui permet de réaliser des requêtes sur un serveur en utilisant des promesses. Elle intègre cependant bien d’autres fonctionnalités.

      Au cours de ce tutoriel, vous allez apprendre à utiliser API Fetch pour réaliser des requêtes GET et POST.

      Conditions préalables

      Pour terminer ce tutoriel, vous aurez besoin des éléments suivants :

      Étape 1 — Premiers pas avec la syntaxe de l’API Fetch

      Pour utiliser l’API Fetch, appelez la méthode fetch, qui accepte l’URL de l’API comme paramètre :

      fetch(url)

      Après la méthode fetch(), ajoutez la méthode de promesse then() :

      .then(function() {

})

      La méthode fetch() retourne une promesse. Si la promesse renvoyée est resolve, cela signifie que la fonction dans la méthode then() est bien exécutée. Cette fonction contient le code qui permet de traiter les données reçues à partir de l’API.

      Sous la méthode then(), ajoutez la méthode catch() :

      .catch(function() {

});

      Il se peut que l’API que vous appelez en utilisant fetch() soit défaillante ou que d’autres erreurs se produisent. Le cas échéant, le système renverra la promesse reject. Vous pouvez utiliser la méthode cath pour gérer reject. Le code dans catch() sera exécuté dans le cas où une erreur se produit lors de l’appel de l’API de votre choix.

      Pour résumer, l’utilisation de l’API Fetch ressemblera à l’exemple suivant :

      fetch(url)
.then(function() {

})
.catch(function() {

});

      En ayant une compréhension de la syntaxe qui permet d’utiliser l’API Fetch, vous pouvez désormais passer à l’utilisation de fetch() sur une API réelle.

      Étape 2 — Utilisation de Fetch pour obtenir des données à partir d’une API

      Les échantillons de code suivants seront basés sur l’API Random User. En utilisant l’API, vous obtiendrez dix utilisateurs que vous pourrez afficher sur la page en utilisant Vanilla JavaScript.

      L’idée est de récupérer toutes les données de l’API Random User et de les afficher dans les éléments de la liste de l’auteur. Commencez par créer un fichier HTML, ajoutez un titre et une liste non ordonnée avec l’id des authors :

      <h1>Authors</h1>
<ul id="authors"></ul>

      Ajoutez maintenant les balises script au bas de votre fichier HTML et utilisez un sélecteur DOM pour récupérer l’ul. Utilisez l’argument getElementById avec authors. N’oubliez pas, authors est l’id de l’ul précédemment créé :

      <script>

    const ul = document.getElementById('authors');

</script>

      Créez une variable constante nommée url qui contiendra l’URL de l’API qui renverra dix utilisateurs aléatoires :

      const url="https://randomuser.me/api/?results=10";

      Une fois que ul et url sont créés, il est temps pour vous de créer les fonctions qui serviront à créer les éléments de la liste. Créez une fonction appelée createNode qui prend un paramètre appelé element :

      function createNode(element) {

}

      Plus tard, lorsque vous appellerez createNode, vous devrez transmettre le nom d’un élément HTML réel à créer.

      Dans la fonction, ajoutez une instruction return qui renvoie element en utilisant document.createElement() :

      function createNode(element) {
    return document.createElement(element);
}

      En outre, vous devrez créer une fonction appelée append qui intègre deux paramètres : parent et el :

      function append(parent, el) {

}

      Cette fonction ajoutera el au parent en utilisant document.createElement :

      function append(parent, el) {
    return parent.appendChild(el);
}

      createNode et append sont tous deux prêts à être utilisés. Maintenant, en utilisant l’API Fetch, appelez l’API Random User en utilisant fetch() avec l’argument url :

      fetch(url)

      fetch(url)
  .then(function(data) {

    })
  })
  .catch(function(error) {

  });

      Dans le code ci-dessus, vous appelez l’API Fetch et passez l’URL à l’API Random User. Ensuite, vous recevrez une réponse. Cependant, la réponse que vous obtenez n’est pas JSON, mais plutôt un objet avec une série de méthodes utilisables en fonction de ce que vous voulez faire avec les informations. Pour convertir l’objet renvoyé en JSON, utilisez la méthode json().

      Ajoutez la méthode then() qui contiendra une fonction avec un paramètre appelé resp :

      fetch(url)
.then((resp) => )

      Le paramètre resp prend la valeur de l’objet renvoyé de fetch(url). Utilisez la méthode json() pour convertir resp en données JSON :

      fetch(url)
.then((resp) => resp.json())

      Il vous reste encore à traiter les données JSON. Ajoutez une autre instruction then() avec une fonction dont l’argument s’appelle data :

      .then(function(data) {

    })
})

      Dans cette fonction, créez une variable appelée authors, qui est définie comme égale à data.results :

      .then(function(data) {
    let authors = data.results;

      Pour chaque auteur dans authors, il vous faudra créer un élément de liste qui affiche leur photographie et leur nom respectifs. La méthode map() est idéale pour faire cela :

      let authors = data.results;
return authors.map(function(author) {

})

      Dans votre fonction map, créez une variable appelée li qui sera définie comme égale à createNode avec li (l’élément HTML) comme argument :

      return authors.map(function(author) {
    let li = createNode('li');
})

      Répétez cette manœuvre pour créer un élément span et un élément img :

      let li = createNode('li');
let img = createNode('img');
let span = createNode('span');

      L’API propose un nom pour l’auteur et une image qui accompagne le nom. Définissez l’img.src sur l’image de l’auteur :

      let img = createNode('img');
let span = createNode('span');

img.src = author.picture.medium;

      L’élément span doit contenir le prénom et le nom de famille de l’auteur. Pour cela, utilisez la propriété innerHTML et l’interpolation des chaînes de caractères :

      img.src = author.picture.medium;
span.innerHTML = `${author.name.first} ${author.name.last}`;

      Une fois l’image et l’élément de liste créés avec l’élément span, vous pouvez utiliser la fonction append précédemment créée pour afficher ces éléments sur la page :

      append(li, img);
append(li, span);
append(ul, li);

      Une fois les deux fonctions then() terminées, vous pouvez maintenant ajouter la fonction catch(). Cette fonction enregistrera l’erreur potentielle sur la console :

      .catch(function(error) {
  console.log(error);
});

      Voici le code complet de la requête que vous avez créée :

      function createNode(element) {
    return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

const ul = document.getElementById('authors');
const url="https://randomuser.me/api/?results=10";

fetch(url)
.then((resp) => resp.json())
.then(function(data) {
  let authors = data.results;
  return authors.map(function(author) {
    let li = createNode('li');
    let img = createNode('img');
    let span = createNode('span');
    img.src = author.picture.medium;
    span.innerHTML = `${author.name.first} ${author.name.last}`;
    append(li, img);
    append(li, span);
    append(ul, li);
  })
})
.catch(function(error) {
  console.log(error);
});

      Vous avez réussi à réaliser une requête GET en utilisant l’API Random User et l’API Fetch. Au cours de la prochaine étape, vous allez apprendre à réaliser des requêtes POST.

      Étape 3 — Traitement des requêtes POST

      Fetch utilise par défaut les requêtes GET, mais vous pouvez utiliser tous les autres types de requêtes, changer les en-têtes et envoyer des données. Pour ce faire, vous devez configurer votre objet et le passer comme le deuxième argument de la fonction fetch.

      Avant de créer une requête POST, créez les données que vous souhaitez envoyer à l’API. Il s’agira d’un objet appelé data avec le name clé et la valeur Sammy (ou votre nom) :

      const url="https://randomuser.me/api";

let data = {
  name: 'Sammy'
}

      Veillez à bien inclure une variable constante qui contient le lien vers l’API Random User.

      Comme il s’agit d’une requête POST, vous devrez l’indiquer de manière explicite. Créez un objet appelé fetchData :

      let fetchData = {

}

      Cet objet doit inclure trois clés : method, body et headers. La clé method doit avoir la valeur 'POST'. body doit être défini comme égal à l’objet data qui vient d’être créé. headers devrait avoir la valeur des new Headers() :

      let fetchData = {
  method: 'POST',
  body: data,
  headers: new Headers()
}

      L’interface Headers est une propriété de l’API Fetch qui vous permet d’effectuer diverses actions sur les en-têtes des requêtes et des réponses HTTP. Si vous souhaitez en savoir plus à ce sujet, vous pourrez trouver de plus amples informations dans l’article suivant : Comment définir les routes et les méthodes de requête HTTP dans Express.

      Une fois ce code en place, vous pouvez réaliser la requête POST en utilisant l’API Fetch. Vous allez inclure url et fetchData comme arguments pour votre requête POST fetch :

      fetch(url, fetchData)

      La fonction then() comprendra un code qui gère la réponse reçue du serveur API Random User :

      fetch(url, fetchData)
.then(function() {
    // Handle response you get from the server
});

      Vous disposez également d’une autre option pour créer un objet et utiliser la fonction fetch(). Au lieu de créer un objet comme fetchData, vous pouvez utiliser le constructeur de requêtes pour créer votre objet de requête. Pour ce faire, créez une variable appelée request :

      const url="https://randomuser.me/api";

let data = {
  name: 'Sara'
}

var request =

      La variable request doit être configurée comme new Request. La construction New Request prend deux arguments : l’url de l’API url (url) et un objet. L’objet doit également inclure les clés method, body et headers tout comme fetchData :

      var request = new Request(url, {
    method: 'POST',
    body: data,
    headers: new Headers()
});

      Maintenant, vous pouvez utiliser request comme le seul argument de fetch() car il inclut également l’url de l’API :

      fetch(request)
.then(function() {
    // Handle response we get from the API
})

      L’ensemble de votre code ressemblera à ce qui suit :

      const url="https://randomuser.me/api";

let data = {
  name: 'Sara'
}

var request = new Request(url, {
    method: 'POST',
    body: data,
    headers: new Headers()
});

fetch(request)
.then(function() {
    // Handle response we get from the API
})

      Vous connaissez maintenant deux méthodes qui vous permettront de créer et d’exécuter des requêtes POST avec l’API Fetch.

      Conclusion

      Même si la plupart des navigateurs ne prennent pas l’API Fetch en charge, il s’agit d’une superbe alternative à XMLHttpRequest. Si vous souhaitez apprendre à appeler les API Web en utilisant React, consultez cet article sur ce même sujet.



      Source link

      Forgot Your Password ?