1.从js文件中引入axios
第一种办法是,先在js
文件中对axios
做一些解决再引入到vue
文件中,比方申请拦挡、响应拦挡、封装对立的get、post
办法,甚至是定义接口申请。
具体做法:
1.装置
npm i --save axios
2.对axios做解决
requests/index.js
import axios from 'axios'axios.defaults.timeout = 50000axios.interceptors.request.use(config => { // ... return config}, error => { return Promise.error(error)})function getName(params) { return axios.get(`xx/xx/${params}`)}export { getName}
3.在vue文件中申请接口
test.vue
<script lang="ts" setup>import {getName} from '~@/requests/index'onMounted(() => { getName('xxxx');});</script>
2.将axios挂载在全局变量上
这种办法,能够从全局变量中获取axios
1.装置
npm i --save axios
2.挂载
import axios from 'axios'app.config.globalProperties.axios = axios
3.应用axios
import { getCurrentInstance } from 'vue'const { appContext } = getCurrentInstance();onMounted(() => { console.log(appContext.config.globalProperties.axios)})
3.应用vue-axios
这种办法能够用vue.use()
装置axios
,而后通过provide-inject
应用。
1.装置
npm install --save axios vue-axios
2.挂载
import axios from 'axios'import VueAxios from 'vue-axios'const app = createApp(App).use(store)app.use(VueAxios, axios)app.provide('axios', app.config.globalProperties.axios)
3.应用
import { inject } from 'vue'const axios = inject('axios')console.log(axios)