小小Blog - 前端
type: channel
link: https://www.xxhzm.cn/category/qd/
items: 分享一个开源的字体分片工具
items: 使用宝塔面板部署Node项目
items: Vue Router 中全局守卫和组件守卫的使用方式及示例
items: Vue Router 多个路由的概念和实现方式详解
items: Vue Router 的多个路由定义和使用方法详解
items: Axios 实现登录拦截功能：完整代码、逻辑解析和性能优化建议
items: nuxt3目录结构详解
items: nuxt3中文官网nuxt3是一个基于Vue.js的静态站点生成器和应用程序框架
items: axios封装token示例
items: axios封装示例

分享一个开源的字体分片工具
type: item
date: 2024-11-03T01:11:45+08:00
description: 前言Hello大家好，我是小小，今天给大家分享一个免费、高效的字体分片工具。为什么要使用字体分片呢？对于中文字体来说，动辄几十 M 的体积非常常见，而我们服务器的带宽根本承受不住这么大的流量，这时候字体加载的优化就显得尤为重要。接下来给大家展示一下不使用字体分片和使用字体分片之后的速度差异不使用字体分片我们可以看到整个页面完全加载完需要长达6秒的时间，这对于用户体验来说是非常差的如果采用小带宽服务器，那么这个加载时间还会更长使用字体分片我们可以看到，在将字体分片之后，加载速度提升了好几倍如何使用字体分片作者github：https://github.com/daidr/font-css-subset/tree/main我自己搭建的一个地址：https://font.xxhzm.cn/我们可以直接访问https://font.xxhzm.cn/，输入字体名称，上传需要分片的字体，然后在网站中引用下载的 css 就可以啦

使用宝塔面板部署Node项目
type: item
date: 2024-04-10T20:16:00+08:00
description: 前言Hi 大家好，我是小小。现在是2024年4月10日距离上一次发布教程类文章（2023年02月19日）已经一年多了，过去这一年中一直在忙于学习，截止到今天，距离高考还有392天，在这392天里面这应该是最后一篇文章了，希望392天以后我会带着激动的心情来给大家分享喜悦。话不多说，开始今天的正文，那就是如何使用LINUX部署nuxt3项目在之前我们经常使用宝塔的PM2管理器管理器，但宝塔现已停止PM2管理器的维护和下载了，那我们该如何部署呢，下面将使用宝塔自带的Node项目进行部署使用宝塔面板部署Node项目宝塔在网站-Node项目里面提供了关于Node项目的部署，我简单使用了一下，可以满足我们的需求。一、安装Node版本管理器（已安装可跳过）我们在宝塔-软件商店-搜索-node，安装Node.js版本管理器 2.1二、根据使用程序安装对应nodejs版本我这里的本地使用的版本是16.20.2，所以我在服务器上也安装16.20.2建议与程序开发时的node版本一致三、将程序上传到服务器将你的网站程序上传到服务器并解压因为nuxt3根目录并没有package.json，所以我们需要进入serve文件夹，将这里面的package.json复制到网站根目录四、部署项目我们打开网站-Node项目-添加Node项目如果没有特殊需求，可以按照我上面填写的进行配置放行端口 程序所使用的端口必须进行放行，我这边没有用宝塔防火墙所以没有点五、大功告成程序部署完毕后，可以进入服务器ip:3000 端口，查看是否部署成功配置反向代理在PHP网站中配置反向代理，这一步可选如果在Node项目中配置了域名，这一步可省略

