vue3+vite+js axios引用

先交代下基础版本：
"node"："V16.14.1" "vue": "^3.4.21" "vite": "^5.2.0"

1. 安装：npm install axios --save

2. 在src目录下的utils 文件夹创建一个request.js文件（示例代码，仅供参考）:

   //引入axios请求
   import axios from 'axios'
   // store
   import useUserStore from '@/store/modules/userStore.js'
   const store = useUserStore()
   const BASE_API=import.meta.env.VITE_APP_BASE_API
   // 创建axios实例
   const service = axios.create({
   baseURL: BASE_API, //所有的后端接口请求地址前缀部分(没有后端请求不用写)
   timeout: 15000 // 请求超时时间,这里15秒
   //withCredentials: true,// 异步请求携带cookie,true为携带,false为不携带
   //请求头里面设置通用传参类型
   /headers: {
   //设置后端需要的传参类型
   'Content-Type': 'application/json',
   'token': 'x-auth-token',//一开始就要token
   'X-Requested-With': 'XMLHttpRequest',
   }/
   })

   // request拦截器
   service.interceptors.request.use(config => {
   const value = JSON.parse(localStorage.getItem('token'));
   console.log(111, value.token)
   if (store.token) {
   config.headers['token'] = store.token // 让每个请求携带自定义token 请根据实际情况自行修改
   }
   return config
   }, error => {
   console.log(error)
   return Promise.reject(error)
   })

   // response拦截器
   service.interceptors.response.use(
   response => {
   //对数据返回做什么
   const res = response.data
   const config = response.config
   // custom 表示自定义
   if (res.status_code !== 200 && !config.custom) {
   // if (res.status_code === 1002) {
   // loginOut()
   // } else if (loginVerify(res, config)) { // 登录功能验证
   // return res
   // } else {
   // Message({
   // message: res.status || 'Error',
   // type: 'error',
   // duration: 5 * 1000
   // })
   // }
   return Promise.reject(new Error(res.status || 'Error'))
   } else {
   if (response.headers['authorization'] || response.headers['Authorization']) {
   const _token = response.headers['authorization'] || response.headers['Authorization']
   store.dispatch('user/setToken', _token.split('Bearer ')[1])
   }
   return res
   }
   },
   error => {
   console.log('err' + error) // for debug
   // Message({
   // message: error.message,
   // type: 'error',
   // duration: 5 * 1000
   // })
   return Promise.reject(error)
   }
   )
   export default service

3. 在src 目录下创建一个api斜体样式文件夹，用来存放每个模块的接口请求，类如login.js

   import request from '@/utils/request'

   //示例以application/json格式传参
   export function login(data) {
   return request({
   url: '/admin/login',
   method: 'post',
   data: data
   })
   }

   //示例在url后面拼接参数传参
   export function test(params) {
   return request({
   url: '/admin/login',
   method: 'post',
   params: params
   })
   }

4. 使用,类如HelloWorld.vue：

   <script setup> import { login } from '@/api/login.js' onMounted(() => { login({ phone: 18888888888 }).then(res => { console.log(res) }).catch(res => { console.log(res) }) }) </script>