From 11b28d6fcec28bbd5cc1eb375deb13a9830149f6 Mon Sep 17 00:00:00 2001 From: sdras Date: Fri, 9 Mar 2018 13:22:38 +0000 Subject: [PATCH 1/8] first section of axios article --- .../cookbook/using-axios-to-consume-apis.md | 209 ++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 src/v2/cookbook/using-axios-to-consume-apis.md diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md new file mode 100644 index 0000000000..39043f3085 --- /dev/null +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -0,0 +1,209 @@ +--- +title: Using Axios To Consume APIs +type: cookbook +order: 9 +--- + +## Simple Example + +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. + +In this exercise, we'll use the Coindesk API to walk through displaying Bitcoin prices, updated every minute. First, we'd install axios with either npm/yarn or through a CDN link. + +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, which in this case we'll do using the `mounted` lifecycle hook: + +```js +new Vue({ + el: '#app', + data() { + return { + info: null + }; + }, + mounted() { + axios + .get('https://api.coindesk.com/v1/bpi/currentprice.json') + .then(response => (this.info = response)); + } +}); +``` + +```html +
+ {{ info }} +
+``` + +And what we get is this: +

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

+ + +It's pretty typical that the information we'll need is not + +## The Importance of Scoping Instance Properties + +You may be wondering: + +> "Why does `appName` start with `$`? Is that important? What does it do? + +No magic is happening here. `$` is a convention Vue uses for properties that are available to all instances. This avoids conflicts with any defined data, computed properties, or methods. + +> "Conflicts? What do you mean?" + +Another great question! If you set: + +``` js +Vue.prototype.appName = 'My App' +``` + +Then what would you expect to be logged below? + +``` js +new Vue({ + data: { + // Uh oh - appName is *also* the name of the + // instance property we defined! + appName: 'The name of some other app' + }, + beforeCreate: function () { + console.log(this.appName) + }, + created: function () { + console.log(this.appName) + } +}) +``` + +It would be `"The name of some other app"`, then `"My App"`, because `this.appName` is overwritten ([sort of](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)) by `data` when the instance is created. We scope instance properties with `$` to avoid this. You can even use your own convention if you'd like, such as `$_appName` or `ΩappName`, to prevent even conflicts with plugins or future features. + +## Real-World Example: Replacing Vue Resource with Axios + +Let's say you're replacing the [now-retired Vue Resource](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4). You really enjoyed accessing request methods through `this.$http` and you want to do the same thing with Axios instead. + +All you have to do is include axios in your project: + +``` html + + +
+ +
+``` + +Alias `axios` to `Vue.prototype.$http`: + +``` js +Vue.prototype.$http = axios +``` + +Then you'll be able to use methods like `this.$http.get` in any Vue instance: + +``` js +new Vue({ + el: '#app', + data: { + users: [] + }, + created () { + var vm = this + this.$http.get('https://jsonplaceholder.typicode.com/users') + .then(function (response) { + vm.users = response.data + }) + } +}) +``` + +## The Context of Prototype Methods + +In case you're not aware, methods added to a prototype in JavaScript gain the context of the instance. That means they can use `this` to access data, computed properties, methods, or anything else defined on the instance. + +Let's take advantage of this in a `$reverseText` method: + +``` js +Vue.prototype.$reverseText = function (propertyName) { + this[propertyName] = this[propertyName].split('').reverse().join('') +} + +new Vue({ + data: { + message: 'Hello' + }, + created: function () { + console.log(this.message) // => "Hello" + this.$reverseText('message') + console.log(this.message) // => "olleH" + } +}) +``` + +Note that the context binding will __not__ work if you use an ES6/2015 arrow function, as they implicitly bind to their parent scope. That means the arrow function version: + +``` js +Vue.prototype.$reverseText = propertyName => { + this[propertyName] = this[propertyName].split('').reverse().join('') +} +``` + +Would throw an error: + +``` log +Uncaught TypeError: Cannot read property 'split' of undefined +``` + +## When To Avoid This Pattern + +As long as you're vigilant in scoping prototype properties, using this pattern is quite safe - as in, unlikely to produce bugs. + +However, it can sometimes cause confusion with other developers. They might see `this.$http`, for example, and think, "Oh, I didn't know about this Vue feature!" Then they move to a different project and are confused when `this.$http` is undefined. Or, maybe they want to Google how to do something, but can't find results because they don't realize they're actually using Axios under an alias. + +__The convenience comes at the cost of explicitness.__ When looking at a component, it's impossible to tell where `$http` came from. Vue itself? A plugin? A coworker? + +So what are the alternatives? + +## Alternative Patterns + +### When Not Using a Module System + +In applications with __no__ module system (e.g. via Webpack or Browserify), there's a pattern that's often used with _any_ JavaScript-enhanced frontend: a global `App` object. + +If what you want to add has nothing to do with Vue specifically, this may be a good alternative to reach for. Here's an example: + +``` js +var App = Object.freeze({ + name: 'My App', + description: '2.1.4', + helpers: { + // This is a purely functional version of + // the $reverseText method we saw earlier + reverseText: function (text) { + return text.split('').reverse().join('') + } + } +}) +``` + +

If you raised an eyebrow at `Object.freeze`, what it does is prevent the object from being changed in the future. This essentially makes all its properties constants, protecting you from future state bugs.

+ +Now the source of these shared properties is more obvious: there's an `App` object defined somewhere in the app. To find it, developers can run a project-wide search. + +Another advantage is that `App` can now be used _anywhere_ in your code, whether it's Vue-related or not. That includes attaching values directly to instance options, rather than having to enter a function to access properties on `this`: + +``` js +new Vue({ + data: { + appVersion: App.version + }, + methods: { + reverseText: App.helpers.reverseText + } +}) +``` + +### When Using a Module System + +When you have access to a module system, you can easily organize shared code into modules, then `require`/`import` those modules wherever they're needed. This is the epitome of explicitness, because in each file you gain a list of dependencies. You know _exactly_ where each one came from. + +While certainly more verbose, this approach is definitely the most maintainable, especially when working with other developers and/or building a large app. From 211192d81fcbf758ec0d4fc35eaa04e2a92469dc Mon Sep 17 00:00:00 2001 From: sdras Date: Fri, 9 Mar 2018 14:19:46 +0000 Subject: [PATCH 2/8] add in formatted example, start error section --- .../cookbook/using-axios-to-consume-apis.md | 148 ++++++++---------- 1 file changed, 66 insertions(+), 82 deletions(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index 39043f3085..ac7c887f53 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -8,9 +8,9 @@ order: 9 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. -In this exercise, we'll use the Coindesk API to walk through displaying Bitcoin prices, updated every minute. First, we'd install axios with either npm/yarn or through a CDN link. +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. -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, which in this case we'll do using the `mounted` lifecycle hook: +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: ```js new Vue({ @@ -18,14 +18,14 @@ new Vue({ data() { return { info: null - }; + } }, mounted() { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') - .then(response => (this.info = response)); + .then(response => (this.info = response)) } -}); +}) ``` ```html @@ -35,86 +35,61 @@ new Vue({ ``` And what we get is this: +

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

-It's pretty typical that the information we'll need is not +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. -## The Importance of Scoping Instance Properties +## Real-World Example: Working with the Data -You may be wondering: +### Displaying Data from an API -> "Why does `appName` start with `$`? Is that important? What does it do? +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: -No magic is happening here. `$` is a convention Vue uses for properties that are available to all instances. This avoids conflicts with any defined data, computed properties, or methods. +```js +axios + .get('https://api.coindesk.com/v1/bpi/currentprice.json') + .then(response => (this.info = response.data.bpi)) +``` -> "Conflicts? What do you mean?" +

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

+ -Another great question! If you set: +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 to make sure that the decimal is in the appropriate place as well. -``` js -Vue.prototype.appName = 'My App' +```html +
+

Bitcoin Price Index

+
+ {{ currency.description }}: + + {{ currency.rate_float | currencydecimal }} + +
+
``` -Then what would you expect to be logged below? - -``` js -new Vue({ - data: { - // Uh oh - appName is *also* the name of the - // instance property we defined! - appName: 'The name of some other app' - }, - beforeCreate: function () { - console.log(this.appName) - }, - created: function () { - console.log(this.appName) +```js +filters: { + currencydecimal(value) { + return value.toFixed(2); } -}) +}, ``` -It would be `"The name of some other app"`, then `"My App"`, because `this.appName` is overwritten ([sort of](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch5.md)) by `data` when the instance is created. We scope instance properties with `$` to avoid this. You can even use your own convention if you'd like, such as `$_appName` or `ΩappName`, to prevent even conflicts with plugins or future features. - -## Real-World Example: Replacing Vue Resource with Axios - -Let's say you're replacing the [now-retired Vue Resource](https://medium.com/the-vue-point/retiring-vue-resource-871a82880af4). You really enjoyed accessing request methods through `this.$http` and you want to do the same thing with Axios instead. - -All you have to do is include axios in your project: - -``` html - - -
-
    -
  • {{ user.name }}
    • -
-
-``` +

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

+ -Alias `axios` to `Vue.prototype.$http`: +### Dealing with Errors -``` js -Vue.prototype.$http = axios -``` +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: -Then you'll be able to use methods like `this.$http.get` in any Vue instance: +* The API is down +* The request was made incorrectly +* The API isn't giving us the information in the format that we anticipated -``` js -new Vue({ - el: '#app', - data: { - users: [] - }, - created () { - var vm = this - this.$http.get('https://jsonplaceholder.typicode.com/users') - .then(function (response) { - vm.users = response.data - }) - } -}) -``` +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`. ## The Context of Prototype Methods @@ -122,34 +97,40 @@ In case you're not aware, methods added to a prototype in JavaScript gain the co Let's take advantage of this in a `$reverseText` method: -``` js -Vue.prototype.$reverseText = function (propertyName) { - this[propertyName] = this[propertyName].split('').reverse().join('') +```js +Vue.prototype.$reverseText = function(propertyName) { + this[propertyName] = this[propertyName] + .split('') + .reverse() + .join('') } new Vue({ data: { message: 'Hello' }, - created: function () { - console.log(this.message) // => "Hello" + created: function() { + console.log(this.message) // => "Hello" this.$reverseText('message') - console.log(this.message) // => "olleH" + console.log(this.message) // => "olleH" } }) ``` -Note that the context binding will __not__ work if you use an ES6/2015 arrow function, as they implicitly bind to their parent scope. That means the arrow function version: +Note that the context binding will **not** work if you use an ES6/2015 arrow function, as they implicitly bind to their parent scope. That means the arrow function version: -``` js +```js Vue.prototype.$reverseText = propertyName => { - this[propertyName] = this[propertyName].split('').reverse().join('') + this[propertyName] = this[propertyName] + .split('') + .reverse() + .join('') } ``` Would throw an error: -``` log +```log Uncaught TypeError: Cannot read property 'split' of undefined ``` @@ -159,7 +140,7 @@ As long as you're vigilant in scoping prototype properties, using this pattern i However, it can sometimes cause confusion with other developers. They might see `this.$http`, for example, and think, "Oh, I didn't know about this Vue feature!" Then they move to a different project and are confused when `this.$http` is undefined. Or, maybe they want to Google how to do something, but can't find results because they don't realize they're actually using Axios under an alias. -__The convenience comes at the cost of explicitness.__ When looking at a component, it's impossible to tell where `$http` came from. Vue itself? A plugin? A coworker? +**The convenience comes at the cost of explicitness.** When looking at a component, it's impossible to tell where `$http` came from. Vue itself? A plugin? A coworker? So what are the alternatives? @@ -167,19 +148,22 @@ So what are the alternatives? ### When Not Using a Module System -In applications with __no__ module system (e.g. via Webpack or Browserify), there's a pattern that's often used with _any_ JavaScript-enhanced frontend: a global `App` object. +In applications with **no** module system (e.g. via Webpack or Browserify), there's a pattern that's often used with _any_ JavaScript-enhanced frontend: a global `App` object. If what you want to add has nothing to do with Vue specifically, this may be a good alternative to reach for. Here's an example: -``` js +```js var App = Object.freeze({ name: 'My App', description: '2.1.4', helpers: { // This is a purely functional version of // the $reverseText method we saw earlier - reverseText: function (text) { - return text.split('').reverse().join('') + reverseText: function(text) { + return text + .split('') + .reverse() + .join('') } } }) @@ -191,7 +175,7 @@ Now the source of these shared properties is more obvious: there's an `App` obje Another advantage is that `App` can now be used _anywhere_ in your code, whether it's Vue-related or not. That includes attaching values directly to instance options, rather than having to enter a function to access properties on `this`: -``` js +```js new Vue({ data: { appVersion: App.version From e3ff0927aa3ddfd577e24d8bb2e3be93f85d4632 Mon Sep 17 00:00:00 2001 From: sdras Date: Fri, 9 Mar 2018 14:54:54 +0000 Subject: [PATCH 3/8] alternative patterns and finishing up --- .../cookbook/using-axios-to-consume-apis.md | 136 ++++++++---------- 1 file changed, 58 insertions(+), 78 deletions(-) diff --git a/src/v2/cookbook/using-axios-to-consume-apis.md b/src/v2/cookbook/using-axios-to-consume-apis.md index ac7c887f53..a0488cb482 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -73,7 +73,7 @@ This is a lot easier for us to display, so we can now update our html to display ```js filters: { currencydecimal(value) { - return value.toFixed(2); + return value.toFixed(2) } }, ``` @@ -91,103 +91,83 @@ There are times when we might not get the data we need from the API. There are s 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`. -## The Context of Prototype Methods - -In case you're not aware, methods added to a prototype in JavaScript gain the context of the instance. That means they can use `this` to access data, computed properties, methods, or anything else defined on the instance. +```js +axios + .get('https://api.coindesk.com/v1/bpi/currentprice.json') + .then(response => (this.info = response.data.bpi)) + .catch(error => console.log(error)) +``` -Let's take advantage of this in a `$reverseText` method: +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. ```js -Vue.prototype.$reverseText = function(propertyName) { - this[propertyName] = this[propertyName] - .split('') - .reverse() - .join('') -} - new Vue({ - data: { - message: 'Hello' + el: '#app', + data() { + return { + info: null, + loading: true, + errored: false + } }, - created: function() { - console.log(this.message) // => "Hello" - this.$reverseText('message') - console.log(this.message) // => "olleH" + filters: { + currencydecimal(value) { + return value.toFixed(2) + } + }, + mounted() { + axios + .get('https://api.coindesk.com/v1/bpi/currentprice.json') + .then(response => { + this.loading = false + this.info = response.data.bpi + }) + .catch(error => { + console.log(error) + this.errored = true + this.loading = false + }) } }) ``` -Note that the context binding will **not** work if you use an ES6/2015 arrow function, as they implicitly bind to their parent scope. That means the arrow function version: +```html +
+

Bitcoin Price Index

-```js -Vue.prototype.$reverseText = propertyName => { - this[propertyName] = this[propertyName] - .split('') - .reverse() - .join('') -} -``` +
+

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

+
-Would throw an error: +
+
Loading...
-```log -Uncaught TypeError: Cannot read property 'split' of undefined -``` +
+ {{ currency.description }}: + + {{ currency.rate_float | currencydecimal }} + +
-## When To Avoid This Pattern - -As long as you're vigilant in scoping prototype properties, using this pattern is quite safe - as in, unlikely to produce bugs. +
+
+``` -However, it can sometimes cause confusion with other developers. They might see `this.$http`, for example, and think, "Oh, I didn't know about this Vue feature!" Then they move to a different project and are confused when `this.$http` is undefined. Or, maybe they want to Google how to do something, but can't find results because they don't realize they're actually using Axios under an alias. +You can hit the rerun button on this pen to see the loading status briefly while we gather data from the API: -**The convenience comes at the cost of explicitness.** When looking at a component, it's impossible to tell where `$http` came from. Vue itself? A plugin? A coworker? +

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

+ -So what are the alternatives? +This can be even futher 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. ## Alternative Patterns -### When Not Using a Module System - -In applications with **no** module system (e.g. via Webpack or Browserify), there's a pattern that's often used with _any_ JavaScript-enhanced frontend: a global `App` object. - -If what you want to add has nothing to do with Vue specifically, this may be a good alternative to reach for. Here's an example: +### Fetch -```js -var App = Object.freeze({ - name: 'My App', - description: '2.1.4', - helpers: { - // This is a purely functional version of - // the $reverseText method we saw earlier - reverseText: function(text) { - return text - .split('') - .reverse() - .join('') - } - } -}) -``` - -

If you raised an eyebrow at `Object.freeze`, what it does is prevent the object from being changed in the future. This essentially makes all its properties constants, protecting you from future state bugs.

- -Now the source of these shared properties is more obvious: there's an `App` object defined somewhere in the app. To find it, developers can run a project-wide search. - -Another advantage is that `App` can now be used _anywhere_ in your code, whether it's Vue-related or not. That includes attaching values directly to instance options, rather than having to enter a function to access properties on `this`: - -```js -new Vue({ - data: { - appVersion: App.version - }, - methods: { - reverseText: App.helpers.reverseText - } -}) -``` +The fetch API is a powerful native API for these types of requests. You may have heard that the benefits of using fetch 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. -### When Using a Module System +If you're interested in using fetch, there are some [very good articles](https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api) [explaining](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) how to do so. -When you have access to a module system, you can easily organize shared code into modules, then `require`/`import` those modules wherever they're needed. This is the epitome of explicitness, because in each file you gain a list of dependencies. You know _exactly_ where each one came from. +## Wrapping up -While certainly more verbose, this approach is definitely the most maintainable, especially when working with other developers and/or building a large app. +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. From 737f7bdba304c9b70504f577c2d3c8fbf9c04bbb Mon Sep 17 00:00:00 2001 From: sdras Date: Fri, 9 Mar 2018 15:01:34 +0000 Subject: [PATCH 4/8] small final edits --- 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 a0488cb482..619d737c0a 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -56,7 +56,7 @@ axios

See the Pen Second Step Axios and Vue by 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 to make sure that the decimal is in the appropriate place as well. +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. ```html
@@ -85,9 +85,9 @@ filters: { 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: -* The API is down -* The request was made incorrectly -* The API isn't giving us the information in the format that we anticipated +* The API is down. +* The request was made incorrectly. +* The API isn't giving us the information in the format that we anticipated. 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`. @@ -164,9 +164,9 @@ This can be even futher improved with the use of components for different sectio ### Fetch -The fetch API is a powerful native API for these types of requests. You may have heard that the benefits of using fetch 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. +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 the benefits of using fetch 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. -If you're interested in using fetch, there are some [very good articles](https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api) [explaining](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) how to do so. +If you're interested in using fetch, 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. ## Wrapping up From 2908f8599f8b350e420d53fef064a048aa4b7637 Mon Sep 17 00:00:00 2001 From: sdras Date: Fri, 9 Mar 2018 17:41:47 +0000 Subject: [PATCH 5/8] update small text fixes --- 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 619d737c0a..d0e5badef7 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -1,5 +1,5 @@ --- -title: Using Axios To Consume APIs +title: Using Axios to Consume APIs type: cookbook order: 9 --- @@ -56,7 +56,7 @@ axios

See the Pen Second Step Axios and Vue by 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. +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. ```html
@@ -162,12 +162,12 @@ This can be even futher improved with the use of components for different sectio ## Alternative Patterns -### Fetch +### 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 the benefits of using fetch 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. +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 the benefits of using fetch 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. -If you're interested in using fetch, 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. +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. -## Wrapping up +## Wrapping Up 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. From 23c0b61dd20854fcd0c5e3eec6a4fbf004d71cdd Mon Sep 17 00:00:00 2001 From: sdras Date: Fri, 9 Mar 2018 17:52:20 +0000 Subject: [PATCH 6/8] add in .finally --- src/v2/cookbook/using-axios-to-consume-apis.md | 7 +++---- 1 file changed, 3 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 d0e5badef7..9a9e740c0e 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -119,14 +119,13 @@ new Vue({ axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => { - this.loading = false this.info = response.data.bpi }) .catch(error => { console.log(error) this.errored = true - this.loading = false - }) + }). + .finally(() => this.loading = false) } }) ``` @@ -164,7 +163,7 @@ This can be even futher improved with the use of components for different sectio ### 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 the benefits of using fetch 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. +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. 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. From 2657765e8edd2ad1382ca5a4f2f49ff6a7500998 Mon Sep 17 00:00:00 2001 From: sdras Date: Fri, 9 Mar 2018 23:36:28 +0000 Subject: [PATCH 7/8] coindesk => CoinDesk --- src/v2/cookbook/using-axios-to-consume-apis.md | 4 ++-- 1 file changed, 2 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 9a9e740c0e..e54ff75b81 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -8,9 +8,9 @@ order: 9 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. -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. +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. -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: +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: ```js new Vue({ From 70db48a61271ada50b4ed954b6ff77135b9d42c0 Mon Sep 17 00:00:00 2001 From: sdras Date: Sun, 11 Mar 2018 05:43:45 -0600 Subject: [PATCH 8/8] update functions to have space before parens --- 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 e54ff75b81..d4dd2f27b2 100644 --- a/src/v2/cookbook/using-axios-to-consume-apis.md +++ b/src/v2/cookbook/using-axios-to-consume-apis.md @@ -15,12 +15,12 @@ There are a number of ways we can request information from the API, but it's nic ```js new Vue({ el: '#app', - data() { + data () { return { info: null } }, - mounted() { + mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => (this.info = response)) @@ -72,7 +72,7 @@ This is a lot easier for us to display, so we can now update our HTML to display ```js filters: { - currencydecimal(value) { + currencydecimal (value) { return value.toFixed(2) } }, @@ -103,7 +103,7 @@ This will let us know if something failed during the API request, but what if th ```js new Vue({ el: '#app', - data() { + data () { return { info: null, loading: true, @@ -111,11 +111,11 @@ new Vue({ } }, filters: { - currencydecimal(value) { + currencydecimal (value) { return value.toFixed(2) } }, - mounted() { + mounted () { axios .get('https://api.coindesk.com/v1/bpi/currentprice.json') .then(response => {