From a03d0912b32c8bfff7e5e2ff31e31c90a83457fa Mon Sep 17 00:00:00 2001 From: Valentin Chassignol Date: Sat, 6 Oct 2018 20:52:03 +0200 Subject: [PATCH 01/20] Debut traduction de using-axios-to-consume-apis --- src/v2/cookbook/using-axios-to-consume-apis.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index b246470598..b66dc3c81f 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -1,16 +1,16 @@ --- -title: Using Axios to Consume APIs (EN) +title: Utiliser Axios pour consommer des API type: cookbook order: 9 --- ## Base Example -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

There are many times when building application for the web that you may want to consume and display data from an API. There are several ways to do so, but a very popular approach is to use [axios](https://github.com/axios/axios), a promise-based HTTP client.

+

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

Lors de la création d'une application Web, il est fréquent que vous souhaitiez utiliser et afficher les données provenant d'une API. Il existe plusieurs manières de le faire, mais une approche très populaire consiste à utiliser [axios](https://github.com/axios/axios), un client HTTP basé sur les Promesses.

-In this exercise, we'll use the [CoinDesk API](https://www.coindesk.com/api/) to walk through displaying Bitcoin prices, updated every minute. First, we'd install axios with either npm/yarn or through a CDN link. +Dans cet exercice, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix en Bitcoins qui sont mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un lien CDN. -There are a number of ways we can request information from the API, but it's nice to first find out what the shape of the data looks like, in order to know what to display. In order to do so, we'll make a call to the API endpoint and output it so we can see it. We can see in the CoinDesk API documentation, that this call will be made to `https://api.coindesk.com/v1/bpi/currentprice.json`. So first, we'll create a data property that will eventually house our information, and we'll retrieve the data and assign it using the `mounted` lifecycle hook: +Il existe plusieures manières de demander des informations à une API, mais il est préférable de d'abord savoir à quoi ressemble la structure des données qu'elles renvoient afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions voir sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une propriété de données qui hébergera nos informations, puis nous récupérerons les données et les attribuerons à l'aide du point de cycle de vie `mounted`: ```js new Vue({ From 13b06368d53f353861b7bc13d43e5a6a75c68797 Mon Sep 17 00:00:00 2001 From: Valentin Chassignol Date: Wed, 10 Oct 2018 13:59:06 +0200 Subject: [PATCH 02/20] Update using-axios-to-consume-apis.md --- .../cookbook/using-axios-to-consume-apis.md | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index b66dc3c81f..a3b8ac104f 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -10,7 +10,7 @@ order: 9 Dans cet exercice, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix en Bitcoins qui sont mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un lien CDN. -Il existe plusieures manières de demander des informations à une API, mais il est préférable de d'abord savoir à quoi ressemble la structure des données qu'elles renvoient afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions voir sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une propriété de données qui hébergera nos informations, puis nous récupérerons les données et les attribuerons à l'aide du point de cycle de vie `mounted`: +Il existe plusieures manières de demander des informations à une API, mais il est préférable de d'abord savoir à quoi ressemble la structure des données qu'elle renvoit afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions voir sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une propriété de données qui hébergera nos informations, puis nous récupérerons les données et les attribuerons à l'aide du point de cycle de vie `mounted`: ```js new Vue({ @@ -34,18 +34,18 @@ new Vue({ ``` -And what we get is this: +Et nous obtenons ceci : -

See the Pen First Step Axios and Vue by Vue (@Vue) on CodePen.

+

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) sur CodePen.

-Excellent! We've got some data. But it looks pretty messy right now so let's display it properly and add some error handling in case things aren't working as expected or it takes longer than we thought to get the information. +Parfait ! Nous avons des données. Mais cela semble assez désordonné pour le moment, alors affichons-les correctement et ajoutons un traitement d'erreur si les choses ne fonctionnent pas comme prévu ou s'il faut plus de temps que prévu pour obtenir les informations. -## Real-World Example: Working with the Data +## Exemple concret: utilisation des données -### Displaying Data from an API +### Affichage des données d'une API -It's pretty typical that the information we'll need is within the response, and we'll have to traverse what we've just stored to access it properly. In our case, we can see that the price information we need lives in `response.data.bpi`. If we use this instead, our output is as follows: +Il est assez courant que les informations dont nous avons besoin se trouvent dans la réponse. Nous devrons parcourir ce que nous venons de stocker pour y accéder correctement. Dans notre cas, nous pouvons voir que les informations de prix dont nous avons besoin sont stockées dans `response.data.bpi`. Si nous l'utilisons, notre sortie sera : ```js axios @@ -53,14 +53,14 @@ axios .then(response => (this.info = response.data.bpi)) ``` -

See the Pen Second Step Axios and Vue by Vue (@Vue) on CodePen.

+

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) on CodePen.

