axios二次封装(详细+跨域问题)

一,为什么要对axios进行二次封装?
答:主要是要用到请求拦截器和响应拦截器;
请求拦截器可以在发请求之前可以处理一些业务
响应拦截器当服务器数据返回以后,可以处理一些事情

二,axios的二次封装
2.1 安装axios

在当前的项目路径下安装

cnpm install --save axios
安装成功

2.2 通常情况下,项目都有一个api文件夹(axios二次封装的文件夹)
a.创建一个api文件夹
b.在api文件夹下创建request.js(用于书写axios二次封装的代码)
 

 在request.js书写axios二次封装的代码
 

//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";//1.利用axios对象的方法create,去创建一个axios实例
//2.requests就是axios,只不过稍微配置一下
const requests = axios.create({//配置对象//基础路径,发请求的时候,路径当中会出现api,不用你手写baseURL:'/api',//请求时间超过5秒timeout:5000
});//请求拦截器:在发请求之前,请求拦截器可以检测到,可以在请求发出去之前做一些事情requests.interceptors.request.use((config)=>{//config是个配置对象,对象里面有一个属性很重要,headers请求头return config;		});//响应拦截器:包含两个函数(一个是成功返回的函数,一个是失败的返回的函数)requests.intercetors.response.use((res)=>{//成功的回调函数:服务器响应数据回来以后,响应拦截器可以检测到,可以做一些事情。return res.date;	
},(erroe)=>{return promise.reject(new Error('faile'))
});
//对外暴露requests(axios的二次封装)
export default requests;

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

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

相关文章

解决VSCode无法用ssh连接远程服务器的问题

原因: 因为windows自带的ssh无法连接远程服务器,需要用git底下的ssh.exe。 搜了很久,试过很多方法,包括替换掉环境变量中的ssh,但是都无效,最后发现是要在VSCode中配置需要使用哪个ssh.exe。 步骤&#…

Java学习 - 布隆过滤器

前置需求 需求 已经有50亿个电话号码,现在给出10万个电话号码,如何快速准确地判断这些电话号码是否已经存在? 参考方案 通过数据库查询:比如MySQL,性能不行,速度太慢将数据先放进内存:50亿*8字…

【环境配置】ubuntu中 Docker的安装

