axios的介绍及配置多个服务器url

文章目录

  • 1、常用的默认配置的是:baseURL、method、timeout
  • 2、axios配置多个服务器url
  • 3、配置api文件
  • 4、文件中使用

1、常用的默认配置的是:baseURL、method、timeout

① baseURL:设置url的基本结构(请求根地址),域名和协议,再结合属性url某个请求路径,axios会自动将baseURL 和 url 进行拼接,从而得出正确的请求路径。

② method:请求方式 get/post

③ timeout:延时时间(超过多少时间就取消请求)【单位是毫秒】

2、axios配置多个服务器url

// 请求时的基础配置VITE_APP_BASE_URL
export const URLMap = {base: import.meta.env.MODE === 'development'? import.meta.env.VITE_APP_BASE_URL: (window as any).config.VITE_APP_BASE_URL,pdf:import.meta.env.MODE === 'development'? import.meta.env.VITE_APP_BASE_URL_PDF: (window as any).config.VITE_APP_BASE_URL_PDF,
}const REQUESTS : Record<string, AxiosInstance> = {}declare module 'axios' {interface AxiosResponse<T = any> {errorinfo: nulldoc: anytime: anyx: anyy: any}export function create(config?: AxiosRequestConfig): AxiosInstance
}Object.keys(URLMap).forEach((item) => {const REQUEST: AxiosInstance = axios.create({baseURL: URLMap[item],headers: {'Content-Type': 'application/json;charset=UTF-8',},timeout: 300000,withCredentials: item === 'data',})REQUESTS[item] = REQUEST
})// 请求拦截器
Object.keys(REQUESTS).forEach((item) => {REQUESTS[item].interceptors.request.use(async (config: AxiosRequestConfig) => {const headerToken = await getToken()config.headers = config.headers || {}if (headerToken)config.headers.Authorization = headerTokenif (config.headers.type === 'form') {delete config.headers.typeconfig.data = qs.stringify(config.data)config.headers['Content-Type'] = 'application/x-www-form-urlencoded'}return config})
})// 响应拦截器
Object.keys(REQUESTS).forEach((item) => {REQUESTS[item].interceptors.response.use(async (response: AxiosResponse) => {const { status, data = {}, statusText } = responseconst errorText = serverCodeMessage[status] || statusTextconst error = ''if (status)return Promise.resolve(data)message.error(error)return Promise.reject(error)},(error) => {message.error(String(new Error(error)))return Promise.reject(new Error(error))},)
})export default REQUESTS

3、配置api文件

import requests from '@/service/index'export const getAll = (data: paramsInter) => requests.base({url: 'xx/xx',method: 'POST',data,
})
export const get = (data: paramsInter) => requests.pdf({url: 'xx/xx',method: 'POST',data,
})

这样,不同的接口实现从不同的服务器获取资源

4、文件中使用

