axios 二次封装

axios 二次封装

基本上每一个项目开发,都必须要二次封装 axios。主要是为了减少重复性工作,不可能每一次发起新请求时,都要重新配置请求域名、请求头 Content-Type、Token 等信息。所以需要把公用的部分都封装成一个函数,每次调用的时候只需要传入变化的参数。

:::warning 注意
基于上个案例在继续做优化,如需要请查看 axios 响应拦截器。
:::

封装

src/plugins/axios.js

import axios from 'axios'
import qs from 'qs'/*** 请求拦截器*/
axios.interceptors.request.use((config) => {config.data = qs.stringify(config.data)return config
})/*** 响应拦截器*/
axios.interceptors.response.use((response) => {if (response.data.code !== 200) {alert('接口响应失败')}return response.data
})/*** 接口请求方法*/
const request = (method, option) => {return axios({method: method,url: 'https://study.noxussj.top' + option.url,data: option.data,headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
}export default {get: (option) => request('get', option),post: (option) => request('post', option),put: (option) => request('put', option)
}

调用

这样每次发起请求时,只需要把 二次封装的 axios 引入进来使用即可。可以大幅减少代码数量。

import axios from './plugins/axios.js'/*** 发起请求*/
const p1 = axios.post({url: '/api/login',data: { account: 'test', password: '123456' }
})p1.then((res) => {console.log(res.data)
})

原文链接:菜园前端

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

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

相关文章

聚观早报|OpenAI宣布推出企业版ChatGPT;苹果公司开设8家新店

【聚观365】8月30日消息 OpenAI宣布推出企业版ChatGPT 比亚迪上半年净利润109.5亿元 歌尔股份上半年净利润4.22亿元 一起教育科技Q2营收6925万元 苹果公司今年开设8家新店 OpenAI宣布推出企业版ChatGPT 据外媒报道,当地时间周一,美国人工智能研究…

Parallel Context Windows for Large Language Models

本文是LLM系列文章,针对《Parallel Context Windows for Large Language Models》的翻译。 大语言模型并行上下文窗口 摘要1 引言2 并行上下文窗口3 上下文学习的PCW4 PCW用于QA5 相关工作6 结论和未来工作不足 摘要 当应用于处理长文本时,大型语言模型…

WPF如果未定义绑定的属性,程序如何处理

问题&#xff1a;wpf中&#xff0c;<Button IsEnabled"{Binding IsValid1}"></Button>&#xff0c;如果没定义绑定的属性IsValid1&#xff0c;可以正常用吗 解答&#xff1a;在 WPF 中&#xff0c;如果没有定义绑定的属性 IsValid1&#xff0c;会导致绑…

深入理解sql:进阶版

目录 背景举例子查询和嵌套查询&#xff1a;联合查询&#xff08;UNION和UNION ALL&#xff09;&#xff1a;窗口函数&#xff1a;CTE&#xff08;公共表达式&#xff09;&#xff1a;索引优化&#xff1a;事务隔离级别和锁定&#xff1a;性能优化&#xff1a;存储过程和函数&a…

景联文科技数据标注:人体关键点标注用途及各点的位置定义

人体关键点标注是一种计算机视觉任务&#xff0c;指通过人工的方式&#xff0c;在指定位置标注上关键点&#xff0c;例如人脸特征点、人体骨骼连接点等&#xff0c;常用来训练面部识别模型以及统计模型。这些关键点可以表示图像的各个方面&#xff0c;例如角、边或特定特征。在…

FPGA | Verilog仿真VHDL文件

当VHDL模块中有Generic块时&#xff0c;应该怎么例化&#xff1f; VHDL模块代码 entity GenericExample isgeneric (DATA_WIDTH : positive : 8; -- 泛型参数&#xff1a;数据宽度ENABLE_FEATURE : boolean : true -- 泛型参数&#xff1a;是否启用特定功能);Port ( clk : …

Kotlin数据结构

数据结构基础 什么是数据结构 在计算机科学中&#xff0c;数据结构&#xff08;Data Structure&#xff09;是计算机中存储、组织数据的方式。数据结构是各种编程语言的基础。 一些使用场景 不同的数据结构适用于不同的应用场景。比如HashMap与ConcurrentHashMap&#xff0…

FFT代码上的实现细节

ω \omega ω 的计算 ω n 1 \omega_n^1 ωn1​ 的计算 考虑单位圆&#xff0c; ω n 1 \omega_n^1 ωn1​ 为&#xff1a; 也就是&#xff1a; 注&#xff1a;op为判断当前为dft还是idft ω n i \omega_n^i ωni​ 的计算 当要计算 ω n i \omega_n^i ωni​ 时&#xf…

微信小程序智慧流调微信小程序设计与实现

摘 要 自从2020年新冠疫情爆发以来&#xff0c;对全国人民的健康和全国各地区的经济发展都带来了很大的影响&#xff0c;并且新冠肺炎对各个领域带来的影响还未完全消除。近三年以来&#xff0c;全国各地区多次爆发新的疫情&#xff0c;导致许多人被隔离&#xff0c;也导致全国…

2023年高教社杯数学建模思路 - 案例:粒子群算法

文章目录 1 什么是粒子群算法&#xff1f;2 举个例子3 还是一个例子算法流程算法实现建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是粒子群算法&#xff1f; 粒子群算法&#xff08;Pa…

浅谈 Pytest+HttpRunner 如何展开接口测试!

软件测试有多种多样的方法和技术&#xff0c;可以从不同角度对它们进行分类。其中&#xff0c;根据软件生命周期&#xff0c;针对不同的测试对象与目标&#xff0c;可将测试过程分为 4 个阶段&#xff1a;单元测试、集成测试、系统测试和验收测试。本文着重介绍了如何借用 pyte…

只允许程序单实例运行

有时候&#xff0c;我们只能允许程序单实例运行&#xff0c;以免程序运行出错。可以通过使用App.PrevInstance和系统级的Mutex等多种办法来实现。 代码如下&#xff1a; 用户昵称: 留下些什么 个人简介: 一个会做软件的货代 CSDN网址&#xff1a;https://blog.csdn.net/zezes…

Kafka核心原理第一弹——更新中

架构原理 一、高性能读写架构原理——顺序写零拷贝 首先了解两个专业术语&#xff0c;研究kafka这个东西&#xff0c;你必须得搞清楚这两个概念&#xff0c;吞吐量&#xff0c;延迟。 写数据请求发送给kafka一直到他处理成功&#xff0c;你认为写请求成功&#xff0c;假设是…

OVER(PARTITION BY ***)用法,力扣mysql算法题,每日一题

力扣mysql题 题目:585. 2016年的投资 Insurance 表&#xff1a; Column NameTypepidinttiv_2015floattiv_2016floatlatfloatlonfloat pid 是这张表的主键(具有唯一值的列)。 表中的每一行都包含一条保险信息&#xff0c;其中&#xff1a; pid 是投保人的投保编号。 tiv_201…

女子垒球运动的发展·垒球1号位

女子垒球运动的发展 1. 女子垒球运动的起源和发展概述 女子垒球运动&#xff0c;诞生于19世纪末的美国&#xff0c;作为棒球运动的衍生品&#xff0c;经过百年的积淀&#xff0c;已在全球范围内广泛传播&#xff0c;形成了丰富的赛事文化。她的起源&#xff0c;可以追溯到19世…

微信小程序修改数据,input不能实时回显

场景&#xff1a; 填写发票抬头&#xff0c;填写抬头公司时候&#xff0c;会根据用户输入的内容实时获取相关的公司信息&#xff0c;用户选择搜索出来的公司&#xff0c;这时候 setData,但是数据并没有回显&#xff0c;而是需要再需要点一下屏幕。 解决方案&#xff1a; 原来…

java基础-----第三篇

系列文章目录 文章目录 系列文章目录前言一、final二、String、StringBuffer、StringBuilder前言 一、final 最终的 修饰类:表示类不可被继承 修饰方法:表示方法不可被子类覆盖,但是可以重载 修饰变量:表示变量一旦被赋值就不可以更改它的值。 (1)修饰成员变量 如果fina…

lnmp架构-mysql1

1.MySQL数据库编译 make完之后是这样的 mysql 初始化 所有这种默认不在系统环境中的路径里 就这样加 这样就可以直接调用 不用输入路径调用 2.初始化 重置密码 3.mysql主从复制 配置master 配置slave 当master 端中还没有插入数据时 在server2 上配slave 此时master 还没进…

【混合时变参数系统参数估计算法】使用范数总和正则化和期望最大化的混合时变参数系统参数估计算法(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

微软 Turing Bletchley v3视觉语言模型更新:必应搜索图片更精准

据微软新闻稿透露&#xff0c;在推出第三代Turing Bletchley视觉语言模型后&#xff0c;微软计划逐步将其整合到Bing等相关产品中&#xff0c;以提供更出色的图像搜索体验。这款模型最初于2021年11月面世&#xff0c;并在2022年秋季开始邀请用户测试。 凭借用户的反馈和建议&am…