Using Axios with Vue – onlinecode

onlinecode

2 years ago

Using Axios with Vue

In this post, we will give you information about Using Axios with Vue. Here we will give you detail about Using Axios with Vue And how to use it also give you a demo for it if it is necessary.

Vue doesn’t have a built-in HTTP request library. The official Vue cookbook recommends using Axios to interact with REST APIs.

This tutorial will use the excellent JSONPlaceholder API to provide sample data. For example, if you
type https://jsonplaceholder.typicode.com/users/1 in your browser’s URL bar, you’ll
get the below response:

{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

Displaying Response Data

The axios.get() function executes
an HTTP GET and returns a promise. So calling await axios.get('https://jsonplaceholder.typicode.com') gets you an object whose data property contains
the above JSON data.

Remember that Vue hooks can be async functions. So that means you can use async/await to execute the Axios request.

const url = 'https://jsonplaceholder.typicode.com/users/1';

const app = new Vue({
  data: () => ({ user: null, error: null }),
  // Display username if available, and error message if not
  template: '
    <div>
      <div v-if="user != null">
        {{user.name}}
      </div>
      <div v-if="error != null">
        {{error.message}}
      </div>
    </div>
  ',
  mounted
});

async function mounted() {
  try {
    this.user = await axios.get(url).then(res => res.data);
    this.error = null;
  } catch (error) {
    this.user = null;
    this.error = error;
  }
}

With Server-Side Rendering

Unfortunately, the above example as written won’t work with Vue server-side rendering because:

Vue’s renderToString() doesn’t call mounted hooks, because the component is never actually mounted.
Vue’s renderToString() doesn’t wait for async hooks to execute, so even if you used created, the above example wouldn’t work.

See also Loading Vue via CDN

However, there is an easy workaround. Just call the mounted() function manually
and await on it.

await mounted.call(app);
const data = await renderToString(app);
data; // <div data-server-rendered="true"><div>Leanne Graham</div> <!----></div>

Vue.js is a progressive JavaScript framework that makes building user interfaces simple and enjoyable. Vue is designed from the ground up to be incrementally adoptable, so you can use the features you need, and mix and match Vue with other libraries or frameworks.

Vue is a relatively new framework, but it has quickly become one of the most popular JavaScript frameworks in the world. It is used by large companies like Alibaba, Baidu, and Xiaomi, as well as by thousands of smaller businesses and startups(Using Axios with Vue).

Here are some of the features that make Vue.js so popular:

Declarative rendering: Vue uses a declarative rendering model, which means that you can describe the desired output of your application in terms of HTML, CSS, and JavaScript. This makes it easy to reason about your code and to make changes to your application.
Reactivity: Vue is a reactive framework, which means that it automatically updates the DOM whenever there is a change to the application’s state. This makes your application feel fast and responsive.
Composition: Vue is a component-based framework, which means that you can build your application out of reusable components. This makes your code more maintainable and easier to test.
Performance: Vue is a highly performant framework. It has been benchmarked against other popular JavaScript frameworks, and it has consistently outperformed them(Using Axios with Vue).

If you are looking for a JavaScript framework that is easy to learn, powerful, and performant, then Vue.js is a great choice.