Vue Router 中全局守卫和组件守卫的使用方式及示例
type: item
date: 2023-05-04T23:14:00+08:00
description: Vue Router 中全局守卫和组件守卫的使用方式及示例Vue Router 是 Vue.js 官方提供的路由管理器，它可以用来实现单页面应用（SPA）中的前端路由。在 Vue Router 中可以定义多个路由，每个路由都映射到一个组件，当用户访问对应的路由时，会加载对应的组件并显示在页面上。在 Vue Router 中，路由配置是一个数组，里面包含了多个路由对象。每个路由对象包含了以下属性：path：表示当前路由匹配的 URL 路径。可以是一个字符串，例如 '/home'，也可以是一个包含动态参数的路径，例如 '/user/:id'，动态参数可以通过 $route.params 访问；name：路由的名称，用来在程序中标识路由。名称必须是唯一的，不能与其他路由重名；component：路由对应的组件。可以是一个引入的组件对象，例如 import Home from './views/Home.vue'，也可以是一个函数，例如 () => import('./views/Home.vue')，用于按需加载组件；meta：路由的元数据，用来存储一些额外信息，例如页面标题、页面描述等。在 Vue Router 中，路由配置通常是在一个单独的文件中定义，例如 router.js。在这个文件中，我们需要先引入 Vue 和 Vue Router，并创建一个新的 Router 实例，然后将路由配置传递给 Router 实例的 routes 属性。最后，我们需要将 Router 实例导出，以便在应用中使用。下面是一个简单的路由配置示例：import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' import User from './views/User.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/user/:id', name: 'user', component: User }, { path: '*', redirect: '/home' } ] })在上面的示例中，我们创建了一个新的 Router 实例，并将路由配置传递给了 routes 属性。这个路由配置包含了四个路由对象，分别对应了 /home、/about 和 /user/:id 三个路径，以及一个通配符路径 '*'，用于匹配所有未定义的路径。其中，redirect 属性表示重定向到其他路由。在 Vue 应用中，我们可以通过 router-link 组件来实现路由的跳转。这个组件可以接受一个 to 属性，用来指定要跳转的路由路径。例如：<router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>除了使用 router-link 组件来实现路由跳转外，我们还可以在组件中使用 this.$router 和 this.$route 来访问 Router 实例和当前路由信息。例如，在一个组件的方法中，我们可以通过以下方式来实现路由跳转：this.$router.push('/home') this.$router.push({ name: 'about' }) this.$router.push({ path: '/user/123' })在上面的代码中，我们使用了 $router.push 方法来实现路由的跳转。这个方法接受一个路由描述符作为参数，可以是一个字符串路径，也可以是一个对象，包含了路径、名称、参数等信息。通过这种方式，我们可以动态地修改路由，并实现页面跳转。除了 $router 和 $route，我们还可以使用路由守卫来实现更复杂的路由控制。在 Vue Router 中，路由守卫分为全局守卫和组件守卫两种类型。全局守卫可以监听整个路由的生命周期，包括路由的导航、组件的激活和销毁等；而组件守卫则只监听当前组件的生命周期。组件守卫在 Vue Router 中，…

Vue Router 多个路由的概念和实现方式详解
type: item
date: 2023-05-04T23:11:39+08:00
description: Vue Router 多个路由的概念和实现方式详解Vue Router 是 Vue.js 官方提供的路由管理器，它可以用来实现单页面应用（SPA）中的前端路由。在 Vue Router 中可以定义多个路由，每个路由都映射到一个组件，当用户访问对应的路由时，会加载对应的组件并显示在页面上。在 Vue Router 中，路由配置是一个数组，里面包含了多个路由对象。每个路由对象包含了以下属性：path：表示当前路由匹配的 URL 路径。可以是一个字符串，例如 '/home'，也可以是一个包含动态参数的路径，例如 '/user/:id'，动态参数可以通过 $route.params 访问；name：路由的名称，用来在程序中标识路由。名称必须是唯一的，不能与其他路由重名；component：路由对应的组件。可以是一个引入的组件对象，例如 import Home from './views/Home.vue'，也可以是一个函数，例如 () => import('./views/Home.vue')，用于按需加载组件；meta：路由的元数据，用来存储一些额外信息，例如页面标题、页面描述等。在 Vue Router 中，路由配置通常是在一个单独的文件中定义，例如 router.js。在这个文件中，我们需要先引入 Vue 和 Vue Router，并创建一个新的 Router 实例，然后将路由配置传递给 Router 实例的 routes 属性。最后，我们需要将 Router 实例导出，以便在应用中使用。下面是一个简单的路由配置示例：import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' import User from './views/User.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/user/:id', name: 'user', component: User }, { path: '*', redirect: '/home' } ] })在上面的示例中，我们创建了一个新的 Router 实例，并将路由配置传递给了 routes 属性。这个路由配置包含了四个路由对象，分别对应了 /home、/about 和 /user/:id 三个路径，以及一个通配符路径 '*'，用于匹配所有未定义的路径。其中，redirect 属性表示重定向到其他路由。在 Vue 应用中，我们可以通过 router-link 组件来实现路由的跳转。这个组件可以接受一个 to 属性，用来指定要跳转的路由路径。例如：<router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>除了使用 router-link 组件来实现路由跳转外，我们还可以在组件中使用 this.$router 和 this.$route 来访问 Router 实例和当前路由信息。例如，在一个组件的方法中，我们可以通过以下方式来实现路由跳转：this.$router.push('/home') this.$router.push({ name: 'about' }) this.$router.push({ path: '/user/123' })在上面的代码中，我们使用了 $router.push 方法来实现路由的跳转。这个方法接受一个路由描述符作为参数，可以是一个字符串路径，也可以是一个对象，包含了路径、名称、参数等信息。通过这种方式，我们可以动态地修改路由，并实现页面跳转。除了 $router 和 $route，我们还可以使用路由守卫来实现更复杂的路由控制。在 Vue Router 中，路由守卫分为全局守卫和组件守卫两种类型。全局守卫可以监听整个路由的生命周期，包括路由的导航、组件的激活和销毁等；而组件守卫则只监听当前组件的生命周期。组件守卫在 Vue Router 中，组件守卫…

