I have a method to call a login endpoint on a button click
login() {
let email = this.user.email
let password = this.user.password
axios.post('invalidRoute').then( (response) =>{
console.log('success')
console.log(response.data)
}).catch(function (error) {
console.log('error')
console.log(error)
})
},
No matter what I set as the url route, axios thinks that the post is successful and always logs out the success message and a blank response data.
I import axios directly at the top of the component using the line
import axios from 'axios'
I don't use it anyhere else.
This is in a basic nativescript vue js application.
this is what my main.js looks like
import Vue from "nativescript-vue";
import Vuex from 'vuex'
import store from './store/store';
import * as applicationSettings from 'tns-core-modules/application-settings'
import router from './router'
Vue.prototype.$router = router
Vue.config.silent = false
Vue.use(Vuex)
new Vue({
render: h => h('frame', [h(router['login'])]), store
}).$start()
It is driving me nuts, I cant see why it won't trigger the catch.
I think it's an issue with Axios. With {N} status code will be null when request fails, seems Axios considers that request as success when the status code has falsy value.
Looks like there is a similar issue logged in their Github.
I found that axios nor http doesn't call anything in some circumstances.
I don't know why, i was investigated this for two days. No clue.
Just used Fetch instead and for now everything works fine.
Related
I'm new to the node world and I'm having issues setting up my Nuxt3 project to use Apollo, but I think most of it is lack of knowledge with node and Nuxt.
Everything works fine when the setup code is in app.vue but I want it in a separate file to keep things tidy.
This is my latest attempt, I also tried using /server/api to return values, but I ran into top-level await issues.
I created a Stack Blitz instance to show what's happening. It renders successfully once, then shows an undefined error underneath. In my project, it's similar in a way where I see a flash of content, and then an empty white page and a console error that spaceId is undefined (braking the url).
plugins/apollo.ts
import { ApolloClient,createHttpLink,InMemoryCache} from '#apollo/client/core';
import { createApp, provide, h } from 'vue';
import { DefaultApolloClient,provideApolloClient} from '#vue/apollo-composable';
export default defineNuxtPlugin(async (nuxtApp) => {
const config = useRuntimeConfig();
const httpLink = createHttpLink({
uri: `https://someapi/${config.spaceID}/`,
headers: {
Authorization: `Bearer ${config.token}`,
},
});
// Cache implementation
const cache = new InMemoryCache();
// Create the apollo client
const apolloClient = new ApolloClient({
link: httpLink,
cache,
});
provideApolloClient(apolloClient);
});
Thanks
I have a site which makes an Axios request. Both the backend and vuejs frontend are on the same domain, and have the same basic auth covering them.
The issue is that whilst the pages load, as soon as an Axios request is made, it asks me again for the basic auth, which doesn't even work if I fill in the details.
Now I imagine I need to pass through the basic auth details somehow, but none of the things I have tried work (and example being below).
If anyone has any tips on passing through the auth token from the parent page to the axios request, that would be great.
const requestOne = axios.get(requestUrl)
const requestTwo = axios.get(requestUrl)
axios
.all([requestOne, requestTwo])
.then(
axios.spread((...responses) => {
<some code here>
})
)
I just answered a similar question with the 3 ways to pass around data in Vue.
You might find it helpful: How to pass v-for index to other components
However, in my opinion, the best approach would be to create a Vue plugin with your Axios client and an init method.
Consider this following (untested) example:
axiosClient.js
import Vue from 'vue';
let instance;
export const getInstance = () => instance;
export const useAxios = () => {
if (instance) return instance;
instance = new Vue({
data() {
return {
client: null,
}
}
});
methods: {
init(authToken) {
this.client = axios.create({
headers: {'Authorization': authToken }
});
}
}
}
export const axiosPlugin = {
install(Vue) {
Vue.prototype.$axios = useAxios();
},
};
Vue.use(axiosPlugin);
Once installed, you can access this in your components using $axios.init(...) and $axios.client.
You can even write API methods directly onto the plugin as well and interact with Vuex through the plugin!
You may need to tweak the plugin a little (and keep in mind this is Vue2 syntax) as I wrote this directly into StackOverflow.
You can also pass any other default values or configuration options through to the axios client by providing options to the plugin and accessing them within init.
You can learn more about plugins here: https://v2.vuejs.org/v2/guide/plugins.html
i want to not use webpak form my vue devlopement,
so there is 2 alternative
writting components as .js file or
writing them as .vue file and use httpVueLaoder to load component as if they are .js file
with httpvueLoader think go grate untile the time i want to use an API inside my component
ther i can not get the API
i have a Home.vue componet inside ther is a FormLot.vue component in witchi try to import API.js
<script>
let FormLot = window.httpVueLoader('./frontEnd/page/lot/FormLot.vue')
module.exports = {
name:"Home",
components: {FormLot:FormLot},
...
};
</script>
in FormLot.vue
// _END_ is the absolut path to the site , soi can change it later
let API = import(_END_+'/api/api.js') // dont work return promise
import API from './frontEnd/api/api.js' // dont work componnet dont show at all :(
let FormLotE1 = window.httpVueLoader(_END_+'/page/lot/FormLotE1.vue')
module.exports ={
...
};
</script>
API.JS
module.exports ={
...
};
API.JS
export default {
...
};
with API.js i tryed export default and module.export bothe dont work
nota
when using webpack API.js got been normaly imported and work fine
when using import API from path httpVueLaoder dont work
so i tried to do
const API= import(path)
problem witch that ,API is promise ,wich can notbe used :(
using await dontsolve the problem even when using
const API = (async ()=> await import(path))()
my solution still to call import using await but not in the top of the script
i call it in the mounted() function
async mounted(){
API = (await import(_END_+'/api/api.js')).default
},
note that you must use .default because import return a module :)
enter code here
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.
I'm muddling my way through implementing JWT authentication in a new Vue app and am running into an issue. I'm working off of the webpack CLI template FWIW.
In my main.js I have the following code after declaring my Vue app:
window.axios = axios
window.axios.defaults.baseURL = 'https://example.com'
if (localStorage.getItem('token') !== null) {
window.axios.defaults.headers.common['authorization'] = 'Token ' +
localStorage.token
}
Vue.router = router
This works fine when I log in, however after I'm redirected post-login (/sign-up) and then navigate to a new page (/sign-up/inventory) I try the following axios call and get a 404 because the baseURL can no longer be found.
axios.get('myapi/myreport/mydata/').then(function (response) {
console.log(response)
})
.catch(e => {
console.log(e)
})
}
If I log window.axios.defaults.baseURL just prior to the axios call I get an error ("Cannot read property 'defaults' of undefined") so presumably axios isn't even loading? What should I be checking in order to trouble-shoot this?
I moved the axios code up up above my app instantiation on main.js and that seems to have fixed it.