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
Related
ERROR TypeError: Restricted in strict mode, js engine: hermes is getting thrown when trying to import Axios for network request in react native application. The error gets removed when i'm trying to remove the import statement from the below code.
api.js
import axios from "axios";
export default axios.create({
baseURL:"https://.com/v3/test",
headers:{
Authorization:'Bearer fsdfsfsd'
}
});
Try to downgrade the axios version.
yarn remove axios
yarn add axios#0.27.2
If it is not getting listed from node modules when trying to import Axios, import the package as follows:
const axios = require('axios')
I don't get any error CORS error when I am using fetch or axios from import axios from 'axios'; but I get one when I am using #nuxtjs/axios this.$axios
Any idea why ?
We are building an application using VueJS, are new to its concepts. Facing an error when we try to make a call using axios from a js function.
The error is "export 'default' (imported as axios) was not found in ./axios.js"
Please let us know what we might be doing wrong. Appreciate your help.
import Vue from 'vue';
import axios from './axios.js';
export const MY_CONST = 'Vue.js';
export let memberList = new Vue({
el: '#members',
data: {
members: []
},
mounted: function () {
this.getAllMembers();
},
methods: {
getAllMembers: function () {
var me = this;
axios.get("https://xxxxx.com/services/api.php")
.then(function (response) {
me.members = response.data.members;
});
}
}
});
Assuming you've installed axios as a dependency or devDependency in your package.json and installed it via npm or yarn then I would suspect your issue is that you're looking for axios in a file called axios.js in the same directory as the calling component. You should instead look for the package axios like this:
import axios from 'axios';
If you're indeed trying to export axios from a custom file with configuration or something then you need to see what you're exporting from the file and make sure it is indeed axios. Though from the sound of your error that doesn't seem to be what your'e trying to do.
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