vue3.x整合axios实现路由埋点_詹Sir(开源字节)的博客-程序员ITS203

技术标签: 大前端  vue  elementui  vue.js  javascript  

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_35634154/article/details/122322709

智能推荐

一、100ASK_IMX6ULL嵌入式裸板学习_LED实验(知识点补充二)_OrangeQG的博客-程序员ITS203

MUX是什么?  MUX(multiplexer数据选择器):  在多路数据传送过程中,能够根据需要将其中任意一路选出来的电路,叫做数据选择器,也称多路选择器或多路开关。  多路转换器的作用主要是用于信号的切换。...

paho.mqtt.c打印日志_wwwlyj123321的博客-程序员ITS203

在创建client前,加上这两行。

Spring-Boot 学习_正在学编程中的博客-程序员ITS203

Spring覆盖了:web开发数据访问安全控制分布式消息服务移动开发批处理…spring boot能快速创建出生产级别的Spring应用SpringBoot优点• Create stand-alone Spring applications• 创建独立Spring应用• Embed Tomcat, Jetty or Undertow directly (no need to deploy WAR files)• 内嵌web服务器• Provide opinionated ‘st

读取bmp图片数据_weixin_30868855的博客-程序员ITS203

1 public void getBMPImage(String source) throws Exception { 2 3 clearNData(); //清除数据保存区 4 FileInputStream fs = null; 5 6 try { 7 ...

Linux下c语言实现输入密码的两种方法,回显为 * 和不显示_无聊的阿乐的博客-程序员ITS203

第一种:回显为*#include <stdio.h>#include <stdlib.h>/* 不用getch()实现密码的输入,回显为*,最大可输入16位数*/#define BACKSPACE 0x08 //删除的asccll码值//使密码以*号输出char* InputCode(char *pass){ int i=0; system("stty -icanon"); //设置一次性读完操作,即getchar()不

随便推点

YAHOO工具库(二)_风云天空的博客-程序员ITS203_yahoo.widget.panel

6.5.    DataTableDataTable的引入需要的CSS-->build/datatable/assets/datatable.css必须的引入-->build/yahoo-dom-event/yahoo-dom-event.js可选项,用到XHR取数方式时需要 -->build/connection/connection-min.js可选项,用到调整列宽时需

一切皆可复用_道可名-名可名的博客-程序员ITS203

你有复用习惯吗?你是程序员吗?我们经常要写数据库连接的代码,这些代码都类似,无非是new一个connection,然后配置connection的参数,然后open。很多编码新手,常常会在不同的地方编写这段类似的代码。其实很简单,这段代码应该抽取出来供每个地方调用。如果你编写的代码中发现很多类似的甚至相同的代码到处都是,应该好好考虑重构一下了。读小学的时候,老师要求我们写日记,当时觉得很难写

opencl库移植_Vernon2csdn的博客-程序员ITS203_libmali.so

 一、概念:1.1、一个完整的opencl框架,从内核层到用户层,可分为四部分:    内核层GPU驱动   -  kernel device drive        ,存在于Image or modules    用户层动态库       -  user-space binary drive ,存在于/usr/lib/libOpenCL.so    头文件          ...

php下载文件错误,文件损坏,编码错误,有空格_呐喊6510的博客-程序员ITS203

最近在用php做文件下载,出现了很多问题,劳神伤力,弄了很久终于解决了,于是乎记之。       刚开始时下载错误,弄了半天发现参数错误。$uid=intval($_SESSION[id]);$id=verify_id($_GET[id]);老是报错,然后就修改,当改成$uid=intval($_SESSION['id']);$id=verify_id($_GET['id']);就可以了,

网页监控,页面自动推送监控_Hedice的博客-程序员ITS203

随着网络的高速发展,信息碎片化让聚合的内容分散,内容源需要创造更多内容才能取得展现和阅读。百度搜索引擎是在目前依然占比很大,最好百度搜索引擎的排名才能取得大量流量。将内容主动推送至百度,往往能取得较好的收录于排名,还有原创保护的功效。页面主动推送百度推送接口可以手动提交和自动提交,手动提交需要每天手动将新产出的链接进行提交,而自动提交则只需部署好相应的推送代码即可完成。自动提交的前提是网站...

catia怎样倒2d_CATIA如何使用实例化2D部件做块_小凉爽Cool的博客-程序员ITS203

工程图中对于特殊特性的标注,我们需要使用相应的符号进行标记,CATIA中我们可以使用实例化2D部件做一个可以重复调用的块,快速的对特殊特性的元素进行标记,而且标记块的个数系统也会自动的进行排序统计。下面介绍详细的操作方法:Step 1打开一个工程图文件。工程图文件Step 2点击”新建详细视图”命令,然后在新建的详细视图图纸中制作我们需要的块的样式。点击新建详细视图命令制作需要的块样式Step 3...

推荐文章

热门文章

相关标签