DEV Community: Diego López

How to use axios with Vue. Tips and tricks.

Diego López — Mon, 26 Oct 2020 17:08:21 +0000

Post originally written by me in Spanish 🇪🇸 on my blog:

VueJS as opposite of Angular, not comes with a predefined way of making HTTP calls. The user can use whatever library of his choice, or not use a library at all. For example, you can make API calls in Vue using the fetch method from Javascript.

Axios is one of the most popular libraries to make API calls and offers abstractions to reduce the code required to make API calls. For example, with axios you don't need to parse the JSON response, and you don't have to pass the base URL of the requests every time.

So, in this article, to learn Axios, we will make an example project using Axios.

Prerequisites

First, you need a Vue project. If you created the project using the vue-cli, the CLI ask you about axios so maybe you alredy have axios installes in your project. To know if you have axios installed, check the package.json and search for the axios package.

If you don't have axios installed you can install it using npm:

npm install axios

Or if you are using Yarn you can use:

yarn add axios

Then you need to have an API with some endpoints. If you don't have one, don't worry cause we are going to use an example API to use in this article.

In this article we're going to use the JSONPlaceholder, feel free to use if you want.

https://jsonplaceholder.typicode.com/

Lastly, you need to know about the basic concepts of Vue. For this article we are going to use the created method from the lifecycle of Vue to make the requests when the component is created. If you want to learn more about Vue lifecycle, check this article written by @samolabams: https://dev.to/samolabams/understanding-vuejs-lifecycle-hooks-5ejk

GET calls

The purpose of a GET is to retrieve information. When you open a page, in the background, the browser sends a GET call to retrieve the page that you are visiting, and the same for all the resources of the page (.css files, images, .js files, etc).

A GET response to an API call usually returns a JSON with the information.

First we are going to create a component that calls the API when is created:

<template>
  <div class="content"></div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    axios.get("https://jsonplaceholder.typicode.com/todos/1").then((result) => {
      console.log(result.data);
    })
  }
};
</script>

<style scoped lang="scss">
</style>

As you can see, we are only importing axios in the component and calling axios.get() with the url of the JSONPlaceholder API, as simple as this.

Axios returns a promise with the JSON response inside data property parsed for you.

If you create this component you will see in the console of the browser something like this:

If you want to use the response in the view or in another method or computed property you only have to create a new variable inside data of Vue:

<template>
  <div class="content">{{ todos }}</div>
</template>

<script>
import axios from "axios";
export default {
  data: () => ({
    todos: null
  }),
  created() {
    axios.get("https://jsonplaceholder.typicode.com/todos/1").then((result) => {
      this.todos = result.data;
    })
  }
};
</script>

<style scoped lang="scss">
</style>

POST calls

POST endpoints usually are designed to create things. So for example if you want to create a new user in the database almost sure that you will use a POST endpoint to send the info of the new user to create.

POST calls with axios is as simple as GET calls. You only have to call the .post() method with the URL of the endpoint and a second parameter with the object that you need to pass to the API.

<template>
  <div class="content"></div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    let post = {
      title: 'foo',
      body: 'bar',
      userId: 1
    };
    axios.post("https://jsonplaceholder.typicode.com/posts",  post).then((result) => {
      console.log(result);
    });
  }
};
</script>

<style scoped lang="scss">
</style>

PUT calls

PUT calls are created to edit things or resources in the server. So for example, if you want to edit a user in the database, the logical way to do it is using a PUT call.

PUT calls have the same syntax as in POST, except for the name of the method to call (you only have to call axios.put() with the URL and the object to edit as second parameter).

created() {
  let post = {
    title: 'foo',
    body: 'bar',
    userId: 1
  };
  axios.put("https://jsonplaceholder.typicode.com/posts/1", post).then((result) => {
    console.log(result);
  });
}
</script>

DELETE

Delete is to remove resources. With axios you only have to pass the URL of the resource to delete.

created() {
  axios.delete("https://jsonplaceholder.typicode.com/todos/1");
}

NOTE: There is also the PATCH methods but I don't use it a lot.

The architecture that I recommend

This is my personal opinion. It may not be the best option for all cases. You have to think if this solution makes sense in your project.

In my case what I do is create a folder inside src called logic in which I create a .js file for each entity. For me entity is something that has a reason to be by itself, for example: users, cars, animals, etc.

Within these files what I do is create a function for each API call, simply returning the request. Let's see an example:

// src/logic.todos.js

import axios from "axios";
const API = "https://jsonplaceholder.typicode.com/todos";

export default {
  get() {
    return axios.get(API);
  },
  create(todo) {
    return axios.post(API, todo);
  }
};

So if you have to use this calls you only have to import this file inside de component to use it:

import todos from "@/logic/todos";

And the use the functions where you want:

async created() {
  let response = await todos.get();
  console.log(response.data);
}

Note that here I replace the old syntax using then() for the async / await pattern because is simpler to read.

Conclusions

With the API that we use in this article (JSONPlaceholder) you can create a full website to manage todos so you can practice with all the API calls.

Another thing I recommend is to put the base URL of the API inside the Vue environment variables so you can have the variable stored in one place.

Thanks for reading my post! You can say hello or send me a message in my Twitter @CodingPotions.

10 tips for the Angular developer

