Tag Archives: axes

[Solved] axios Configurate baseURL Error: Uncaught TypeError: Cannot set properties of undefined (setting ‘baseURL’)

Problem: the Axios configuration baseurl reported an error

Solution:

Reinstall the old version of Axios

npm i [email protected] -S

OVER~

After checking, it is determined that there is no problem with the writing method, and clearing the cache is invalid.

I thought of upgrading my browser two days ago, so I changed my browser, but I still reported an error.

Uninstallation reinstallation is invalid.

npm i axios -S

NPM I Axios installs the latest version by default

So back to the previous version

I searched the information for a long time and didn’t find why I reported an error. Let’s continue the development first~

Vue: How to use Vue-router in Axios

background

When writing the home page of the test platform, I want to implement the route jump function in the click event of the histogram of echarts, and directly use this.$router.Push() an error will be reported: uncaught typeerror: cannot read property 'push' of undefined

Solve the pit encountered

First of all, I think about whether I can import the routing instance directly to see if it is OK:

import Router from 'vue-router';

Then jump like this:

Router.push(`/projects_list`)

Results:

Uncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_2__.default.push is not a function

It is found that the imported route is empty:

Successfully solved

If you can’t use it directly, can you import the previous routing instances in Src/router/index ?Because this routing instance is the route passed in to the Vue instance in main, so:

import Router from '../../router/index.js'

Results:

Successful jump

Axios encapsulate error: cyclic dependency [How to Solve]

When NPM starts, an error is directly reported: cyclic dependency

You can read the above blog to find out what this mistake is about

Let’s start my solution now (for Vue, please draw inferences from others)

In main.js

import axios from './util/ajax'
// Registering components to Vue
Vue.prototype.$axios = axios

Then where you need to send a request

Just use this. $Axios. Get instead of Axios. Get

How to Solve Request failed with status code 404

Request failed with status code 404

On site restoration

This is in the Vue project. Mock is used to simulate data, and false data is tested. After the background interface is developed, it is connected with real data main.js It’s written like this [except for the places with long horizontal line (- —), other places are ignored for the time being]

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
import routes from './routes'
import Mock from './mock'//----------------------------Pay attention to this place--mock

import axios from 'axios'//----------------------------Pay attention to this place--axios
import ajax from './lib/ajax/Ajax.js'//----------------Pay attention to this place--axios



Mock.bootstrap();//------------------------------------Pay attention to this place--mock
import 'font-awesome/css/font-awesome.min.css'

Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)

Vue.prototype.$ajax = axios;//---------------------------Pay attention to this place--axios
Vue.prototype.$http = ajax;//----------------------------Pay attention to this place--axios


const router = new VueRouter({
    routes
})

router.beforeEach((to, from, next) => {
    if (to.path == '/login') {
        sessionStorage.removeItem('user');
    }
    let user = JSON.parse(sessionStorage.getItem('user'));
    if (!user && to.path != '/login') {
        next({path: '/login'})
    } else {
        next()
    }
})

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

Method post call

getCompanyInfo: function () {
    this.$ajax.get('cszj/company/getCompanyById').then((response) => {
        alert(response.data);
    }).catch((response) => {
        alert("Error:" + response);
    })
}

Errors in execution

Cause of error

Mock conflicts with Axios

Solution

Comment out mock

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router'
import store from './vuex/store'
import Vuex from 'vuex'
import routes from './routes'
//import Mock from './mock'//----------------------------Pay attention to this place--mock

import axios from 'axios'//----------------------------Pay attention to this place--axios
import ajax from './lib/ajax/Ajax.js'//----------------Pay attention to this place--axios



//Mock.bootstrap();//------------------------------------Pay attention to this place--mock
import 'font-awesome/css/font-awesome.min.css'

Vue.use(ElementUI)
Vue.use(VueRouter)
Vue.use(Vuex)

Vue.prototype.$ajax = axios;//---------------------------Pay attention to this place--axios
Vue.prototype.$http = ajax;//----------------------------Pay attention to this place--axios


const router = new VueRouter({
    routes
})

router.beforeEach((to, from, next) => {
    if (to.path == '/login') {
        sessionStorage.removeItem('user');
    }
    let user = JSON.parse(sessionStorage.getItem('user'));
    if (!user && to.path != '/login') {
        next({path: '/login'})
    } else {
        next()
    }
})

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

After testing the post method, you can request it!