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)