前言 Docker的使用,一直没有系统的梳理和记录,刚好最近看视频又再次的全面介绍到docker。于是记录下方便后面自己的使用,毕竟安装过程中还是会存在小的不丝滑。 1 Docker的简单介绍 这里的介绍来自于大模型的问答(LLM时代的到来&a…

开启网络监控新纪元:免费可视化工具助力网络信息链路拓扑监控大屏

在数字化浪潮汹涌的今天,网络已成为我们生活、工作的不可或缺的一部分。然而,你是否曾经想过,在这个庞大的网络世界中,是谁在默默守护着每一条信息的传输,确保我们的数据安全、稳定地抵达目的地? 网络信息链…

【力扣高频题】004.两个正序数组的中位数

------------------ 长文警告 ------------------ 4.两个正序数组的中位数 给定两个大小分别为 m 和 n 的正序(从小到大)数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O ( l o g ( m n ) ) O(log(mn)) O…

工业数据分析要用FusionInsight MRS IoTDB ?

随着工业互联网逐步兴起,在加速工业自动化、智能化的同时,也进一步加速工业生产时间序列数据的产生速度。但对于工业生产中的数据分析,仍然存在重复样本多,数据膨胀率大,缺乏专业易用的平台,这些问题成为阻…

NFS文件共享服务搭建

文章目录 NFS介绍特点用途 NFS版本NFS安装0. 安装规划1. 安装NFS服务2. 启动并启用服务3. 创建共享目录4. 配置NFS共享5. 应用NFS配置6. 防火墙设置7. 验证NFS服务8. 客户端挂载9. 验证挂载10. 客户端卸载nfs挂载11. 自动挂载 参考文章 NFS介绍 NFS(Network File Sy…

linux的常用系统维护命令

1.ps显示某个时间点的程序运行情况 -a :显示所有用户的进程 -u :显示用户名和启动时间 -x :显示 没有控制终端的进程 -e :显示所有进程,包括没有控制终端的进程 -l :长格式显示 -w :宽…

k8s部署mongodb副本高可用集群

此版本的NFS为单点,仅为练习使用,生产环境建议使用cephfs的卷类型,避免单点。或者通过keepalived加Sersync的方案对NFS作容灾处理即可用于生产环境。当然,对于开发或测试环境,方便起见,直接使用单点的NFS加mongodb statefulSet方案是最为清晰简便的。 mongodb集群部署分…

Gemma 2大模型:性能更优,效率更高

当地时间6月27日,谷歌正式发布了在一个月前的I/O开发者大会上预告过的Gemma 2大模型。这款新模型相较于第一代Gemma模型,在性能和推理效率上都有了显著的提升,为AI领域带来了新的突破。 据谷歌介绍,Gemma 2模型包括9B和27B两种参…

创建github个人博客

文章目录 安装Hexo安装git安装Node.js安装 Hexo git配置SSH key配置ssh 搭建个人博客新建博客生成静态网页 本文主要参考 【保姆级】利用Github搭建自己的个人博客,看完就会 安装Hexo 参考官方文档:https://hexo.io/zh-cn/docs/ Hexo 是一个快速、简洁且…

微服务实战系列之云原生

前言 话说博主的微服务实战系列从去年走到今天,已过去了半年多了。本系列,博主主要围绕微服务实践过程中的主要组件或工具展开介绍。其中基本覆盖了我们项目或产品研发过程中,经常使用的中间件或第三方工具。至此,该系列也该朝着…

2024年河北省计划招聘“特岗计划”教师2300名

2024年河北省计划招聘“特岗计划”教师2300名 报名时间:6月28日9:00至7月2日18:00 笔试准考证打印:7月11日-7月13日 笔试时间:7月14日上午9:00-11:30 面试时间:8月3日至8月5日 报名网站:河北教师教育网 报名照规格&…

2024全新【大模型学习路径导航】从入门到精通的全面规划

引言 随着人工智能技术的迅猛发展,大模型成为了引领技术变革的关键力量。无论你是对大模型领域感兴趣的初学者,还是希望深化理解并应用大模型的开发者,这份精心策划的学习路径将为你提供从零基础到精通的全面指导。 第一阶段:基…

Pytest--安装与入门

pytest是一个能够简化成测试系统构建、方便测试规模扩展的框架,它让测试变得更具表现力和可读性–模版代码不再是必需的。只需要几分钟的时间,就可以对你的应用开始一个简单的单元测试或者复杂的功能测试。 1. 安装pytest pip install -U pytest检查版…

基于Java影院管理系统设计和实现(源码+LW+调试文档+讲解等)

💗博主介绍:✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者,博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗 🌟文末获取源码数据库🌟感兴趣的可以先收藏起来,还…

树莓派4B学习笔记14:Python多线程编程_线程间的同步通信_(锁‘threading.Lock’)

今日继续学习树莓派4B 4G:(Raspberry Pi,简称RPi或RasPi) 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1: 今日学习树莓派与Python的多进程编程_线程间同步通信 文…

axios之CancelToken取消请求

从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求 此 API 从 v0.22.0 开始已被弃用,不应在新项目中使用 官网链接 1. 背景 最近项目中遇到一个场景,当连续触发一个请求时,如果是同一个接口&#xf…

【Redis-04 补充】Redis事务

【Redis-04 补充】Redis事务 1. 事务冲突的问题1.1 举例1.2 悲观锁1.3 乐观锁1.4 Redis中的乐观锁 WATCH key [key …]1.5 Redis事务三特性 2. 秒杀案例2.1 相关代码2.2 模拟并发工具httpd-tools 3. 设计一个秒杀系统3.1 预热库存3.2 秒杀请求3.3 生成订单3.4 限流与防刷 4. 总…