简单封装axios

目录

  • 一、代码解读
  • 二、整体代码

一、代码解读

import axios from ‘axios’;

创建一个名为 instance 的 Axios 实例,配置默认的请求地址和超时时间

const instance = axios.create({baseURL: 'http://localhost:8085',timeout: 5000,
});

请求拦截器,用于在请求发送前进行处理,比如在请求头中添加 token ,在请求发送之前,如果有需要,可以在请求头中加入认证信息

instance.interceptors.request.use((config) => {// config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;},(error) => {return Promise.reject(error);}
);

响应拦截器,用于统一处理后端返回的错误信息

instance.interceptors.response.use((response) => {// 对后端返回的数据进行统一处理const data = response.data;// 如果返回的状态码不是 200,则输出错误信息到控制台if (data.code !== 200) {console.error(`Error: ${data.message}`);}return data;},(error) => {// 处理响应错误,输出错误信息到控制台console.error('Response Error:', error);return Promise.reject(error);}
);

封装 GET 请求方法,支持传入请求地址和参数

function get(url, params = {}) {return instance.get(url, { params });
}

封装 POST 请求方法,支持传入请求地址和数据

function post(url, data = {}) {return instance.post(url, data);
}

封装上传文件的方法,支持传入请求地址和文件

function uploadFile(url, file) {// 创建一个 FormData 对象,用于上传文件const formData = new FormData();formData.append('file', file);// 使用 POST 方法上传文件,并设置请求头的 Content-Type 为 multipart/form-datareturn instance.post(url, formData, {headers: {'Content-Type': 'multipart/form-data',},});
}

导出封装好的 GET、POST 和上传文件的方法

export { get, post, uploadFile };

二、整体代码

import axios from 'axios';const instance = axios.create({baseURL: 'http://localhost:8085',timeout: 5000,
});instance.interceptors.request.use((config) => {// config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;},(error) => {return Promise.reject(error);}
);instance.interceptors.response.use((response) => {const data = response.data;if (data.code !== 200) {console.error(`Error: ${data.message}`);}return data;},(error) => {console.error('Response Error:', error);return Promise.reject(error);}
);function get(url, params = {}) {return instance.get(url, { params });
}function post(url, data = {}) {return instance.post(url, data);
}function uploadFile(url, file) {const formData = new FormData();formData.append('file', file);return instance.post(url, formData, {headers: {'Content-Type': 'multipart/form-data',},});
}export { get, post, uploadFile };

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/700902.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

camunda源代码编译运行(一):下载编译camunda源代码

使用camunda开源工作流引擎有多种方式,包括:通过docker运行、使用springboot集成、部署camunda发行包、基于源代码编译运行等多种方式,其中,通过源代码编译集成整合方式,是最复杂的一种方式,文本重点介绍如…

ES坑-创建索引使用_下划线-黑马旅游搜不到

学ES的时候,星级过滤无效 找不到数据。 需要 但是我们在创建的时候使用的是keyword 通过研究发现,我们导入数据的时候应该默认的为starName 我get库时候发现有2个字段 所以通过star_name搜索因为都是空数据搜不到,而starName类型为text所以…

第二十五章 : Springboot使用velocity模板引擎

第二十五章 : Springboot使用velocity模板引擎 前言 本章知识点: Velocity 是什么、Velocity引擎是如何进行模板加载、适用场景有哪些、资源加载器的类型、以及Velocity 在代码生成场景中的应用。 Springboot 版本 2.3.2.RELEASE ,xxl-job-core 2.4.0Velocity 是什么? V…

绘图机器(C 语言)

题目来自于博主算法大师的专栏:最新华为OD机试C卷AB卷OJ(CJavaJSPy) https://blog.csdn.net/banxia_frontend/category_12225173.html 题目 绘图机器的绘图笔初始位置在原点(0,0) 机器启动后按照以下规则来进行绘制直线 尝试沿着横线坐标正…

专注力训练游戏-第15届蓝桥第4次STEMA测评Scratch真题精选

[导读]:超平老师的《Scratch蓝桥杯真题解析100讲》已经全部完成,后续会不定期解读蓝桥杯真题,这是Scratch蓝桥杯真题解析第171讲。 第15届蓝桥杯第4次STEMA测评已于2024年1月28日落下帷幕,编程题一共有6题,分别如下&a…

fpga_硬件加速引擎

一 什么是硬件加速引擎 硬件加速引擎,也称硬件加速器,是一种采用专用加速芯片/模块替代cpu完成复杂耗时的大算力操作,其过程不需要或者仅需要少量cpu参与。 二 典型的硬件加速引擎 典型的硬件加速引擎有GPU,DSP,ISP&a…

【C++】类和对象之拷贝构造函数篇

个人主页 : zxctscl 文章封面来自:艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. 传值传参和传引用传参3. 概念4. 特征 1. 前言 在前面学习了6个默认成员函数中的构造函数和析构函数 【C】构造函数和析构函数详解,接下来继续往后看拷…

Sora领航AIGC时代:深度解读行业变革与AI工具全景图

随着人工智能技术的飞速发展,越来越多的企业和行业开始将AI融入其核心业务流程中。在这个背景下,Sora以其独特的视角和全面的解决方案,正引领着AIGC(人工智能生成内容)的趋势变革。 本文将对Sora进行深度解读&#xf…

「优选算法刷题」:斐波那契数(两种解法)

一、题目 斐波那契数 (通常用 F(n) 表示)形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和。也就是: F(0) 0,F(1) 1 F(n) F(n - 1) F(n - 2),其中 n > …

web通用脚手架2

web通用脚手架2 这个模板的基本架构和1是一样的,唯一的一点区别就是在设计上进行了优化。 因为在一盘的场景下,配置文件其实并不好读取,不如结构体要好读,于是这里进行的优化就是,将配置文件里面的配置项全部改成用结…

Vue3(pinia) 整合 SpringWebsocket链接url动态传参

前言: 👏作者简介:我是笑霸final,一名热爱技术的在校学生。 📝个人主页:个人主页1 || 笑霸final的主页2 📕系列专栏:java专栏 📧如果文章知识点有错误的地方,…

Nest.js权限管理系统开发(二)连接MySQL、Redis

安装MySQL及相关依赖 下载dmg文件安装 前往MySQL :: Download MySQL Community Server下载最新版本的MySQL。 打开系统设置,拉到最下方可以看到MySQL,打开看到两个绿点表示安装成功,也可以在这里修改MySQL密码。 配置环境变量 打开终端配…

MTU值怎么协商?

MTU值的协商通常涉及到网络设备之间的通信能力,特别是在TCP/IP网络中。以下是MTU值协商的一些关键点: MTU定义:最大传输单元(MTU)是指网络能够传输的最大数据包大小,以字节为单位。TCP MSS:在T…

c#如何判断一个类型是否为数值类型,请给出通用方法

在C#中,可以使用以下代码来判断一个类型是否为数值类型: public static bool IsNumericType(Type type) {if (type typeof(byte) ||type typeof(sbyte) ||type typeof(short) ||type typeof(ushort) ||type typeof(int) ||type typeof(uint) ||ty…

三十、项目实战:实时人脸检测

OpenCV3.3之后的版本都支持了深度学习框架,具体的模型相关路径如下图所示 一、相关文件下载 前期准备工作: 下载两个文件:下载链接 最好放到跟项目一块,到时候方便调用 二、代码 yy_main.cpp pbtxt_path和pb_path为下载的那…

Java 学习和实践笔记(20):static的含义和使用

static的本义是静止的。在计算机里就表示静态变量。 在Java中,从内存分析图上可以看到,它与类、常量池放在一个区里: 从图可以看到,普通的方法和对象属性,都在heep里,而static则在方法区里。 static声明的…

[晓理紫]每日论文分享(有中文摘要,源码或项目地址)--大模型、扩散模型

专属领域论文订阅 VX 关注{晓理紫},每日更新论文,如感兴趣,请转发给有需要的同学,谢谢支持 如果你感觉对你有所帮助,请关注我,每日准时为你推送最新论文。 分类: 大语言模型LLM视觉模型VLM扩散模型视觉语言…

API接口开发采集淘宝商品详情页数据优惠券sku价格销量信息等可支持高并发接入演示

要知道,要开发一个API接口用于采集淘宝商品详情页数据(如优惠券、SKU、价格、销量信息等),并支持高并发接入,你需要考虑以下几个步骤: 需求分析: 确定你需要从淘宝商品详情页采集哪些具体信息。 遵守法律法…

STL - 并查集

1、并查集原理 在一些应用问题中,需要将n个不同的元素划分成一些不相交的集合;开始时,每个元素自成一个 单元素集合,然后按一定的规律将归于同一组元素的集合合并;在此过程中要反复用到查询某一 个元素归属于那个集合的…

Ps:明度直方图

明度 Luminosity直方图显示了图像中各个亮度级别的像素分布情况。 与 RGB 直方图不同,“明度”直方图专注于图像的亮度信息,而不是单独的颜色信息。 在“直方图”面板的通道中选择“明度”。 “明度”直方图提供了一种量化的方式来理解图像的整体明暗结构…