Diego López — Mon, 25 Mar 2019 19:07:15 +0000

Today I'm going to tell you 10 tips for any Angular developer.

1.

Try to have more or less clear the structure that the project is going to have, or at least decide where it is going to go. It is also important that you decide if you are going to use a NGRX state manager. It is important not to have to refactor the whole project later.

2.

Try to modularize and create reusable components. In any programming language it is very important to reuse the code as much as possible to speed up and not have to change the code every time you need a change. Think about the components so that they are isolated and generic to favor reusability.

3.

Think about using what Angular offers and before doing anything see if there is already a solution within the Angular ecosystem. For example if wou want to make HTTP request, use the solution that comes in Angular (HTTPClient)

4.

Do not download libraries if they are not completely necessary. For example long ago in a project I needed a table component. I was looking at the option of adding a library of table components, but decided to implement my own.

With this you get to know your project perfectly and have total control of what you are doing. If you need a change in a library you have to propose it to its creator and they don't always pay attention to you.

5.

Try to use the principles of Optimistic UI. Optimistic UI is a way of displaying information without waiting for a response from the server. For example, imagine that you are developing a real-time chat app. If every time you send a message you have to wait for a response from the server, the user interface will not be immediate.

One way to resolve this for this example would be to directly paint the message on the screen as if it had been sent correctly. If the response coming from the server is wrong then you show the error. This makes it appear to the user that the application works very fast.

6.

If the application is large, try to take advantage of the potential of typescript in terms of creating interfaces and models for the data, that will avoid problems in the long run. In addition you have at your disposal the types for the variables, which is going to facilitate its debugging a lot.

7.

If you can use some css code precompiler like scss, that will speed up the creation of styles a lot.

8.

Create your own component library. This is something I started using recently. You create a library with the components you want and upload them to a repository. When you have to start a new Angular project, you can always download that library to have components already created.

9.

If you create animations, there are ways to reuse them throughout your application, and you will get the code in one place.

10.

Use the pipes whenever you can, especially in the lists, this will get much increase the speed of revaluation (pure

My favorite Angular libraries to use in any project

Diego López — Fri, 08 Mar 2019 11:49:22 +0000

Post originally written by me in spanish here: Mejores librerías Angular

As in many frameworks, around Angular there is also an ecosystem of libraries created by the community, the most common is component libraries. In the following list I will show you the ones I personally found most interesting. The list does not follow any particular order.

I recommend using the minimum number of libraries that are really needed, since you lose control of the components of your application, and you depend on the developer of the library to maintain those components.

PrimeNG

Collection of many components also prepared for mobile. It has certain themes that you can choose to customize the appearance of the components.

It has data display components (tables, graphs, statistics, etc), to many types of panels, buttons, menus, even has a drag and drop component, so you won't have to look for another library for this functionality.

Official Page

NG Bootstrap

If you want to use Bootstrap together with Angular, you can use Bootstrap directly as you would on any normal page. The problem with this is that the parts of Bootstrap that use JS will not work for you, because they use Jquery, and it is not adapted for Angular. If you need to use the JS components of Bootstrap the best thing you can do is to use this library.

The library contains many of the Bootstrap components adapted to Angular, so for example, you can use the Bootstrap dropdown without having to do weird things.

Official Page

Angular material

Lately the design Material based on Google is very fashionable and this library puts it to our reach to use with Angular.

As with the previous libraries it is a wide set of ready-to-use components. These components have the particularity that their design is inspired by the Material design.

Like PrimeNG it offers a variety of components, although it does not offer many components for data visualization.

Official Page

NGX Admin

If we want to include a control panel in our web application, the easiest and fastest way is to use these components for their creation.

It comes with two color themes, one light and one dark. In its official website you can see an example of a control panel already in operation using these components, as you can see although it is focused on a control panel, it comes with a variety of components.

Official Page

Ngrx

This library is essential for large applications, and is used to manage the status of the web application in a single point called store.

This system also allows to share data between components and helps to make large applications maintainable.

Official Page

NG animate

Small animations to use in the components of Angular. Although Angular comes with a system to create our own animations, there is a library that creates these animations for us.

Although not many animations come, those that come by default are fine for animating components when they are loaded for example.

Official Page

NGX Charts

A library of specific components of all types of graphs.

The graphs are fully customizable and have a multitude of parameters to adapt to all types of pages.

The types of graphs that are included are the following:

Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
Line
Area (Standard, Stacked, Normalized)
Foot (Explodable, Grid, Custom legends)
Donut
Gauge
Linear Gauge
Force Directed Graph
Heatmap
Treemap
Number Cards
Bubble/Scatter

Official Page

Angular notifier

Notifications for Angular. Although you can create your own component to display notifications, that library comes with a few already configured:

Default
Success
Information
Notice
Error

In addition the notifications come with animations, can be hidden and are customizable with various parameters.

Official Page

Dragula

Dragula is a library thought for several frameworks, among them, Angular. It is a library to implement Drag and Drop components and designs, that is to say, interfaces in which the user can move and drag the elements of the page with the mouse or with the finger in smartphones.

Official Page

Conclusions

There are many more libraries, but I have put those that I personally have found more useful or at least curious. The good thing about Angular is that you don't need to install many libraries to create a project, since Angular, unlike other frameworks, comes by default with everything you need.