I am currently working on project that requires calling two api's. But, how do I set 2 baseURL.
In my main.jsfile
import axios from 'axios'
axios.defaults.baseURL = 'http://192.168.1.75/api'
axios.defaults.baseURL = 'http://192.168.14.66/api'
Use prototype method in main.js file as below:
const authInstance = axios.create({ baseURL: 'http://192.168.1.75/api'})
Vue.prototype.$auth = authInstance
Related
i install axios :
npm install axios
and import it :
import axios from "axios";
this is part of my code :
`
const fetchDataHandler=useCallback(()=>{
setLoading(true);
setCity("");
axios({
method:"GET",
url:`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${api.key}`
}).then(res=>{
console.log(res.data)
});
},[api.key,city])
`
when i try to get data from api i have this error
please help
i tried to install latest version to axios but it did not work
I'm fairly sure you want to use:
var axios = require('axios');
not import axios from "axios" when using node.js.
Source: Postman.com
I am trying to set the axios baseURL based on a variable defined inside a separate file in React Native. However, this doesn't seem to work.
The URL is defined inside a constants file in the following way:
//constants.js
const constants = {};
constants.API_URL = "http://192.168.1.1:5002/api";
export default constants;
The variable is called inside an axios wrapper file in the following way:
//axiosWrapper.js
import axios from 'axios';
import constants from './constants'
axios.defaults.baseURL = constants.API_URL
The above throws the following error:
However, if the variable is defined inside the axios wrapper file itself or if the URL is hardcoded, it works:
API_URL = "http://192.168.1.1:5002/api";
axios.defaults.baseURL = API_URL;
OR
axios.defaults.baseURL = "http://192.168.1.1:5002/api";
It would be great if someone could explain why this happens and if there's a way to fix it.
React Native version - 0.64.2
Axios version - 0.18.0
Platform - Android
try this:
//constants.js
const API_URL = "http://192.168.1.1:5002/api";
const API_URL2 = "http://192.168.1.1:5002/api";
export { API_URL, API_URL2 };
//axiosWrapper.js
import axios from 'axios';
import * as constants from './constants'
axios.defaults.baseURL = constants.API_URL
Is is possible to get the base URL from the axios and store it to a variable?
const instance = axios.create({
baseURL: "http://192.168.0.103/api",
});
What i want to do is..
const photo= "HTTP://192.168.0.103/" + image-Path;
this is working , but i don't want to use the address here (since i already declared it in axios file, i don't want to repeat it several pages), instead i want to get it from axios and use it here.
Is it even possible?
This will work
const axios = require('axios');
const api = axios.create({
baseURL: "http://www.google.com.pk"
});
console.log(api.defaults.baseURL)
How can I make axios's API requests reusable through my app,
so I can avoid writing writing the same code over and over again..
//load the axios HTTP library
window.axios = require('axios');
window.Vue = require('vue');
const app = new Vue({
el: '#app',
mounted(){
console.log('hello!');
}
});
I was thinking of trying something like this ( gist ) but I don't know how can I attach the functions to Vue instance and call these functions from vue-components directly ..
You can inject axios as Vue property :
Vue.prototype.$http = require('axios');
Then you can use it like that : this.$http.get(...)
Or you can checkout this repository
I am testing with axios within a Vue application and the CLI. I've been using vue-resource and I could access it on all my components by simply passing it to Vue.use (VueResource). How can I achieve this with axios, so I do not have to import it into a component, but simply define it once in the main.js file?
In main.js you can just assign Axios to $http.
main.js
import Axios from 'axios'
Vue.prototype.$http = Axios;
By modifying the vue prototype, any vue instance will have the ability to call $http on this. (e.g. this.$http.get('https://httpbin.org/get')
Note: $http is the axios object now, so any method you can call on axios object, you can call on this.$http.
NOTE: When Vue module is installed as a package and not using through CDN then this approach works fine else if importing Vue from CDN then we have both options, first the answer here and second is to import Vue in main.js and then use Vue.prototype.{variable}=Axios
For VUE3, you need to add below code:
Syntax:
app.config.globalProperties.{variable} = value;
Example:
app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get
In your main.js or app.js
/**
* Importing libraries & componenets
*/
import { createApp } from 'vue';
import { createWebHistory, createRouter } from 'vue-router';
import Axios from 'axios';
/**
* Vue initialization
*/
const app = createApp({
components: {
Index
},
});
app.use(router);
app.config.globalProperties.$http = Axios; // Allow axios in all componenets this.$http.get
app.mount('#app');
You can call the GET method same as VUE2 in your components: this.$http.get('https://httpbin.org/get')
For all those who implement from zero (whithout deprecated vue-resource), another simple and efficient way, the "Laravel way" too.
In CLI run: npm install axios
In main.js define:
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.headers.common['Accept'] = 'application/json';
and then you can use it in any component like this:
window.axios.get('https://example.com').then(r => console.log(r.data));
and capture r.data output
(if you use the Laravel routes instead of those of Vue you can use it like this: axios.get(url).then(...)
What worked for me in the end was this:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App).use(router)
app.use(VueAxios, axios)
app.mount('#app')
And I used this library:
vue-axios