vue3+vite封装axios

新建api.ts文件配置接口

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'// 导入axios模块
import { ElNotification } from 'element-plus'
import { globalState } from "../store";
const controller = new AbortController()//终止请求

//配置接口,调用登陆接口后，token存到本地
export const ApiService = {
  admin: {
     login: (username: string, password: string) => 
     api().post('/api/admin/loginConsole', null, { params: { username, password } }),
    },
}

function api() {
    const instance = axios.create()//创建axios实例
    instance.defaults.timeout = 6000 //设置默认请求超时时间为6000毫秒
    instance.defaults.signal = controller.signal //设置默认请求的信号
    // load token
    const sessionToken = window.sessionStorage.getItem('token')
    if (sessionToken) instance.defaults.headers.common['token'] = sessionToken//如果存在token，加在请求头上
    instance.interceptors.response.use((response: any) => {    // 失败响应拦截器
        const { code, message } = response.data
        if (code == 201) {
            window.sessionStorage.clear()
            globalState.token = null
            globalState.username = null
            // router.push('/login?back=' + encodeURI(router.currentRoute.value.fullPath))
        }
        else {
            return response
        }
        //ElNotification({ type: 'error', title: '提示', message })
    }, error => {
        // console.log(error,'777777')
        const request: AxiosRequestConfig = error.request
        const response: AxiosResponse = error.response
        // console.log(request,'request');
        // console.log(response,'response');

        if (response) {
            // TODO: redirect 401 to login
            ElNotification({ type: 'error', title: '提示', message: '网络错误：' + response.status })
        } else if (request) {
            ElNotification({ type: 'error', title: '提示', message: '服务器无响应' })
        } else {
            ElNotification({ type: 'error', title: '提示', message: '出现异常' })
        }
    })
    return instance
}

新建store.ts文件取token和用户名

import { reactive } from 'vue'
export const globalState = reactive({
    username: window.sessionStorage.getItem('username'),
    token: window.sessionStorage.getItem('token'),
})

Vite文件配置请求地址

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://xxxxxxxxxx',//目标地址
        changeOrigin: true,//是否允许跨域
      }
    }
  },
  plugins: [vue()],
})

前面完成后调用接口

import { ApiService } from '../../service/api'
  ApiService.admin
        .login('admin', '123456')
        .then(response => {
            const { data } = response
             const username = data.content.username
            window.sessionStorage.setItem('token', token)
            window.sessionStorage.setItem('username', username)
        })