import { getAll} from '@/service/xx/index'
onMounted(() => {getXX()
})function getXX() {getAll(params).then((res) => {// xxx
}

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

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

相关文章

解决vuex刷新数据丢失

Vuex 是一个 Vue.js 的状态管理库&#xff0c;它使得你可以在 Vue 组件之间共享状态。当你在 Vuex 中更新状态时&#xff0c;如果你遇到数据丢失或数据不一致的问题&#xff0c;可能需要进行深度复制或者使用其他方式来确保数据的完整性。 假设你有一个 Vuex 存储&#xff0c;…

昇腾CANN 7.0 黑科技:DVPP硬件加速训练数据预处理,友好解决Host CPU预处理瓶颈

在NPU/GPU上进行模型训练计算&#xff0c;为了充分使用计算资源&#xff0c;一般采用批量数据处理方式&#xff0c;因此一般情况下为提升整体吞吐率&#xff0c;batch值会设置的比较大&#xff0c;常见的batch数为256/512&#xff0c;这样一来&#xff0c;对数据预处理处理速度…

Harbor私有仓库

Harbor私有仓库 文章目录 Harbor私有仓库Harbor简介&#xff1a;Harbor 提供了以下主要功能和特性&#xff1a;优缺点&#xff1a;环境说明&#xff1a;部署harbor1.永久关闭防火墙和seliux&#xff0c;配置阿里云源&#xff0c;添加映射关系2.安装docker&#xff0c;开启docke…

手动修复 rabbitmq 报错 “Crash dump is being written to“

rabbitmq 报错: 2023-11-07 16:38:52.682 [error] emulator Error in process <0.368.0> on node rabbitrabbitmq-0.rabbitmq-discovery.openstack.svc.cluster.local with exit value: {shutdown,[{mnesia_loader,handle_exit,2,[{file,"mnesia_loader.erl"}…

spdk用户态块层详解

先通过回顾内核态的通用块层来详细介绍SPDK通用块层&#xff0c;包括通用块层的架构、核心数据结构、数据流方面的考量等。最后描述基于通用块层之上的两个特性&#xff1a;一是逻辑卷的支持&#xff0c;基于通用块设备的Blobstore和各种逻辑卷的特性&#xff0c;精简配置&…

linux安装jdk和weblogic易错点

1.版本问题&#xff0c;如果版本不兼容&#xff0c;安装的时候会报错&#xff0c;所有安装之前要确认好版本 jdk1.6&#xff0c;weblogic10 2.jdk安装后配置文件 JAVA_HOME ,CLASSPATH,PATH&#xff0c;配置问你的追加&#xff0c;用冒号链接 修改后需要用source 刷新下 3安装…

MCU常见通信总线串讲(四)—— SPI总线协议

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言一…

PyCharm 无法登陆 Codeium 的解决方法

PyCharm 登陆 Codeium PyCharm 无法登陆 Codeium 的问题描述PyCharm 使用 token 登陆 Codeium PyCharm 无法登陆 Codeium 的问题描述 使用 PyCharm 登录 Codeium 时&#xff0c;单击 Login 无反应&#xff0c;单击侧边栏的 Codeium 图标也一直显示连接失败。 PyCharm 使用 to…

pandas教程:Interacting with Web APIs API和数据库的交互

文章目录 6.3 Interacting with Web APIs (网络相关的API交互)6.4 Interacting with Databases(与数据库的交互) 6.3 Interacting with Web APIs (网络相关的API交互) 很多网站都有公开的API&#xff0c;通过JSON等格式提供数据流。有很多方法可以访问这些API&#xff0c;这里…

【Unity细节】Json序列化时出现:An item with the same key has already been added. Key:

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 秩沅 原创 &#x1f636;‍&#x1f32b;️收录于专栏&#xff1a;unity细节和bug &#x1f636;‍&#x1f32b;️优质专栏 ⭐【…

机器学习——CBOW负采样(纯理解)

刚从前一个坑里&#xff0c;勉强爬出来&#xff0c;又掘开另一坑 看了很多文章B站up主。。。糊里糊涂 但是我发觉&#xff0c;对于不理解的东西&#xff0c;要多看不同up主写的知识分享 书读百遍&#xff0c;其意自现&#xff0c;我是不相信的&#xff0c;容易钻牛角尖 但是&am…

前端-选中DOM定位源代码

用到的工具&#xff1a;react-dev-inspector 使用流程 根据react-dev-inspector文档进行配置 安装 yarn add --dev react-dev-inspector配置&#xff1a;在根目录下配置Inspector import { createRoot } from react-dom/client import { Inspector } from react-dev-inspe…

draw.io与项目管理——如何利用流程图工具提高项目管理效率

draw.io 是一款强大的图形绘制工具&#xff0c;用于创建各种类型的图表、流程图、组织结构图、网络图和平面设计等。它提供了丰富的绘图工具和预定义的图形库&#xff0c;使用户能够轻松创建专业水平的图形作品。 draw.io具有直观的界面和简单易用的功能&#xff0c;适合各种用…

一个拖拽内容到Word的例子

这是一个拖拽内容到Word中的例子。如视频所示&#xff1a; 从程序中的Tree这拖内容到Word中。然后 在拖拽完成后事件中&#xff0c;记录日志。 拖拽 代码如下&#xff1a; typeTForm1 class(TForm)Panel1: TPanel;TreeView1: TTreeView;GroupBox1: TGroupBox;Memo1: TMemo;D…

Webpack 的作用和工作原理是什么?

Webpack 是一个现代的静态模块打包工具&#xff0c;它的作用是将前端应用程序的各种资源&#xff08;如 JavaScript、CSS、图片等&#xff09;视为模块&#xff0c;并将它们打包成可以在浏览器中运行的静态文件。它的主要功能包括模块打包、资源优化、代码分割、加载器转换等。…

oracle_19c 安装

oracle安装部署 1、安装docker,docker-compose环境。 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun curl -L "https://github.com/docker/compose/releases/download/1.14.0-rc2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/b…

云计算的大模型之争,亚马逊云科技落后了?

文丨智能相对论 作者丨沈浪 “OpenAI使用了Azure的智能云服务”——在过去的半年&#xff0c;这几乎成为了微软智能云最好的广告词。 正所谓“水涨船高”&#xff0c;凭借OpenAI旗下的ChatGPT在全球范围内爆发&#xff0c;微软趁势拉了一波自家的云计算业务。2023年二季度&a…

linux 安装 Anaconda3

文章目录 一、下载二、安装1.使用xftp把下载包拉到服务器上2.执行安装命令3、在安装时没有自动添加环境变量&#xff0c;这里手动设置3.1.1通过修改~/.bashrc来配置环境变量3.1.2 重新载入配置文件3.1.3 测试 一、下载 官网下载链接 二、安装 1.使用xftp把下载包拉到服务器上…

从零开始搭建微服务(二)

忘记了软件还没有装全,今天先把所有的软件装上,nacos已经装过了我们就不在装了,剩余的软件全部都是通过docker安装,我在centos7里面 1. 安装docker 安装dockeryum -y install docker开机自启 systemctl enable docker启动dockre systemctl start docker查看docker版本 doc…

css控制卡片内部的左右布局

先放效果图 纯css样式 可以根据需求进行更改 <template> <!-- 卡片盒子 --><div class"card_box "><el-card class"box-card w400" v-for"(item,index) in cardList" :key"index"><div slot"heade…