关于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)