Vue3使用axios的配置方法

一、安装axios
npm install axios --save

二、配置axios，添加拦截器
在src目录下新建一个request文件夹，在里面新建index.ts（或者.js）文件，编辑代码如下：
import axios from 'axios'
// 创建一个 axios 实例
const service = axios.create({
        baseURL: '/api', // 所有的请求地址前缀部分
        timeout: 60000, // 请求超时时间毫秒
        withCredentials: true, // 异步请求携带cookie
        headers: {
                // 设置后端需要的传参类型
                'Content-Type': 'application/json',
                'token': 'your token',
                'X-Requested-With': 'XMLHttpRequest',
        },
})

// 添加请求拦截器
service.interceptors.request.use(
        function (config) {
                // 在发送请求之前做些什么
                return config
        },
        function (error) {
                // 对请求错误做些什么
                console.log(error)
                return Promise.reject(error)
        }
)

// 添加响应拦截器
service.interceptors.response.use(
        function (response) {
                console.log(response)
                // 2xx 范围内的状态码都会触发该函数。
                // 对响应数据做点什么
                // dataAxios 是 axios 返回数据中的 data
                const dataAxios = response.data
                // 这个状态码是和后端约定的
                const code = dataAxios.reset
                return dataAxios
        },
        function (error) {
                // 超出 2xx 范围的状态码都会触发该函数。
                // 对响应错误做点什么
                console.log(error)
                return Promise.reject(error)
        }
)

export default service

三、使用axios发送请求
在src目录下新建一个apis文件夹，这里面放入今后所有的请求文件，例如新建一个请求用户信息的接口user.ts，代码如下：
// 导入axios实例
import httpRequest from '@/request/index'
// 定义接口的传参
interface UserInfoParam {
        userID: string,
        userName: string
}

// 获取用户信息
export function apiGetUserInfo(param: UserInfoParam) {
    return httpRequest({
                url: 'your api url',
                method: 'post',
                data: param,
        })
}
接着在具体业务页面里使用这个请求，例如：
<script setup lang="ts">
import { onMounted } from 'vue'
import { apiGetUserInfo } from '@/apis/user'

function getUserInfo() {
        const param = {
                userID: '10001',
                userName: 'Mike',
        }
        apiGetUserInfo(param).then((res) => {
                console.log(res)
        })
}

onMounted(() => {
        getUserInfo()
})
</script>
原文链接：https://blog.csdn.net/xjtarzan/article/details/123682618