Vue中使用Axios以及拦截器配置(TypeScript版)

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

• 安装

npm install axios vue-axios --save

• axios配置

// src/utils/axios.ts
import axios, {AxiosRequestConfig, AxiosResponse} from 'axios'
import VueAxios from 'vue-axios'
import {ElMessage, ElNotification} from 'element-plus'
import {useRouter} from 'vue-router'

axios.create({
    baseURL: 'http://127.0.0.1:8080',
    timeout: 6 * 1000,
    withCredentials: true
})

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';

axios.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        // 这里可以是对tokon进行操作... 
        return config;
    }, ((error: any) => {
        ElNotification.error('请求错误！')
        return Promise.reject(error);
    }))

axios.interceptors.response.use(
    (response: AxiosResponse) => {
        switch (response.status as number) {
            case 401: {
                ElMessage.warning('请先登录')
                const router = useRouter()
                router.push('/login')
                break
            }
            case 403: {
                ElMessage.warning('拒绝访问')
                break
            }
        }
        return response;
    }, ((error: any) => {
        ElNotification.error('响应错误！')
        return Promise.reject(error);
    }))

export {axios, VueAxios}

• vite配置

// vite.config.ts
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'

export default defineConfig({
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        }
    },
    plugins: [vue()],
    server: {
        host: '127.0.0.1',
        port: 3000,
        cors: true,
        open: true,
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8080',
                changeOrigin: true,
                rewrite: (path: string) => path.replace(/^/api/, '')
            }
        }
    }
})

• 使用

// main.ts
import {createApp} from 'vue'
import App from './App.vue'

import {axios, VueAxios} from './utils/axios'

const app = createApp(App)
app.use(VueAxios, axios).mount('#app')