axios

安装

pnpm add axios

封装

创建文件 src/utils/request.js，代码如下

import axios from 'axios'
import { useUserStore } from '@stores'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

const instance = axios.create({
    //baseURL: 'http://big-event-vue-api-t.itheima.net',
    baseURL:'/api',
    timeout: 10000 // 10秒超时
})
// 请求拦截器
instance.interceptors.request.use(config => {
    if(useUserStore.token) config.headers.Authorization = useUserStore.token
    return config
},err => Promise.reject(err))
// 响应拦截器
instance.interceptors.response.use(res => {
    if(res.data.code === 0) return res.data

    ElMessage.error(res.data.message || '网络异常，请稍后再试！')
    return Promise.reject(res.data)
},err => {
    const router = useRouter()
    if(err.response?.status === 401){
        router.push('/login')
    }

    ElMessage.error(err.response.data.message || '网络异常，请稍后再试！')
    Promise.reject(err)
})

export default instance

配置代理

在配置文件 vite.config.js 中设置代理网络，开发测试时可跨域访问，配置代理的 server 节点是根节点

export default defineConfig({
  base:'/',
  server:{
    'proxy':{
      '/api':{
        target: 'http://17.71.0.7/showabe',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/,'')
        ,
      }
    }
  },
})

测试请求

封装的 request.js 中设置了根路径是 /api 要对应配置代理的正则表达式中的替换字符，替换后是代理配置中的后台服务的路径，再拼接上下面请求的测试 url 后发送给后端服务

req({
  method:'post',url:'/dev/getAllDynamicTasks'
}).then(res => console.log(res)).catch(err => console.log(err))