`How to make API calls using axios in a Vue Js application`

Question

`How to make API calls using axios in a Vue Js application`

I'm attempting to initiate a query search using a URL format like the following:

http://localhost/Stellar/public/api/companies?column=name&direction=desc&page=1

When working with Vue Js 2.0, I am trying to make a call similar to this:

axios.get('$(this.source)?column=$(this.query.column)&direction=$(this.query.direction)$page=$(this.query.page)')

However, it is generating something along the lines of:

http://localhost/Stellar/public/$(this.source)?column=$(this.query.column)&direction=$(this.query.direction)$page=$(this.query.page)

The data is not being converted as expected. Any assistance on this matter would be greatly appreciated.

Thank you.

javascript vue.js vuejs2 axios

Answer 1

Answer №1

It's important to avoid hardcoding variables into a string, always reference them instead.

Try this approach:

let source = this.source;
let column = this.query.column;
let direction = this.query.direction;
let page = this.query.page;

axios.get(source+"?column="+column+"&direction="+direction+"&page="+page);

Answer 2

It's important to avoid hardcoding variables into a string, always reference them instead.

Try this approach:

let source = this.source;
let column = this.query.column;
let direction = this.query.direction;
let page = this.query.page;

axios.get(source+"?column="+column+"&direction="+direction+"&page="+page);

Answer 3

Answer №2

To properly format your string, you will need to utilize string interpolation. The process involves enclosing the string within backticks and inserting variables using ${} notation. Here is an example:

let animal = 'cat';

let sentence = `I love my ${animal}. It's a great pet.`;

console.log(sentence);

In your specific case, you should modify your code snippet as follows:

axios.get(`${$(this.source)}?column=${$(this.query.column)}&direction=${$(this.query.direction)}&page=${$(this.query.page)}`);

Note that I also removed the '$' sign before 'page=' assuming it was an error. If it was intentional, please make a mental note of this change.

Additionally, considering your use of $(this.query), etc., I presume you are utilizing jQuery. Alternatively, if you are trying to implement string interpolation incorrectly, be sure to replace the parenthesis with curly braces {} instead.

Answer 4

To properly format your string, you will need to utilize string interpolation. The process involves enclosing the string within backticks and inserting variables using ${} notation. Here is an example:

let animal = 'cat';

let sentence = `I love my ${animal}. It's a great pet.`;

console.log(sentence);

In your specific case, you should modify your code snippet as follows:

axios.get(`${$(this.source)}?column=${$(this.query.column)}&direction=${$(this.query.direction)}&page=${$(this.query.page)}`);

Note that I also removed the '$' sign before 'page=' assuming it was an error. If it was intentional, please make a mental note of this change.

Additionally, considering your use of $(this.query), etc., I presume you are utilizing jQuery. Alternatively, if you are trying to implement string interpolation incorrectly, be sure to replace the parenthesis with curly braces {} instead.

Answer 5

Answer №3

To begin, it's important to construct the string before making your axios call. When placing variables within a string (the initial parameter of your axios call) in javascript, those variables will not be evaluated.

const url = this.baseURL+'?param='+this.query.param+'&filter='+this.query.filter+'&page='+this.query.page;

axios.get(url).then(response=>{
  console.log(response.data);
});

For more information, refer to: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String

Answer 6

To begin, it's important to construct the string before making your axios call. When placing variables within a string (the initial parameter of your axios call) in javascript, those variables will not be evaluated.

const url = this.baseURL+'?param='+this.query.param+'&filter='+this.query.filter+'&page='+this.query.page;

axios.get(url).then(response=>{
  console.log(response.data);
});

For more information, refer to: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String

Answer 7

Answer №4

Enhancing your code using the Axios Request Config:

let website = "mywebsite.com";
let settings = {
   parameters: {
       row: 26,
       orientation: 'right'
    }
}
return axios.get(website, settings)
   .then((result) => { 
        ...

Answer 8

Enhancing your code using the Axios Request Config:

let website = "mywebsite.com";
let settings = {
   parameters: {
       row: 26,
       orientation: 'right'
    }
}
return axios.get(website, settings)
   .then((result) => { 
        ...

`How to make API calls using axios in a Vue Js application`

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular's asynchronous HTTP request allows for non-blocking operations when

What is the best way to include a new user in the memory database when there is no database or storage back-end?

Discovering the maximum value and fetching it from an array

Is there a way to change the format of the date "Wed Jan 01 2020 00:00:00 GMT+0530 (India Standard Time)" to JAN 01, 2020 in JavaScript?

Unable to attach child component to reference

Protecting a javascript string in php: A comprehensive guide

Seeking further clarification on the topic of `custom Directive` in AngularJS

Is it possible to link the _id of a mongodb array to its corresponding clientId in another array?

How should I properly initialize my numeric variable in Vue.js 3?

Is there a way to eliminate all Unicode characters from a string while preserving specific languages like Japanese, Greek, Hindi, and others?

Learn the process of connecting checkboxes to a database in MeanStack using Angular

Transferring PointLight Parameters to a Custom Shader using three.js

Evolution of Vue lifecycle in Vue2

Implementing a parallax scroll effect using CSS and dynamically updating the background-position value with JavaScript

Issues with JQuery .on() occur when functions are passed as arguments

"Troubleshooting: Issue with the custom rule 'isBetween' validation in Vee validate

Is it possible to organize words with HTML elements utilizing JavaScript?

Is there a way to modify the maximum size limit for a POST request package?

The Chrome Extension was denied from loading due to a violation of the specified Content Security Policy

Discover the best method for incorporating Vuetify search functionality within a datatable, especially when the column data is in array