Vue Router 的多个路由定义和使用方法详解
type: item
date: 2023-05-04T23:08:20+08:00
description: Vue Router 的多个路由定义和使用方法详解Vue Router 是 Vue.js 官方提供的路由管理器，它可以用来实现单页面应用（SPA）中的前端路由。在 Vue Router 中可以定义多个路由，每个路由都映射到一个组件，当用户访问对应的路由时，会加载对应的组件并显示在页面上。在 Vue Router 中，路由配置是一个数组，里面包含了多个路由对象。每个路由对象包含了以下属性：path：表示当前路由匹配的 URL 路径。可以是一个字符串，例如 '/home'，也可以是一个包含动态参数的路径，例如 '/user/:id'，动态参数可以通过 $route.params 访问；name：路由的名称，用来在程序中标识路由。名称必须是唯一的，不能与其他路由重名；component：路由对应的组件。可以是一个引入的组件对象，例如 import Home from './views/Home.vue'，也可以是一个函数，例如 () => import('./views/Home.vue')，用于按需加载组件；meta：路由的元数据，用来存储一些额外信息，例如页面标题、页面描述等。在 Vue Router 中，路由配置通常是在一个单独的文件中定义，例如 router.js。在这个文件中，我们需要先引入 Vue 和 Vue Router，并创建一个新的 Router 实例，然后将路由配置传递给 Router 实例的 routes 属性。最后，我们需要将 Router 实例导出，以便在应用中使用。下面是一个简单的路由配置示例：import Vue from 'vue' import Router from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' import User from './views/User.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', redirect: '/home' }, { path: '/home', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/user/:id', name: 'user', component: User }, { path: '*', redirect: '/home' } ] })在上面的示例中，我们创建了一个新的 Router 实例，并将路由配置传递给了 routes 属性。这个路由配置包含了四个路由对象，分别对应了 /home、/about 和 /user/:id 三个路径，以及一个通配符路径 '*'，用于匹配所有未定义的路径。其中，redirect 属性表示重定向到其他路由。在 Vue 应用中，我们可以通过 router-link 组件来实现路由的跳转。这个组件可以接受一个 to 属性，用来指定要跳转的路由路径。例如：<router-link to="/home">Home</router-link> <router-link to="/about">About</router-link> <router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>除了使用 router-link 组件来实现路由跳转外，我们还可以在组件中使用 this.$router 和 this.$route 来访问 Router 实例和当前路由信息。例如，在一个组件的方法中，我们可以通过以下方式来实现路由跳转：this.$router.push('/home') this.$router.push({ name: 'about' }) this.$router.push({ path: '/user/123' })在上面的代码中，我们使用了 $router.push 方法来实现路由的跳转。这个方法接受一个路由描述符作为参数，可以是一个字符串路径，也可以是一个对象，包含了路径、名称、参数等信息。通过这种方式，我们可以动态地修改路由，并实现页面跳转。除了 $router 和 $route，我们还可以使用路由守卫来实现更复杂的路由控制。在 Vue Router 中，路由守卫分为全局守卫和组件守卫两种类型。全局守卫可以监听整个路由的生命周期，包括路由的导航、组件的激活和销毁等；而组件守卫则只监听当前组件的生命周期。组件守卫在 Vue Router 中，组件守卫…