-This is a lot easier for us to display, so we can now update our HTML to display only the information we need from the data we've received, and we'll create a [filter](../api/#Vue-filter) to make sure that the decimal is in the appropriate place as well. +C’est beaucoup plus facile à afficher; nous pouvons donc mettre à jour notre code HTML pour n’afficher que les informations dont nous avons besoin à partir des données reçues, et nous allons créer un [filtre](../api/#Vue-filter) pour vous assurer que la décimale se trouve également à la place appropriée. ```html
-

Bitcoin Price Index

+

Prix Bitcoin Index

See the Pen Third Step Axios and Vue by Vue (@Vue) on CodePen.

+

Voir l'exemple Troisieme Étape Axios et Vue par Vue (@Vue) on CodePen.

### Dealing with Errors From a33ee916c1e04eb8434ebd1c6bbd070421055e45 Mon Sep 17 00:00:00 2001 From: Valentin Chassignol Date: Tue, 20 Nov 2018 08:49:26 +0100 Subject: [PATCH 03/20] Update using-axios-to-consume-apis.md --- src/v2/cookbook/using-axios-to-consume-apis.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index a3b8ac104f..213bcaabd5 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -84,15 +84,15 @@ filters: {

Voir l'exemple Troisieme Étape Axios et Vue par Vue (@Vue) on CodePen.

-### Dealing with Errors +### Travailler avec les erreurs -There are times when we might not get the data we need from the API. There are several reasons that our axios call might fail, including but not limited to: +Certaines fois, nous pouvons ne pas recevoir de données de l'API. Il peut y avoir de nombreuses raisons qu'un appel puisse échoué. Par exemple : -* The API is down. -* The request was made incorrectly. -* The API isn't giving us the information in the format that we anticipated. +* L'API est hors-service. +* Le requête a mal été réalisée. +* L'API ne nous donne pas les informations dans un format attendu. -When making this request, we should be checking for just such circumstances, and giving ourselves information in every case so we know how to handle the problem. In an axios call, we'll do so by using `catch`. +Quand nous créons cette requête, nous devrions vérifier pour de telles circonstances et nous informer dans tous les cas pour savoir comment gérerce problème. Dans un appelle aios, nous allons le faire en utilisant `catch`. ```js axios From c53e9caddb1339f042af51defc490fc045c0d2b5 Mon Sep 17 00:00:00 2001 From: Valentin Chassignol Date: Sun, 27 Jan 2019 13:37:42 +0100 Subject: [PATCH 04/20] Finish translation using-axios-to-consume-apis.md --- .../cookbook/using-axios-to-consume-apis.md | 54 +++++++++---------- 1 file changed, 26 insertions(+), 28 deletions(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 213bcaabd5..bd2bd85cac 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -4,13 +4,11 @@ type: cookbook order: 9 --- -## Base Example +## Exemple simple -

Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur le dépôt GitHub dédié de Vuejs-FR.

Lors de la création d'une application Web, il est fréquent que vous souhaitiez utiliser et afficher les données provenant d'une API. Il existe plusieurs manières de le faire, mais une approche très populaire consiste à utiliser [axios](https://github.com/axios/axios), un client HTTP basé sur les Promesses.

+Dans cet exemple, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix du Bitcoin qui sont mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un lien CDN. -Dans cet exercice, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix en Bitcoins qui sont mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un lien CDN. - -Il existe plusieures manières de demander des informations à une API, mais il est préférable de d'abord savoir à quoi ressemble la structure des données qu'elle renvoit afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions voir sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une propriété de données qui hébergera nos informations, puis nous récupérerons les données et les attribuerons à l'aide du point de cycle de vie `mounted`: +Il existe plusieurs manières d'interroger une API, mais il est préférable de d'abord connaitre la structure des données qu'elle renvoi afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions connaitre sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une propriété de données qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l'aide de l'étape `mounted` du cycle de vie : ```js new Vue({ @@ -34,18 +32,18 @@ new Vue({
``` -Et nous obtenons ceci : +Nous obtenons ceci :

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) sur CodePen.

Parfait ! Nous avons des données. Mais cela semble assez désordonné pour le moment, alors affichons-les correctement et ajoutons un traitement d'erreur si les choses ne fonctionnent pas comme prévu ou s'il faut plus de temps que prévu pour obtenir les informations. -## Exemple concret: utilisation des données +## Exemple concret: l'utilisation des données ### Affichage des données d'une API -Il est assez courant que les informations dont nous avons besoin se trouvent dans la réponse. Nous devrons parcourir ce que nous venons de stocker pour y accéder correctement. Dans notre cas, nous pouvons voir que les informations de prix dont nous avons besoin sont stockées dans `response.data.bpi`. Si nous l'utilisons, notre sortie sera : +Il est assez courant que les informations dont nous avons besoin se trouvent dans la réponse. Nous devons parcourir ce que nous venons de stocker pour y accéder correctement. Dans notre cas, nous pouvons voir que les informations de prix dont nous avons besoin sont stockées dans `response.data.bpi`. Si nous l'utilisons, notre sortie sera : ```js axios @@ -53,14 +51,14 @@ axios .then(response => (this.info = response.data.bpi)) ``` -

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) on CodePen.

