Vue3加TS使用Class写法

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import qs from 'qs'
import { ElMessage } from 'element-plus'

let axiosInstance: AxiosInstance = axios.create({
  baseURL: '/api',
  // 延迟
  timeout: 3000,
});

// axios实例拦截请求
axiosInstance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    console.log(config);
    removePending(config) // 在请求开始前，对之前的请求做检查取消操作
    addPending(config) // 将当前请求添加到 pending 中
    config.headers.sa_token = 'ken'
    return config;
  },
  (error: any) => {
    console.log('请求错误拦截' + error);

    return Promise.reject(error);
  }
)

// axios实例拦截响应
axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => {
    removePending(response)
    return response;
  },
  // 请求失败
  (error: any) => {
    if (axios.isCancel(error)) {
      console.log('repeated request: ' + error.message)
    } else {
      // handle error code
      // 错误抛到业务代码
      error.data = {}
      error.data.msg = '请求超时或服务器异常，请检查网络或联系管理员！'
      ElMessage.error(error.data.msg)
    }
    return Promise.reject(error)
  }
);

// 声明一个 Map 用于存储每个请求的标识 和 取消函数
const pending = new Map()
/**
 * 添加请求
 * @param {Object} config 
 */
const addPending = (config: AxiosRequestConfig) => {
  const url = [
    config.method,
    config.url,
    qs.stringify(config.params),
    qs.stringify(config.data)
  ].join('&')
  config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => {
    if (!pending.has(url)) { // 如果 pending 中不存在当前请求，则添加进去
      pending.set(url, cancel)
    }
  })
}
/**
 * 移除请求
 * @param {Object} config 
 */
const removePending = (config: AxiosRequestConfig) => {
  const url = [
    config.method,
    config.url,
    qs.stringify(config.params),
    qs.stringify(config.data)
  ].join('&')
  if (pending.has(url)) { // 如果在 pending 中存在当前请求标识，需要取消当前请求，并且移除
    const cancel = pending.get(url)
    cancel(url)
    pending.delete(url)
  }
}

/**
 * 清空 pending 中的请求（在路由跳转时调用）
 */
export const clearPending = () => {
  for (const [url, cancel] of pending) {
    cancel(url)
  }
  pending.clear()
}

export default axiosInstance

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home/:type',
    name: 'Home',
    component: () => import('@/views/Home.vue'),
    alias: ['/home'],
    props: true
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('@/views/About.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 全局前置拦截
router.beforeEach((to, from, next) => {
  console.log('全局前置拦截')
  console.log(to)
  console.log(from)

  next()
})
export default router

import { createStore, Store } from 'vuex'

declare module '@vue/runtime-core' {
  interface Photo {
    src: string;
  }
  // declare your own store states
  interface State {
    dark: boolean,
    count: number,
    user: {
      name: string,
      age: number,
      photoList: Array<Photo>
    }
  }

  // provide typings for `this.$store`
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}
export default createStore({
  state: {
    dark: localStorage.getItem('dackModel') === undefined ? false : JSON.parse(localStorage.getItem('dackModel') + ''),
    count: 112,
    user: {
      name: '',
      age: 0,
      photoList: [{
        src: 'test'
      }]
    }
  },
  getters: {

  },
  mutations: {
    switchDarkMode(state) {
      state.dark = !state.dark
      if (state.dark) {
        $('html').addClass('dark')
        localStorage.setItem('dackModel', JSON.stringify(true))
      } else {
        $('html').removeClass('dark')
        localStorage.setItem('dackModel', JSON.stringify(false))
      }
    }
  },
  actions: {
  },
  modules: {
  }
})

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
import 'windi.css'
import store from './store'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')