Axios 实现登录拦截功能：完整代码、逻辑解析和性能优化建议
type: item
date: 2023-05-02T19:43:00+08:00
description: Axios 实现登录拦截功能：完整代码、逻辑解析和性能优化建议请求拦截器Axios是一个流行的基于Promise的HTTP客户端库，可以用于浏览器和Node.js中进行HTTP请求。Axios提供了拦截器(interceptors)机制，可以在请求发送前或响应返回后对请求和响应进行处理。拦截器是Axios中非常强大和灵活的功能，可以让开发者方便地处理请求和响应的各种情况。对于登录拦截，通常情况下我们需要在每个需要登录才能访问的请求中检查用户是否已登录。这种方式需要在每个请求中进行判断，非常麻烦。而使用Axios拦截器可以避免这种重复的工作，只需要在一个地方添加判断即可。Axios提供了两种拦截器：请求拦截器和响应拦截器。请求拦截器会在请求发送前执行，而响应拦截器会在响应返回后执行。对于登录拦截，我们可以使用请求拦截器来实现。下面是一个使用Axios请求拦截器来实现登录拦截的详细步骤：1. 导入Axios首先，需要导入Axios模块，可以使用以下代码进行导入：import axios from 'axios';2. 添加请求拦截器然后，我们需要使用Axios的interceptors对象添加请求拦截器。可以使用以下代码：axios.interceptors.request.use( (config) => { // 在这里添加登录拦截逻辑 return config; }, (error) => { return Promise.reject(error); } );在上面的代码中，我们使用axios.interceptors.request.use方法来添加请求拦截器。该方法接收两个参数，第一个参数是一个函数，用于处理请求配置(config)。在这个函数中，我们可以添加登录拦截逻辑。如果用户已登录，则可以在请求头中添加令牌等信息。否则，我们可以在这里跳转到登录页面或者提示用户需要先登录才能访问该页面。最后，该函数需要返回请求配置(config)对象。3. 处理请求错误在添加请求拦截器的第二个参数中，我们还可以添加一个函数来处理请求错误。例如，如果在请求发送前发生了错误，我们可以在这个函数中处理这个错误，然后返回一个rejected状态的Promise。4.超时拦截在开发中，我们经常会遇到网络不稳定或者服务端响应慢的情况，这时候我们可以使用 Axios 提供的超时拦截功能，避免长时间等待而导致的页面卡死或者用户体验不佳的问题。5. 代码示例以下是一个完整的代码示例，其中包括了检查用户是否已登录、验证令牌是否过期、请求超时拦截等登录拦截的完整逻辑：import axios from 'axios' const instance = axios.create({ baseURL: 'https://example.com', timeout: 5000 // 设置请求超时时间 }); instance.interceptors.request.use( (config) => { // 检查用户是否已登录 const token = localStorage.getItem('token') if (token) { // 验证令牌是否过期 const decodedToken = JSON decodedToken = JSON.parse(atob(token.split('.')[1])) if (decodedToken.exp > Date.now() / 1000) { // 如果令牌未过期，则将令牌添加到请求头中 config.headers.Authorization = Bearer ${ token }; } else { // 如果令牌已过期，则提示用户需要重新登录 window.alert('登录已过期，请重新登录！') window.location.href = '/login' } } else { // 如果用户未登录，则重定向到登录页面 window.location.href = '/login' } return config }, (error) => { // 请求响应发生错误时，进行拦截处理 if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) { // 如果请求超时，则中止该请求并显示一个错误消息 console.log('请求超时，请重试！'); } return Promise.reject(error) } ) export default axios在上面的代码中，我们首先在Axios中添加了请求拦截器。在请求拦截器的函数中，我们首先从本地存储中获取用户的访问令牌(token)，…

nuxt3目录结构详解
type: item
date: 2023-05-01T22:33:00+08:00
description: nuxt3目录结构详解在 Nuxt.js 3 中，一个应用程序的文件夹结构具有一定的规范性。以下是 Nuxt.js 3 的文件夹结构及其用途的详细解释：.nuxt 目录Nuxt 使用.nuxt/目录在开发中生成您的Vue应用程序。你不应该碰里面的任何文件，因为整个目录将在运行nuxt dev时重新创建。.output 目录Nuxt在为生产构建应用程序时创建.output目录。你不应该碰里面的任何文件，因为整个目录将在运行nuxt build时重新创建。使用此目录将Nuxt应用程序部署到生产环境。assets 目录assets/ 目录用于添加构建工具(webpack或Vite)将处理的所有网站资产。该目录通常包含以下类型的文件:Stylesheets (CSS, SASS, etc.)FontsImages 它不会从public/目录中提供。如果你想从服务器上提供资产，我们建议看一下public/目录Components 目录components/目录是您放置所有Vue组件的地方，然后可以在您的页面或其他组件中导入这些组件(了解更多)Nuxt自动导入你的components目录中的任何组件(以及你可能正在使用的任何模块注册的组件)。| components/ --| TheHeader.vue --| TheFooter.vuelayouts/default.vue <TheHeader /> <slot /> <TheFooter /> Custom directories默认情况下，只扫描~/components目录。如果要添加其他目录，或更改在该目录的子文件夹中扫描组件的方式，可以向配置中添加其他目录：nuxt.config.ts export default defineNuxtConfig({ components: [ { path: '~/components/special-components', prefix: 'Special' }, '~/components' ] })Any nested directories need to be added first as they are scanned in order.任何嵌套的目录都需要在按顺序扫描时先添加。Component extensions默认情况下，在nuxt.config.ts的扩展键中指定了扩展名的任何文件都被视为组件。如果需要限制应注册为组件的文件扩展名，可以使用组件目录声明的扩展形式及其扩展键：export default defineNuxtModule({ components: [ { path: '~/components', + extensions: ['.vue'], } ] })Component Names如果你在嵌套目录中有一个组件，例如:| components/ --| base/ ----| foo/ ------| Button.vue然后组件的名称将基于它自己的路径、目录和文件名，删除重复的段。因此，组件的名称将是:<BaseFooButton />为了清晰起见，我们建议组件的文件名与其名称相匹配。(所以，在上面的例子中，你可以将Button.vue重命名为BaseFooButton.vue)如果你想只根据组件的名称而不是路径自动导入组件，那么你需要使用配置对象的扩展形式将pathPrefix选项设置为false:nuxt.config.ts export default defineNuxtConfig({ components: [ { path: '~/components/', + pathPrefix: false, }, ], }); 这将使用与在Nuxt 2中使用的相同策略注册组件。例如，~/components/Some/MyComponent.vue将可用为<MyComponent> 而不是<SomeMyComponent>。Dynamic Components如果你想使用Vue <component :is="someComputedComponent">语法，那么你将需要使用Vue提供的resolveComponent辅助方法。例如: <component :is="clickable ? MyButton : 'div'" /> 如果你正在使用resolveComponent来处理动态组件，请确保除了组件名称之外不插入任何内容，组件名称必须是字符串而不是变量。或者，尽管不推荐，您可以全局注册所有组件，这将为所有组件创建异步块，并使它们在整个应用程序中可用。export default defineNuxtConfig({ components: { + global: true, +…

nuxt3中文官网nuxt3是一个基于Vue.js的静态站点生成器和应用程序框架
type: item
date: 2023-05-01T21:19:00+08:00
description: nuxt3官网nuxt3官网网址：https://nuxt.com/nuxt3中文网址：https://nuxt.com.cn/Nuxt3是一个基于Vue.js的静态站点生成器和应用程序框架。它是Nuxt.js的下一代版本，旨在提供更快的渲染速度、更好的可扩展性和更好的开发者体验。下面是一些Nuxt3的详细特点：更快的启动和渲染速度：Nuxt3使用了Vite作为默认构建工具，这使得它可以更快地启动和热更新，并且具有更快的渲染速度。新的API设计：Nuxt3采用了新的API设计，使得开发者可以更轻松地使用和扩展Nuxt3的功能。插件系统：Nuxt3的插件系统使得开发者可以更容易地添加自定义功能和第三方库。支持多种编程语言：Nuxt3可以使用多种编程语言编写应用程序，包括JavaScript、TypeScript、CoffeeScript等。内置HTTP服务器：Nuxt3内置了HTTP服务器，可以轻松地在本地进行开发和调试。静态站点生成器：Nuxt3可以生成静态站点，可以轻松地将应用程序部署到CDN或静态文件服务器上。预渲染和动态渲染：Nuxt3支持预渲染和动态渲染，可以根据需要进行灵活的渲染。总之，Nuxt3是一个非常有前途的项目，它可以帮助开发者更快地构建高效、可扩展的Vue.js应用程序和静态站点。

axios封装token示例
type: item
date: 2023-05-01T02:49:00+08:00
description: axios封装token示例在使用 Axios 发送请求时，可以通过添加 Authorization 头部信息传递 Token。为了方便地在多个请求中使用 Token，可以封装一个 Axios 实例，并在其中添加 Token。下面是一个简单的封装 Axios 实例并添加 Token 的例子：import axios from 'axios'; const instance = axios.create({ baseURL: 'https://api.example.com/', }); // 添加请求拦截器 instance.interceptors.request.use( config => { // 在请求中添加 Token const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { // 请求错误时的处理 console.log(error); return Promise.reject(error); } ); export default instance;在上面的例子中，首先使用 axios.create 创建了一个 Axios 实例，并设置了默认的 base URL。然后，通过 instance.interceptors.request.use 方法添加了请求拦截器。在请求拦截器中，判断是否存在 Token，并将 Token 添加到请求的 Authorization 头部中。最后，通过 export default instance 导出封装好的 Axios 实例，以供其他模块使用。在其他模块中，可以像使用原始的 Axios 一样使用该实例，不必在每个请求中都手动添加 Token。例如：import axios from './axios'; axios.get('/api/data').then(response => { console.log(response.data); }).catch(error => { console.log(error); });除了添加 Token，我们还可以对 Axios 进行更进一步的封装，使其在多个请求中具有相同的行为。以下是一个较为完整的 Axios 封装例子，它实现了以下功能：添加了一个请求拦截器，在请求中添加 Token 和其他公共参数；添加了一个响应拦截器，在响应中统一处理错误；对于 HTTP 状态码非 200 的响应，会将错误信息以 Promise.reject 的形式返回，便于在调用处处理错误；对于 401 错误（未授权），会自动跳转到登录页面。import axios from 'axios'; import router from './router'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, timeout: 10000, withCredentials: true, }); // 添加请求拦截器 instance.interceptors.request.use( config => { // 在请求中添加 Token 和其他公共参数 const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } config.params = { ...config.params, app_id: process.env.VUE_APP_APP_ID, }; return config; }, error => { console.log(error); return Promise.reject(error); } ); // 添加响应拦截器 instance.interceptors.response.use( response => { // 对于 HTTP 状态码非 200 的响应，将错误信息以 Promise.reject 的形式返回 if (response.status !== 200) { return Promise.reject(response.data); } return response.data; }, error => { // 对于 401 错误，自动跳转到登录页面 if (error.response && error.response.status …

axios封装示例
type: item
date: 2023-05-01T02:47:00+08:00
description: axios封装示例Axios是一个基于Promise的HTTP客户端库，可以用于在浏览器和Node.js中发送HTTP请求。为了方便使用，我们可以对Axios进行封装，将常用的配置项和请求方法封装起来，使其更易于使用。以下是一个简单的Axios封装示例：import axios from 'axios'; // 创建一个Axios实例 const instance = axios.create({ baseURL: 'http://api.example.com', timeout: 5000, headers: { 'Content-Type': 'application/json' } }); // 请求拦截器 instance.interceptors.request.use(config => { // 在发送请求之前做些什么 // 可以在此处添加token等认证信息 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); }); // 响应拦截器 instance.interceptors.response.use(response => { // 对响应数据做些什么 return response.data; }, error => { // 对响应错误做些什么 return Promise.reject(error); }); // 封装GET请求 export function get(url, params = {}) { return instance.get(url, { params }); } // 封装POST请求 export function post(url, data = {}) { return instance.post(url, data); } // 封装PUT请求 export function put(url, data = {}) { return instance.put(url, data); } // 封装DELETE请求 export function del(url) { return instance.delete(url); } 以上示例中，我们首先创建了一个Axios实例，并对其进行了一些默认配置。然后，我们对请求和响应进行了拦截处理，以便添加或处理一些公共的请求或响应信息，如添加token等认证信息或统一处理错误信息。最后，我们封装了常用的GET、POST、PUT和DELETE请求，并将其导出，以便在项目中使用。在封装请求方法时，我们可以根据实际需求添加请求参数和配置项，以满足不同的请求场景。相关文章[post cid="789" cover="" size="small"/][post cid="790" cover="" size="small"/][post cid="792" cover="" size="small"/]