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,一经查实,立即删除!

相关文章

WebSocket 心跳机制如何实现

是一种简单并且有效的策略,用于维持长链接的活跃状态,防止因为网络空闲或者不稳定因素,导致链接意外中断。通过周期性的心跳消息,确保了链接的持久性和周期性,是维持实时通信服务稳定运行的关键组件。 1. 定时发送心跳…

解决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…

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

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

第十二章:抽取式问答

本文我们将运用 Transformers 库来完成抽取式问答任务。自动问答 (Question Answering, QA) 是经典的 NLP 任务,需要模型基于给定的上下文回答问题。 根据回答方式的不同可以分为: **抽取式 (extractive) 问答:**从上下文中截取片段作为回答,类似于我们前面介绍的序列标注…

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

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

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

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

【PYTHON】力扣刷题笔记 -- 0053. 最大子数组和【中等】

题目描述:给你一个整数数组 array: nums ,请你找出一个具有最大和的连续子数组 sub-array,返回其最大和 子数组(最少包含一个元素): 是数组中的一个连续部分 示例 1: 输入:nums [-2,1,-3,4,-1…

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…

golang 如何判断当前是否是运行单元测试?

我们在go的模块化开发的时候,运行模块里面的单元测试时,当前整个模块的 init 函数都会被执行,在某些情况下我们运行独立的单元测试并不需要执行其他文件里面的init函数,这时就需要判断当前是否是在运行单元测试,判断方…

linux的常用系统维护命令

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

jEasyUI 自定义排序

jEasyUI 自定义排序 jEasyUI 是一个基于 jQuery 的框架,用于创建富交互的网页界面。它提供了一系列的组件,如布局、窗口、数据网格等,使得用户能够轻松地构建功能强大的用户界面。在数据网格(datagrid)组件中,排序功能是一个非常重要的特性,它允许用户根据列的值对数据…

k8s部署mongodb副本高可用集群

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

66.前端接口调用返回400的错误

错误代码400通常表示由于无效的请求导致服务器无法处理请求。这可能是由于以下原因之一: 1.语法错误:客户端发送的请求可能存在语法错误,例如缺少必需的参数、格式不正确等。 2.未授权:如果API需要认证,而客户端没有提…

代谢组数据分析十一:典型相关分析

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者Xiao hong书:生信学习者知hu:生信学习者CDSN:生信学习者2介绍 典型相关分析(Canonical Correlation Analysis,简称CCA)是一种统计方法,用于探索两组变量之间的线性关系。与主成分分析(PCA)不同,PCA是在同一…

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 是一个快速、简洁且…

探索WebKit的守护神:深入Web安全策略

探索WebKit的守护神:深入Web安全策略 在数字化时代,网络已成为我们生活的一部分,而网页浏览器作为我们探索网络世界的窗口,其安全性至关重要。WebKit作为众多流行浏览器的内核,例如Safari,其安全性策略是保…