vue3版本中挂载axios(在main.js中配置全局axios)--以助于方便管理

如果不在main.js里面配置全局axios,则,每次都要在vue文件的script标签中加入:

import axios from "axios";

而且如果端口变化,则每个文件的端口都要发生改变,这是我们不希望看到的,并且处理繁琐

axios
         .post("http://localhost:8080/xxxxx",  data )
         .then(res =>.........

可以在终端下载vue-axios

npm install axios vue-axios --save

然后在main.js里面添加:

import VueAxios from "vue-axios";
const app = createApp(App)
app.use(VueAxios,axios)


axios.defaults.headers.post['Content-type']='application/x-www-form-urlencoded'//配置默认访问请求头
axios.defaults.baseURL = "http://localhost:8088"  // 配置请求根路径
//...

这样就可以在其他界面用this.axios用了:

this.axios
            .post("/xxxxxxxxx",  data )
            .then(res=>................
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue项目全局配置axios和路由,可以按照以下步骤进行: 1. 安装axiosvue-router ``` npm install axios vue-router --save ``` 2. 在src目录下创建一个config.js文件,用于存放全局配置 ```javascript import axios from 'axios' import router from '../router' // axios配置 axios.defaults.baseURL = 'http://localhost:3000' axios.defaults.timeout = 5000 // 请求拦截器 axios.interceptors.request.use( config => { // 如果有token则添加到请求头 if (localStorage.token) { config.headers.Authorization = localStorage.token } return config }, error => { return Promise.reject(error) } ) // 响应拦截器 axios.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response) } else { return Promise.reject(response) } }, error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面,并携带当前页面的路径 // 在登录成功后返回当前页面,这一步需要在登录页操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) break // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuextoken对象 // 跳转登录页面 case 403: alert('登录过期,请重新登录') // 清除token localStorage.removeItem('token') // store.commit('loginSuccess', null) setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) }, 1000) break // 404请求不存在 case 404: alert('网络请求不存在') break // 其他错误,直接抛出错误提示 default: alert(error.response.data.message) } return Promise.reject(error.response) } } ) export default axios ``` 3. 在main.js引入config.js文件,并将axios和router挂载Vue.prototype上 ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import axios from './config' Vue.config.productionTip = false Vue.prototype.$axios = axios Vue.prototype.$router = router new Vue({ router, render: h => h(App), }).$mount('#app') ``` 现在可以在Vue项目的任何地方使用axios和router了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值