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
Related
I am learning Vue.js.
I have this code which runs fine :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App).use(store).use(router)
app.mount('#app')
Now I would like to add some import, for example 'axios'. This code does not run :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router).use(axios)
app.mount('#app')
The error is:
Uncaught RangeError: Maximum call stack size exceeded
at merge (utils.js?c532:276)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
at assignValue (utils.js?c532:282)
at forEach (utils.js?c532:253)
at merge (utils.js?c532:291)
So how to add some other "use" in the main.js file ? It is certainly very basic but I am a beginner.
You're using vue 3 and axios is not a plugin (we cannot register it like app.use()) it's a javascript module that could be add to the app instance like :
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App).use(store).use(router)
app.config.globalProperties.axios=axios
app.mount('#app')
and in child component reference it like :
this.axios
Note: the code below is valid for Vue 2.x. Since version 3, some stuff has changed regarding initialization (createApp function is now required).
What I usually do in my code is the following:
import Vue from 'vue';
import axios from 'axios';
// Add it to Vue prototype (use any variable you like, preferrably prefixed with a $).
Vue.prototype.$http = axios;
// Instantiate the main vue app.
let app = new Vue({
//
});
This means that the $http object is now available in all your components using this.$http. Since it is assigned as a prototype variable, it is considered a singleton (it is re-used everywhere), so you can add any options you need to the axios variable before assigning it to Vue.prototype.$http.
Additionally:
Vue.use() is made specifically for enabling Vue plugins. That means the given parameter must use the exact syntax as described here https://v2.vuejs.org/v2/guide/plugins.html . Since axios is not a Vue plugin but just a regular JavaScript library, you cannot use it with this function.
If you want to make it especially nice (or convoluted), you can use the following syntax:
Vue.use({
install(v) {
v.prototype.$http = axios;
// Do other stuff like adding mixins etc.
}
})
This may clear up your code if you move this code to another file, so it could end up like this:
import myCustomAxiosLoader from './bootstrap/axios';
Vue.use(myCustomAxiosLoader);
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
I want to be able to use a Socket.IO instance in my Vue components, i don't want to have to import io from 'socket.io-client' in every component file so i thought i should be able to import it in my "main.js" file and use it anywhere else.
So far, I've seen several answers but none of them seem to work
I've tried to include
import io from 'socket.io-client'
...
var sock = io('localhost:3000')
export const globalStore = new Vue({
data: {
sock: sock
}
})
In my main.js and call it like
import {globalStore} from '../main.js'
const SOCK = globalStore.sock
But i still get
Uncaught ReferenceError: sock is not defined at Object.login
When i try to do
SOCK.emit()
I want to be able to include a JS file (not just socket.io) once, and call it from anywhere.
You could bind your sock to VueJS prototype:
// main.js file
import Vue from 'vue'
import io from 'socket.io-client'
const sock = io('localhost:3000')
Vue.prototype.$sock = sock
new Vue({
...
})
You could then be able to access it in your components like this:
export default {
created () {
console.log(this.$sock)
}
}
Have a Vue app with axios setup and is using it as this.$http.get in the components and that is working fine.
In running the specs using Jest I get an error: Cannot read property 'get' of undefined
I know I can mock axios with maxios. How do I get Jest to recognise $http so it does not throw an error?
You'll need to create a local instance of Vue for your tests, to which you introduce the Vue Plugins you are using, such as axios.
import { createLocalVue, shallowMount } from "#vue/test-utils"
import axios from 'axios'
import VueAxios from 'vue-axios'
const localVue = createLocalVue();
localVue.use(VueAxios, axios)
and later, in your actual tests:
it('should mount the component where I want to use $http', () => {
const wrapper = shallowMount(MyApiComponent, { localVue });
... do stuff to wrapper here ...
})
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