手把手教你在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)