关于vue.js:手把手教你在vue3中使用axios

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 = 50000

axios.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)