【Vue】在 Vue 中使用 axios
2022/5/31 23:22:29
本文主要是介绍【Vue】在 Vue 中使用 axios,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
把 axios 挂载到 Vue 的原型上
-
在
main.js
中导入 axios,并挂载到 Vue 的 prototype 上:import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.prototype.axios = axios new Vue({ render: (h) => h(App) }).$mount('#app')
-
这样在每个组件中使用 axios 发请求时就不需要每次都导入了,直接使用
this.axios
就能得到 axios<script> export default { methods: { getInfo() { this.axios.get('./cartData.json').then((res) => { console.log(res.data) }) } } } </script>
配置请求根路径
在 main.js
中进行配置:
import Vue from 'vue' import App from './App.vue' import axios from 'axios' Vue.config.productionTip = false // 配置 axios 的请求根路径 axios.defaults.baseURL = 'http://httpbin.org:80' Vue.prototype.axios = axios new Vue({ render: (h) => h(App) }).$mount('#app')
配置了请求根路径之后,以后用 axios 发请求就不需要写全路径了。
-
配置前:
this.axios.get('http://httpbin.org:80/get').then((res) => { console.log(res.data) })
-
配置后:
this.axios.get('/get').then((res) => { console.log(res.data) })
这篇关于【Vue】在 Vue 中使用 axios的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist
- 2024-03-11icons for vue
- 2024-03-07breadcrumbs react js
- 2024-03-06react login page example
- 2024-03-06react router uselocation
- 2024-03-04postgres jsonb_set