Axios.all is not a function inside vue component


#1

I have axios setup in a seperate http.js which I export and then import into main.js as such:
import axios from ‘axios’;

**http.js**
export default axios.create({
    baseURL: 'http://localhost:3000/v1/api'
});

main.js
import http from './http';
Vue.prototype.$http = http;

In my component I’m trying to execute a concurrent ajax request using http.all (which references the $http object on the vue prototype which points to the axios instance. I could easily just use this.$http.all, but I get the same error).

    const http = this.$http;
    const classes = http.get('/classes/names');
    const disciplines = http.get('/disciplines/types');

    http.all([classes, disciplines])
        .then(http.spread((classes, disciplines) => {
            const c = classes.map(c => {
                return { name: c.slug, selected: false, data_type: 'class' };
            });

            const d = discs.map(d => {
                return { name: d, selected: false, data_type: 'disc' };
            });

            this.filter = c.concat(d);
        }));

Now when I do normal ajax calls, get, post, etc everything works fine. However when I use http.all (which points to Vue.prototype.$http which points to my axios instance) It says that http.all function doesn’t exist. This is the same if I didn’t save a reference and just used this.$http, or imported http.js directly into the component and tried using it that way.

[Vue warn]: Error in created hook: "TypeError: http.all is not a function"

found in

---> <Filter> at /home/michael/Projects/cfproject/client/src/components/filter/Filter2.vue
       <Home> at /home/michael/Projects/cfproject/client/src/components/pages/Home.vue
         <App> at /home/michael/Projects/cfproject/client/src/App.vue
           <Root>
warn @ vue.esm.js?65d7:459
handleError @ vue.esm.js?65d7:542
callHook @ vue.esm.js?65d7:2648
Vue._init @ vue.esm.js?65d7:4197
VueComponent @ vue.esm.js?65d7:4367
createComponentInstanceForVnode @ vue.esm.js?65d7:3649
init @ vue.esm.js?65d7:3470
createComponent @ vue.esm.js?65d7:5118
createElm @ vue.esm.js?65d7:5061
createChildren @ vue.esm.js?65d7:5189
createElm @ vue.esm.js?65d7:5094
createChildren @ vue.esm.js?65d7:5189
createElm @ vue.esm.js?65d7:5094
patch @ vue.esm.js?65d7:5541
Vue._update @ vue.esm.js?65d7:2395
updateComponent @ vue.esm.js?65d7:2519
get @ vue.esm.js?65d7:2862
Watcher @ vue.esm.js?65d7:2851
mountComponent @ vue.esm.js?65d7:2523
Vue$3.$mount @ vue.esm.js?65d7:7842
Vue$3.$mount @ vue.esm.js?65d7:10045
init @ vue.esm.js?65d7:3476
createComponent @ vue.esm.js?65d7:5118
createElm @ vue.esm.js?65d7:5061
createChildren @ vue.esm.js?65d7:5189
createElm @ vue.esm.js?65d7:5094
patch @ vue.esm.js?65d7:5541
Vue._update @ vue.esm.js?65d7:2395
updateComponent @ vue.esm.js?65d7:2519
get @ vue.esm.js?65d7:2862
Watcher @ vue.esm.js?65d7:2851
mountComponent @ vue.esm.js?65d7:2523
Vue$3.$mount @ vue.esm.js?65d7:7842
Vue$3.$mount @ vue.esm.js?65d7:10045
init @ vue.esm.js?65d7:3476
createComponent @ vue.esm.js?65d7:5118
createElm @ vue.esm.js?65d7:5061
patch @ vue.esm.js?65d7:5577
Vue._update @ vue.esm.js?65d7:2395
updateComponent @ vue.esm.js?65d7:2519
get @ vue.esm.js?65d7:2862
Watcher @ vue.esm.js?65d7:2851
mountComponent @ vue.esm.js?65d7:2523
Vue$3.$mount @ vue.esm.js?65d7:7842
Vue$3.$mount @ vue.esm.js?65d7:10045
Vue._init @ vue.esm.js?65d7:4207
Vue$3 @ vue.esm.js?65d7:4292
(anonymous) @ main.js?3479:10
(anonymous) @ build.js:1089
__webpack_require__ @ build.js:660
fn @ build.js:86
(anonymous) @ build.js:1773
__webpack_require__ @ build.js:660
(anonymous) @ build.js:709
(anonymous) @ build.js:712
vue.esm.js?65d7:546 TypeError: http.all is not a function
    at VueComponent.initFilters (Filter2.vue?1c1a:63)
    at VueComponent.boundFn [as initFilters] (vue.esm.js?65d7:179)
    at VueComponent.created (Filter2.vue?1c1a:41)
    at callHook (vue.esm.js?65d7:2646)
    at VueComponent.Vue._init (vue.esm.js?65d7:4197)
    at new VueComponent (vue.esm.js?65d7:4367)
    at createComponentInstanceForVnode (vue.esm.js?65d7:3649)
    at init (vue.esm.js?65d7:3470)
    at createComponent (vue.esm.js?65d7:5118)
    at createElm (vue.esm.js?65d7:5061)

What am I doing wrong, is it a scope issue?


#2

Your https.js return an axios instance not axios itself. The axios instance methods don’t include all().

You would have to import axios and use it directly.