+

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) sur CodePen.

-C’est beaucoup plus facile à afficher; nous pouvons donc mettre à jour notre code HTML pour n’afficher que les informations dont nous avons besoin à partir des données reçues, et nous allons créer un [filtre](../api/#Vue-filter) pour vous assurer que la décimale se trouve également à la place appropriée. +C’est beaucoup plus facile à afficher ; nous pouvons donc mettre à jour notre code HTML pour n’afficher que les informations dont nous avons besoin à partir des données reçues. Pour ce faire, nous allons créer un [filtre](../api/#Vue-filter) pour nous assurer que la décimale se trouve également à la place appropriée. ```html
-

Prix Bitcoin Index

+

Bitcoin Price Index

Voir l'exemple Troisieme Étape Axios et Vue par Vue (@Vue) on CodePen.

+

Voir l'exemple Troisieme Étape Axios et Vue par Vue (@Vue) sur CodePen.

-### Travailler avec les erreurs +### Travailler avec des erreurs -Certaines fois, nous pouvons ne pas recevoir de données de l'API. Il peut y avoir de nombreuses raisons qu'un appel puisse échoué. Par exemple : +Certaines fois, nous pouvons ne pas recevoir de données de l'API. Il peut y avoir de nombreuses raisons qu'un appel puisse échouer. Par exemple : * L'API est hors-service. -* Le requête a mal été réalisée. -* L'API ne nous donne pas les informations dans un format attendu. +* La requête a mal été réalisée. +* L'API ne nous donne pas les informations dans le format attendu. -Quand nous créons cette requête, nous devrions vérifier pour de telles circonstances et nous informer dans tous les cas pour savoir comment gérerce problème. Dans un appelle aios, nous allons le faire en utilisant `catch`. +Quand nous créons cette requête, nous devrions vérifier si de tels cas se produisent et nous informer pour traiter ce problème. Dans un appel axios, nous pouvons le faire en utilisant `catch`. ```js axios @@ -101,7 +99,7 @@ axios .catch(error => console.log(error)) ``` -This will let us know if something failed during the API request, but what if the data is mangled or the API is down? Right now the user will just see nothing. We might want to build a loader for this case, and then tell the user if we're not able to get the data at all. +Cela nous permettra de savoir si quelque chose a échoué lors de la requête à l'API, mais que se passerait-il si les données sont endommagées ou si l'API est en panne ? Pour l'instant, l'utilisateur ne verra rien. Nous devrions peut-être créer un loader pour ce cas, puis informer l'utilisateur si nous ne pouvons pas obtenir les données. ```js new Vue({ @@ -138,11 +136,11 @@ new Vue({

Bitcoin Price Index

-

We're sorry, we're not able to retrieve this information at the moment, please try back later

+

Nous sommes désolés, nous ne sommes pas en mesure de récupérer ces informations pour le moment. Veuillez réessayer ultérieurement.

-
Loading...
+
Chargement...
``` -You can hit the rerun button on this pen to see the loading status briefly while we gather data from the API: +Vous pouvez appuyer sur le bouton de réexécution de cet exemple pour connaître brièvement l'état du chargement pendant la collecte des données à partir de l'API : -

See the Pen Fourth Step Axios and Vue by Vue (@Vue) on CodePen.

+

Voir l'exemple Quatrieme Étape Axios et Vue par Vue (@Vue) sur CodePen.

-This can be even further improved with the use of components for different sections and more distinct error reporting, depending on the API you're using and the complexity of your application. +Cela peut encore être amélioré avec l'utilisation de composants pour différentes sections et un rapport d'erreurs plus distinct, en fonction de l'API utilisée et de la complexité de votre application. -## Alternative Patterns +## Modèles alternatifs ### Fetch API -The [Fetch API](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) is a powerful native API for these types of requests. You may have heard that one of the benefits of the Fetch API is that you don't need to load an external resource in order to use it, which is true! Except... that it's not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now. This may very well change in the future though. +L'[API Fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) est une API native puissante pour ces types de demandes. Vous avez peut-être entendu dire que l'un des avantages de l'API Fetch est qu'il n'est pas nécessaire de charger une ressource externe pour l'utiliser, ce qui est vrai ! Sauf que ... ce n'est pas encore complètement supporté, vous aurez donc toujours besoin d'utiliser un polyfill. Il y a aussi quelques pièges à éviter avec cette API, raison pour laquelle beaucoup préfèrent utiliser axios pour le moment. Cela pourrait cependant très bien changer dans le futur. -If you're interested in using the Fetch API, there are some [very good articles](https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api) explaining how to do so. +Si vous êtes intéressé par l’utilisation de l’API Fetch vous trouverez de [très bons articles](https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api) expliquant comment faire. -## Wrapping Up +## Aller plus loin -There are many ways to work with Vue and axios beyond consuming and displaying an API. You can also communicate with Serverless Functions, post/edit/delete from an API where you have write access, and many other benefits. Due to the straightforward integration of these two libraries, it's become a very common choice for developers who need to integrate HTTP clients into their workflow. +Il existe de nombreuses façons de travailler avec Vue et axios au-delà de la consommation et de l'affichage d'une API. Vous pouvez également communiquer avec des fonctions sans serveur, publier / éditer / supprimer à partir d'une API où vous disposez d'un accès en écriture, et de nombreux autres avantages. En raison de l’intégration directe de ces deux bibliothèques, c’est devenu un choix très courant pour les développeurs qui doivent intégrer des clients HTTP à leur workflow. From ac623b0d919e7aa3dfd902911de1d52e852bbe58 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Wed, 30 Jan 2019 18:37:52 +0100 Subject: [PATCH 05/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index bd2bd85cac..57d80264ac 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -54,7 +54,7 @@ axios

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) sur CodePen.

-C’est beaucoup plus facile à afficher ; nous pouvons donc mettre à jour notre code HTML pour n’afficher que les informations dont nous avons besoin à partir des données reçues. Pour ce faire, nous allons créer un [filtre](../api/#Vue-filter) pour nous assurer que la décimale se trouve également à la place appropriée. +C'est beaucoup plus facile à afficher ; nous pouvons donc mettre à jour notre code HTML pour n'afficher que les informations dont nous avons besoin à partir des données reçues. Pour ce faire, nous allons créer un [filtre](../api/#Vue-filter) pour nous assurer que la décimale se trouve également à la place appropriée. ```html
From 3038e704c00c0d433142973aafca2763d27a1520 Mon Sep 17 00:00:00 2001 From: Julien Fradin Date: Wed, 30 Jan 2019 18:38:41 +0100 Subject: [PATCH 06/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 57d80264ac..73eae191d1 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -84,7 +84,7 @@ filters: { ### Travailler avec des erreurs -Certaines fois, nous pouvons ne pas recevoir de données de l'API. Il peut y avoir de nombreuses raisons qu'un appel puisse échouer. Par exemple : +Parfois, nous pouvons ne pas recevoir de données de l'API. Il peut y avoir de nombreuses raisons pour qu'un appel puisse échouer. Par exemple : * L'API est hors-service. * La requête a mal été réalisée. From c534480598917f1b557d540e180fde2a13ba3f87 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Wed, 30 Jan 2019 18:39:33 +0100 Subject: [PATCH 07/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 73eae191d1..331e5b7484 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -39,7 +39,7 @@ Nous obtenons ceci : Parfait ! Nous avons des données. Mais cela semble assez désordonné pour le moment, alors affichons-les correctement et ajoutons un traitement d'erreur si les choses ne fonctionnent pas comme prévu ou s'il faut plus de temps que prévu pour obtenir les informations. -## Exemple concret: l'utilisation des données +## Exemple concret : l'utilisation des données ### Affichage des données d'une API From 7bf2949813217581e21825615f18bdf271ed611f Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Wed, 30 Jan 2019 18:39:49 +0100 Subject: [PATCH 08/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 331e5b7484..ea34699626 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -37,7 +37,7 @@ Nous obtenons ceci :

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) sur CodePen.

-Parfait ! Nous avons des données. Mais cela semble assez désordonné pour le moment, alors affichons-les correctement et ajoutons un traitement d'erreur si les choses ne fonctionnent pas comme prévu ou s'il faut plus de temps que prévu pour obtenir les informations. +Parfait ! Nous avons des données. Mais cela semble assez désordonné pour le moment, alors affichons-les correctement et ajoutons un traitement d'erreur si les choses ne fonctionnent pas comme prévu, ou s'il faut plus de temps que nécessaire pour obtenir les informations. ## Exemple concret : l'utilisation des données From 3e2f6acd98704cb4e20f6cc659d249eb388a2fca Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Wed, 30 Jan 2019 18:40:21 +0100 Subject: [PATCH 09/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index ea34699626..5e89d839a7 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -174,4 +174,4 @@ Si vous êtes intéressé par l’utilisation de l’API Fetch vous trouverez de ## Aller plus loin -Il existe de nombreuses façons de travailler avec Vue et axios au-delà de la consommation et de l'affichage d'une API. Vous pouvez également communiquer avec des fonctions sans serveur, publier / éditer / supprimer à partir d'une API où vous disposez d'un accès en écriture, et de nombreux autres avantages. En raison de l’intégration directe de ces deux bibliothèques, c’est devenu un choix très courant pour les développeurs qui doivent intégrer des clients HTTP à leur workflow. +Il existe de nombreuses façons de travailler avec Vue et axios au-delà de la consommation et de l'affichage d'une API. Vous pouvez également communiquer avec des Fonctions Sans Serveur, publier / éditer / supprimer à partir d'une API où vous disposez d'un accès en écriture, et de nombreux autres avantages. En raison de l’intégration directe de ces deux bibliothèques, c'est devenu un choix très courant pour les développeurs qui doivent intégrer des clients HTTP à leur workflow. From e4f5d3741d2dd551433df30746ba6e91cdcfd615 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Wed, 30 Jan 2019 18:41:18 +0100 Subject: [PATCH 10/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 5e89d839a7..2bd56e215e 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -6,7 +6,7 @@ order: 9 ## Exemple simple -Dans cet exemple, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix du Bitcoin qui sont mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un lien CDN. +Dans cet exemple, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix du Bitcoin, mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un CDN. Il existe plusieurs manières d'interroger une API, mais il est préférable de d'abord connaitre la structure des données qu'elle renvoi afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions connaitre sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une propriété de données qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l'aide de l'étape `mounted` du cycle de vie : From 79b76fa9d0b2af09728231c4962a425cb83cbc2d Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Wed, 30 Jan 2019 18:41:37 +0100 Subject: [PATCH 11/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 2bd56e215e..b5af9e5bb5 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -8,7 +8,7 @@ order: 9 Dans cet exemple, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix du Bitcoin, mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un CDN. -Il existe plusieurs manières d'interroger une API, mais il est préférable de d'abord connaitre la structure des données qu'elle renvoi afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions connaitre sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une propriété de données qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l'aide de l'étape `mounted` du cycle de vie : +Il existe plusieurs manières d'interroger une API, mais il est préférable de d'abord connaitre la structure des données qu'elle renvoi afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions connaître sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une donné qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l'aide de l'étape `mounted` du cycle de vie : ```js new Vue({ From cb2684228d47b3a5d8f7d5369384653df33ba2e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 30 Jan 2019 18:42:07 +0100 Subject: [PATCH 12/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index b5af9e5bb5..84e28082ba 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -34,7 +34,7 @@ new Vue({ Nous obtenons ceci : -

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) sur CodePen.

+

Voir l'exemple Premiere étape Axios et Vue par Vue (@Vue) sur CodePen.

Parfait ! Nous avons des données. Mais cela semble assez désordonné pour le moment, alors affichons-les correctement et ajoutons un traitement d'erreur si les choses ne fonctionnent pas comme prévu, ou s'il faut plus de temps que nécessaire pour obtenir les informations. From b1cb97836d453a56f600bded1a1cccfd0fe3cb60 Mon Sep 17 00:00:00 2001 From: Julien Fradin Date: Wed, 30 Jan 2019 18:42:49 +0100 Subject: [PATCH 13/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 84e28082ba..d6495313e8 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -168,7 +168,7 @@ Cela peut encore être amélioré avec l'utilisation de composants pour différe ### Fetch API -L'[API Fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) est une API native puissante pour ces types de demandes. Vous avez peut-être entendu dire que l'un des avantages de l'API Fetch est qu'il n'est pas nécessaire de charger une ressource externe pour l'utiliser, ce qui est vrai ! Sauf que ... ce n'est pas encore complètement supporté, vous aurez donc toujours besoin d'utiliser un polyfill. Il y a aussi quelques pièges à éviter avec cette API, raison pour laquelle beaucoup préfèrent utiliser axios pour le moment. Cela pourrait cependant très bien changer dans le futur. +L'[API Fetch](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) est une API native puissante pour ces types de demandes. Vous avez peut-être entendu dire que l'un des avantages de l'API Fetch est qu'il n'est pas nécessaire de charger une ressource externe pour l'utiliser, ce qui est vrai ! Sauf que… ce n'est pas encore complètement supporté, vous aurez donc toujours besoin d'utiliser un polyfill. Il y a aussi quelques pièges à éviter avec cette API, raison pour laquelle beaucoup préfèrent utiliser axios pour le moment. Cela pourrait cependant très bien changer dans le futur. Si vous êtes intéressé par l’utilisation de l’API Fetch vous trouverez de [très bons articles](https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api) expliquant comment faire. From 99ad021929a798684d26f1e25557e86dddbfb060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 30 Jan 2019 18:43:43 +0100 Subject: [PATCH 14/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index d6495313e8..54243ae654 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -51,7 +51,7 @@ axios .then(response => (this.info = response.data.bpi)) ``` -

Voir l'exemple Premiere Étape Axios et Vue par Vue (@Vue) sur CodePen.

+

Voir l'exemple Premiere étape Axios et Vue par Vue (@Vue) sur CodePen.

C'est beaucoup plus facile à afficher ; nous pouvons donc mettre à jour notre code HTML pour n'afficher que les informations dont nous avons besoin à partir des données reçues. Pour ce faire, nous allons créer un [filtre](../api/#Vue-filter) pour nous assurer que la décimale se trouve également à la place appropriée. From 2d71ab95abe8f37f59bdc3cf345b0437c06ee972 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 30 Jan 2019 18:43:53 +0100 Subject: [PATCH 15/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 54243ae654..414d557767 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -79,7 +79,7 @@ filters: { }, ``` -

Voir l'exemple Troisieme Étape Axios et Vue par Vue (@Vue) sur CodePen.

+

Voir l'exemple Troisieme étape Axios et Vue par Vue (@Vue) sur CodePen.

### Travailler avec des erreurs From a1420168b22d5928604b0a6564c8db2cb5827493 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Wed, 30 Jan 2019 18:44:03 +0100 Subject: [PATCH 16/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 414d557767..84fc5d99df 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -159,7 +159,7 @@ new Vue({ Vous pouvez appuyer sur le bouton de réexécution de cet exemple pour connaître brièvement l'état du chargement pendant la collecte des données à partir de l'API : -

Voir l'exemple Quatrieme Étape Axios et Vue par Vue (@Vue) sur CodePen.

+

Voir l'exemple Quatrième étape Axios et Vue par Vue (@Vue) sur CodePen.

Cela peut encore être amélioré avec l'utilisation de composants pour différentes sections et un rapport d'erreurs plus distinct, en fonction de l'API utilisée et de la complexité de votre application. From 97e147068c681852c4c3cdee7eacfb618a11825d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20Gr=C3=BCnhagel?= Date: Thu, 31 Jan 2019 19:16:04 +0100 Subject: [PATCH 17/20] Update src/v2/cookbook/using-axios-to-consume-apis.md Co-Authored-By: Vinetos --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 84fc5d99df..a07293501f 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -157,7 +157,7 @@ new Vue({
``` -Vous pouvez appuyer sur le bouton de réexécution de cet exemple pour connaître brièvement l'état du chargement pendant la collecte des données à partir de l'API : +Vous pouvez appuyer sur le bouton de réexécution de cet exemple pour connaitre brièvement l'état du chargement pendant la collecte des données à partir de l'API :

Voir l'exemple Quatrième étape Axios et Vue par Vue (@Vue) sur CodePen.

From 9e06484df49da2f710ccbeca6b572d9c1bad6c9b Mon Sep 17 00:00:00 2001 From: Valentin Chassignol Date: Sun, 3 Feb 2019 14:21:50 +0100 Subject: [PATCH 18/20] Update using-axios-to-consume-apis.md --- src/v2/cookbook/using-axios-to-consume-apis.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index a07293501f..8876b16b30 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -5,10 +5,11 @@ order: 9 --- ## Exemple simple +Lors de la création d'une application Web, il est fréquent que vous souhaitiez utiliser et afficher les données provenant d'une API. Il existe plusieurs manières de le faire, mais une approche très populaire consiste à utiliser [axios](https://github.com/axios/axios), un client HTTP basé sur les Promesses.

-Dans cet exemple, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix du Bitcoin, mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un CDN. +Dans cet exemple, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix du Bitcoin qui sont mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un lien CDN. -Il existe plusieurs manières d'interroger une API, mais il est préférable de d'abord connaitre la structure des données qu'elle renvoi afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions connaître sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une donné qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l'aide de l'étape `mounted` du cycle de vie : +Il existe plusieurs manières d'interroger une API, mais il est préférable de d'abord connaitre la structure des données qu'elle renvoie afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions connaître sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une donné qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l'aide de l'étape `mounted` du cycle de vie : ```js new Vue({ From 7d519aca25577384b1f1f5fdf3114d3b29478577 Mon Sep 17 00:00:00 2001 From: Valentin Chassignol Date: Mon, 18 Feb 2019 13:26:09 +0100 Subject: [PATCH 19/20] Update src/v2/cookbook/using-axios-to-consume-apis.md --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 8876b16b30..2829109021 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -9,7 +9,7 @@ Lors de la création d'une application Web, il est fréquent que vous souhaitiez Dans cet exemple, nous allons utiliser l'[API CoinDesk](https://www.coindesk.com/api/) pour afficher les prix du Bitcoin qui sont mis à jour toutes les minutes. Premièrement, nous devons installer axios avec npm/yarn ou à partir d'un lien CDN. -Il existe plusieurs manières d'interroger une API, mais il est préférable de d'abord connaitre la structure des données qu'elle renvoie afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions connaître sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une donné qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l'aide de l'étape `mounted` du cycle de vie : +Il existe plusieurs manières d'interroger une API, mais il est préférable de d'abord connaitre la structure des données qu'elle renvoie afin de savoir ce qu'elle va afficher. Pour ce faire, nous allons appeler le point de terminaison de l'API et afficher le résultat afin que nous puissions connaître sa structure et son contenu. Nous pouvons voir dans la documentation de l'API de CoinDesk que l'appel doit être effectué à l'adresse `https://api.coindesk.com/v1/bpi/currentprice.json`. Nous allons donc commencer par créer une donnée qui gardera nos informations, puis nous récupérerons les données et les attribuerons à l'aide de l'étape `mounted` du cycle de vie : ```js new Vue({ From 6b45df907275f11486991e8fd48cbfc406295bd2 Mon Sep 17 00:00:00 2001 From: Valentin Chassignol Date: Mon, 18 Feb 2019 13:27:35 +0100 Subject: [PATCH 20/20] Update src/v2/cookbook/using-axios-to-consume-apis.md --- src/v2/cookbook/using-axios-to-consume-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 2829109021..a62f993df0 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -85,7 +85,7 @@ filters: { ### Travailler avec des erreurs -Parfois, nous pouvons ne pas recevoir de données de l'API. Il peut y avoir de nombreuses raisons pour qu'un appel puisse échouer. Par exemple : +Parfois, nous ne pouvons pas recevoir de données de l'API. Il peut y avoir de nombreuses raisons pour qu'un appel puisse échouer. Par exemple : * L'API est hors-service. * La requête a mal été réalisée.