vue3.x整合axios实现路由埋点

在这里，只有干货，直接上代码

request.js配置

// 导入axios
import axios from 'axios'
//1. 创建新的axios实例，
const service = axios.create({
  // 公共接口--这里注意后面会讲
  // baseURL: 'http://music.163.com', // 这个代码要注释掉，不然一直报跨域。坑了半天
  // 超时时间 单位是ms，这里设置了3s的超时时间
  timeout: 3 * 1000,
})
// 2.请求拦截器
service.interceptors.request.use(
  (config) => {
    //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
    config.data = JSON.stringify(config.data) //数据转化,也可以使用qs转换
    config.headers = {
      'Content-Type': 'application/x-www-form-urlencoded', //配置请求头
    }
    //注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
    // const token = 'xxx' //这里取token之前，你肯定需要先拿到token,存一下
    // if (token) {
    //   config.params = {
    //     Token: token,
    //     userId: 'xxx',
    //   } //如果要求携带在参数中
    //   config.headers.token = token //如果要求携带在请求头中
    // }
    return config
  },
  (error) => {
    Promise.reject(error)
  }
)

// 3.响应拦截器
service.interceptors.response.use(
  (response) => {
    //接收到响应数据并成功后的一些共有的处理，关闭loading等
    return response
  },
  (error) => {
    /***** 接收到异常响应的处理开始 *****/
    if (error && error.response) {
      // 1.公共错误处理
      // 2.根据响应码具体处理
      switch (error.response.status) {
        case 400:
          error.message = '错误请求'
          break
        case 401:
          error.message = '未授权，请重新登录'
          break
        case 403:
          error.message = '拒绝访问'
          break
        case 404:
          error.message = '请求错误,未找到该资源'
          window.location.href = '/NotFound'
          break
        case 405:
          error.message = '请求方法未允许'
          break
        case 408:
          error.message = '请求超时'
          break
        case 500:
          error.message = '服务器端出错'
          break
        case 501:
          error.message = '网络未实现'
          break
        case 502:
          error.message = '网络错误'
          break
        case 503:
          error.message = '服务不可用'
          break
        case 504:
          error.message = '网络超时'
          break
        case 505:
          error.message = 'http版本不支持该请求'
          break
        default:
          error.message = `连接错误${error.response.status}`
      }
    } else {
      // 超时处理
      if (JSON.stringify(error).includes('timeout')) {
        alert('服务器响应超时，请刷新当前页')
      }
      error.message = '连接服务器失败'
    }

    alert(error.message)
    /***** 处理结束 *****/
    //如果不需要错误处理，以上的处理过程都可省略
    return Promise.resolve(error.response)
  }
)
//4.导入文件
export default service

http.js配置

/****   http.js   ****/
// 导入封装好的axios实例
import request from './request'

const http = {
  /**
   * methods: 请求
   * @param url 请求地址
   * @param params 请求参数
   */
  get(url, params) {
    const config = {
      method: 'get',
      url: url,
    }
    if (params) config.params = params
    return request(config)
  },
  post(url, params) {
    const config = {
      method: 'post',
      url: url,
    }
    if (params) config.data = params
    return request(config)
  },
  put(url, params) {
    const config = {
      method: 'put',
      url: url,
    }
    if (params) config.params = params
    return request(config)
  },
  delete(url, params) {
    const config = {
      method: 'delete',
      url: url,
    }
    if (params) config.params = params
    return request(config)
  },
}
//导出
export default http

路由index.ts配置

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
  ErrorHandler,
} from 'vue-router'
// 引入路由守卫方法
import beforeEach from './beforeEach'
import afterEach from './afterEach'
const home = () => import('../components/Home.vue')
const login = () => import('../components/Login.vue')
const page404 = () => import('../components/404.vue')

const routes = [
  { path: '/', redirect: '/login' },
  {
    path: '/login',
    name: 'login',
    component: login,
  },
  {
    path: '/home',
    name: 'home',
    component: home,
  },
  {
    path: '/404',
    name: '404',
    component: page404,
  },
]

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

/**
 * 路由前置守卫
 */
router.beforeEach((guard) => {
  beforeEach.checkAuth(guard, router)
})

/**
 * 路由后置守卫
 */
router.afterEach((guard) => {
  afterEach.buriedPoint(guard, router)
})

/**
 * 路由错误回调
 */
router.onError((handler: ErrorHandler) => {
  console.log('error:', handler)
})

/**
 * 输出对象
 */
export default router

afterEach.ts路由后置守卫埋点配置

import { Router } from 'vue-router'
import http from '../utils/http.js'
export default {
  /**
   * 路由守卫埋点统计
   * @param guard
   * @param router
   */
  buriedPoint(guard: any, router: Router) {
    http.get('/api/song/detail/?id=31445554&ids=[31445554]').then((res) => {
      console.log(guard.name + '埋点')
      console.log(res.data)
    })
  },
}

vite.config.ts代理配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

export default defineConfig({
  plugins: [vue()], // 配置需要使用的插件列表，这里将vue添加进去
  // 打包配置
  build: {
    target: 'modules',
    outDir: 'dist', //指定输出路径
    assetsDir: 'assets', // 指定生成静态资源的存放路径
    minify: 'terser', // 混淆器，terser构建后文件体积更小
  },
  alias: {
    // 键必须以斜线开始和结束
    '/@/': path.resolve(__dirname, './src'),
  },
  // 本地运行配置，及反向代理配置
  server: {
    cors: true, // 默认启用并允许任何源
    open: true, // 在服务器启动时自动在浏览器中打开应用程序
    proxy: {
      '/api': {
        target: 'http://music.163.com', //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '/api'),
      },
    },
  },
})

引入Js时如果报错，则在tsconfig.json中加入"noImplicitAny": false