当前位置: 首页 > news >正文

vue3封装Axios库的 API 请求并使用拦截器来处理请求和响应

目录

为什么添加封装该部分?

具体代码:

对代码的解释:

如何使用?


为什么添加封装该部分?

  • 简化发送 HTTP 请求的流程
  • 提供统一的错误处理机制
  • 支持用户状态管理和鉴权
  • 具备良好的扩展性和灵活性
  • 提高开发效率并使得代码更加整洁和易于维护

具体代码:

import axios from 'axios'
import { ElMessage } from 'element-plus'// 从存储的用户模块中导入useUserStore钩子函数。
import useUserStore from '@/store/modules/user'// 使用axios库创建一个名为api的实例,用于发送HTTP请求
const api = axios.create({baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY === 'true') ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,timeout: 1000 * 60,responseType: 'json',
})api.interceptors.request.use((request) => {const userStore = useUserStore()/*** 全局拦截请求发送前提交的参数* 以下代码为示例,在请求头里带上 token 信息*/if (userStore.isLogin && request.headers) {request.headers.Token = userStore.token}// 是否将 POST 请求参数进行字符串化处理if (request.method === 'post') {// request.data = qs.stringify(request.data, {//   arrayFormat: 'brackets',// })}return request},
)api.interceptors.response.use((response) => {/*** 全局拦截请求发送后返回的数据,如果数据有报错则在这做全局的错误提示* 假设返回数据格式为:{ status: 1, error: '', data: '' }* 规则是当 status 为 1 时表示请求成功,为 0 时表示接口需要登录或者登录状态失效,需要重新登录* 请求出错时 error 会返回错误信息*/if (response.data.status === 1) {if (response.data.error !== '') {// 这里做错误提示,如果使用了 element plus 则可以使用 Message 进行提示// ElMessage.error(options)return Promise.reject(response.data)}}else {useUserStore().logout()}return Promise.resolve(response.data)},(error) => {let message = error.messageif (message === 'Network Error') {message = '后端网络故障'}else if (message.includes('timeout')) {message = '接口请求超时'}else if (message.includes('Request failed with status code')) {message = `接口${message.substr(message.length - 3)}异常`}ElMessage({message,type: 'error',})return Promise.reject(error)},
)export default api

对代码的解释:

  1. 引入了所需的库和模块:

    • axios:用于发送 HTTP 请求。
    • ElMessage:来自 Element Plus 的消息提示组件。
  2. 导入 useUserStore 钩子函数,该函数用于从存储的用户模块中获取用户状态和 token。

  3. 创建了一个名为 api 的 axios 实例,用于发送 HTTP 请求。在创建实例时,根据环境变量设置了基本 URL 和超时时间。

  4. 使用 api.interceptors.request.use() 方法注册了一个请求拦截器,在请求发送前执行一些操作。具体如下:

    • 获取用户状态和 token,如果用户已登录且请求头存在,则将 token 添加到请求头中。
    • 对于 POST 请求,可以选择对请求参数进行字符串化处理(此部分代码被注释掉)。
  5. 使用 api.interceptors.response.use() 方法注册了一个响应拦截器,在请求返回后进行处理。具体如下:

    • 判断响应数据的状态码,如果为 1,表示请求成功;否则,视为错误。
    • 如果有错误信息,则进行全局的错误提示(示例代码中使用了 Element Plus 的 ElMessage.error() 方法)。
    • 如果状态码不为 1,调用 useUserStore().logout() 方法以注销用户。
  6. 在响应拦截器中使用 Promise.resolve() 返回处理后的数据,或使用 Promise.reject() 返回错误信息。

  7. 在响应拦截器的错误回调中进行了一些错误信息的处理和提示,包括网络错误、超时错误和请求异常错误。

  8. 最后,将 api 导出供其他模块使用。

如何使用?

要使用该代码模块,首先确保已安装 Axios 和 Element Plus。然后,可以在需要发送 API 请求的地方通过导入 api 模块来使用它,例如:

import api from '@/path/to/api'// 发送 GET 请求
api.get('/api/endpoint').then(response => {// 处理返回的数据}).catch(error => {// 处理请求错误})// 发送 POST 请求
api.post('/api/endpoint', { key: value }).then(response => {// 处理返回的数据}).catch(error => {// 处理请求错误})

根据你的具体需求,可以调用 api 实例上的不同方法(如 getpostputdelete 等)来发送不同类型的请求,并在 then 方法中处理成功的响应数据,在 catch 方法中处理请求错误

http://www.lryc.cn/news/198132.html

相关文章:

  • RK3588开发笔记(二):基于方案商提供sdk搭建引入mpp和sdk的宿主机交叉编译Qt5.12.10环境
  • rust学习——函数返回值
  • 【Cadence】配置文件cdsinit和cdsenv的使用
  • 软考 系统架构设计师系列知识点之基于架构的软件开发方法ABSD(6)
  • MATLAB常用命令大全,非常详细(持续更新中)
  • js笔试面试题5道附答案
  • 4-k8s-部署springboot项目简单实践
  • Ai数字人直播系统SaaS源码大开源,源码独立部署助力中小企业发展!
  • 新的 Work Node 如何加入 K8s 集群 - Kubeadm ?
  • laravel框架的优缺点是什么?
  • 程序员接单都在用这六大平台,你呢?
  • 2022年亚太杯APMCM数学建模大赛D题储能系统中传热翅片的结构优化求解全过程文档及程序
  • 图像处理软件Photoshop 2023 mac新增功能 ps 2023中文版
  • CSS基本讲解与使用(详解)
  • 最新AI创作系统ChatGPT源码+搭建部署教程+支持GPT4.0+支持ai绘画(Midjourney)/支持Prompt
  • Linux系统之部署SSCMS内容管理系统并实现外网访问
  • JVS-rules中的基础与复合变量:规则引擎的心脏
  • RN:指定模拟器启动
  • 【ARM Cache 系列文章 10 -- ARM Cortex-A720 Hunter 介绍】
  • 深度学习——残差网络(ResNet)
  • [java进阶]——IO流,递归实现多级文件拷贝
  • Linux创建与删除用户
  • 对传感器采样数据的低通滤波
  • Java开发树结构数据封装!
  • c++学习笔记汇总
  • [动手学深度学习]生成对抗网络GAN学习笔记
  • Kotlin中的算数运算符
  • Linux高性能服务器编程 学习笔记 第十六章 服务器调制、调试和测试
  • 第三期:云函数入门指南答案
  • 企业怎么通过数字化工具来实现数字化转型?