封装axios

如何封装一个axios,封装axios有哪些好处 阅读详情
import axios from 'axios';
import vMessage from '@/components/messageTips';
import qs from 'qs';
import router from '@/router';

const service = axios.create({
  // 请求超时时间
  // timeout: 3000
});
// 解决跨域时的OPTION请求
service.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

// 请求拦截器
service.interceptors.request.use(
  async config => {
    return config;
  },
  err => {
    console.log(err);
  }
);
service.interceptors.response.use(
  response => {
    if (response.status === 200) {
      return response;
    } else if (response.status === 207) {// 自己项目中的特殊错误码,可忽略
      router.push({
        name: 'login',
        query: {
          redirectUrl: location.href
        }
      });
    }
  },
  err => {
     return Promise.reject(err.request);
  }
);

const asyncGet = (url, params, config, errorExt) => {
  const obj = Object.assign({
    url: `${window.projectConfig.url}/${url}`,
    method: 'get',
    params
  }, config);
  return to(service(obj), errorExt);
};
const asyncDownload = (url, params, config, errorExt) => {
  const obj = Object.assign({
    url: `${window.projectConfig.url}/${url}`,
    method: 'get',
    params,
    responseType: 'arraybuffer'
  }, config);
  return to(service(obj), errorExt);
};
const asyncPost = (url, data, config, errorExt) => {
  const obj = Object.assign({
    url: `${window.projectConfig.url}/${url}`,
    method: 'post',
    data: qs.stringify(data)
  }, config);
  return to(service(obj), errorExt);
};
const asyncPut = (url, data, config, errorExt) => {
  const obj = Object.assign({
    url: `${window.projectConfig.url}/${url}`,
    method: 'put',
    data: qs.stringify(data)
  }, config);
  return to(service(obj), errorExt);
};
const asyncDelete = (url, params, config, errorExt) => {
  const obj = Object.assign({
    url: `${window.projectConfig.url}/${url}`,
    method: 'delete',
    params
  }, config);
  return to(service(obj), errorExt);
};

const to = (promise, errorExt = '未知错误') => {
  return promise
    .then(function (data) {
      return [null, data];
    })
    .catch(function (err) {
      if (errorExt) {
        Object.assign(err, { errorExt });
      }
      vMessage.error(`${err.errorExt} [ code:${err.status} ]`);
      return [err, undefined];
    });
};

const exportObj = {
  service,
  to,
  asyncGet,
  asyncPost,
  asyncPut,
  asyncDelete,
  asyncDownload
};

export default exportObj;

使用
1、main.js中定义全局axios

import selfAxios from '@/api/axiosConfig';
Vue.prototype.$http = selfAxios;

2、配合async/await

async login () {
	const [err, res] = await this.$http.asyncGet('api/v1.0/login', params);
	if (!err && res) {
		 if (res.data.success) {
		   ...
		 } else {
		  ...
		 }
	}
}

在昇腾910B上,用kubeadm快速拉起一个双节点K8s集群(保姆级避坑指南) 本文详细介绍了在昇腾910B服务器上使用kubeadm快速搭建双节点Kubernetes集群的完整流程,包括环境准备、容器运行时配置、kubeadm初始化、节点加入与网络插件部署等关键步骤,特别针对ARM架构和昇腾芯片提供了优化配置和避坑指南。 阅读详情

相关推荐

电动汽车充电设备标准化设计方案:电气原理图

80kW一体式一机一枪充电机电气原理 主电路拓扑见图1,配置1个250A直流充电连接装置,提供4个充电模块安装位置,根据充电功率需求可选配2~4个20kW充电模块。内置直流电能表和计费控制单元,实现计量计费和充电控制功能。 图1 80kW一体式一机一枪充电机主电路拓扑 ...

santirenpc的博客 1万+

vue中axios的二次封装——vue 封装axios详细步骤

通常我们的项目会越做越大,页面也会越来越多,如果页面非常的少,直接用axios也没有什么大的影响,那页面组件多了起来,上百个接口呢,这个时候后端改了接口,多加了一个参数什么的呢?那就只有找到那个页面,进去修改,整个过程很繁琐,不易于项目的维护和迭代。这个时候如果我们统一的区管理接口,需要修改某一个接口的时候直接在api里修改对应的请求,是不是很方便呢?因为我们用的最多的还是get post请求,我们就可以针对封装。

Vivien_CC的博客 3万+

新能源知识库(68)复叠压缩式热泵蒸汽系统介绍

复叠压缩式热泵蒸汽系统通过多级压缩技术将低品位热能转化为高品位蒸汽,在汽车电镀场景中实现了高效、精准的能源利用。随着超高温工质与智能联供系统的发展,该技术将深度赋能电镀行业的高质量可持续发展。​:±1℃控温保障镀层均匀性,提升产品良率;多台复叠热泵+储热装置(如纺织厂6台热泵)复叠热泵+余热回收+智能控制(化工厂案例)​:无燃烧设计契合汽车行业ESG目标。单台高温热泵机组(如92P型号)复叠压缩式热泵蒸汽系统以。67.4万元(↓22%)600万–1200万元。事故率 ↓90%​​。150万–600万元。

竹君子之家 1420

Vue中axios的封装

axios的封装 安装 npm install axios; //命令行安装axios 引入 首先,新建一个js文件用于引入axios。比如说,新建一个http.js文件,在文件中引入步骤如下所示: import axios from ‘axios’; //引入axios import QS from ‘qs’;//引入qs模块,为post型数据提供序列化(非常重要) import { Toast } from ‘vant’; 设置请求超时 axios.defaults.timeout = 10000:

qq_43542239的博客 1万+

Gephi实战指南——从数据导入到可视化输出

本文详细介绍了Gephi数据可视化工具的使用方法,从数据导入到可视化输出的全流程实战指南。涵盖Gephi三大工作区功能、数据导入技巧、图形编辑进阶操作以及专业级可视化输出方案,帮助用户高效完成社交网络分析等复杂任务。

weixin_28731223的博客 481

5.44GHz超高精度!STM32G474的HRTIM时钟配置避坑指南

本文深入解析STM32G474内置高分辨率定时器的时钟配置要点,帮助工程师避开常见陷阱。文章详细阐述了从系统时钟到5.44GHz等效时基的路径,重点分析了预分频器乘法器、周期计算溢出、影子寄存器同步等关键配置,并结合实测波形对比,确保HRTIM在电机控制、数字电源等精密应用中发挥极限性能。

book8的博客 523

什么是axios?怎么使用axios封装Ajax?

Axios 是一个基于 Promise 的 HTTP 客户端,它可以在浏览器和 Node.js 环境中使用。Axios 提供了简单易用的 API,用于执行各种 HTTP 请求操作,如 GET、POST、PUT、DELETE 等。基于 Promise:Axios 的 API 设计完全基于 Promise,这使得它能够很好地与 async/await 语法结合使用,从而简化了异步操作的处理。请求和响应的拦截器:Axios 支持请求和响应的拦截器,允许你在请求发送前或响应接收后对其进行处理。

上官花雨滴博客!!! 2171

【毕设课设】基于YOLO v3与LSTM的水位智能识别系统(附完整源码+数据集)

本文详细介绍了基于YOLO v3与LSTM的水位智能识别系统的完整实现方案。该系统通过YOLO v3精准定位水位尺数字,结合LSTM-OCR进行序列识别,并融合霍夫变换检测刻度线,实现高精度水位自动读取。项目提供了从环境搭建、模型训练到集成部署的全流程指南,并附有完整源码和数据集,是理想的毕设课设实战项目。

php55的博客 609

Axios二次封装

为什么要二次封装axios,如何二次封装axios。

2202_75922690的博客 1772

2026年7月19日 从可插拔到共封装:技术路线研究报告

AI 算力的爆发正在重写数据中心光互连的技术路线。本报告对当前并存的四代光互连架构——

weixin_51184047的博客 587

从 Open SQL JOIN 走向 ABAP CDS Association:把查询写成可复用的数据模型

摘要: 本文通过飞行模型示例,对比了ABAP中三种表关联实现方式:Open SQL JOIN、CDS显式JOIN和CDS Association。重点解析了Association的本质是将表关系声明为数据模型语言,使用时通过路径表达式按需展开为JOIN。文章指出路径表达式在不同位置会默认展开为不同JOIN类型(如SELECT列表默认为LEFT OUTER),并演示了如何用[inner]强制指定INNER JOIN。最后结合S/4HANA实际案例,说明Association通过中心化关系定义和路径复用,能有效

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 384

关于Axios的二次封装

Axios用的好好的为什么要进行二次封装?二次封装的好处是什么?怎么样进行二次封装?这篇文章告诉朋友们。

weixin_45103901的博客 1379

RT-DETR改进策略【注意力机制篇】| 2024 PPA 并行补丁感知注意模块,提高小目标关注度

本文记录的是利用改进检测精度,详细说明了优化原因,注意事项等。原论文在红外小目标检测任务中,小目标在多次下采样操作中容易丢失关键信息。通过替代编码器和解码器基本组件中的传统卷积操作,更好地保留小目标的重要信息。HCF-Net: Hierarchical Context Fusion Network for Infrared Small Object Detection采用多分支特征提取策略,通过不同分支提取不同尺度和层次的特征。利用局部、全局和串行卷积分支,对输入特征张量进行处理。通过控制 patch si

Limiiiing的博客 1647

axios 封装

最近一直在写Vue项目,和后台交互用的是官方推荐的axios。 Axios 是一个基于 promise 的 HTTP 库 官方教程里面有详细的使用方法,在此就不做详细描述了~ 我们如果在每个需要使用的页面都引入axios 然后写 get、post方法,代码就会变得非常的冗余,会有很多重复的代码,并且需要修改某些通用属性的时候,可能就要涉及到所有的文件。 哪些信息是可以作为公用的 一个完整项目中...

WangYangsea的博客 1400

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

我是如何封装axios的

前言 在vue中最常用的应该就是axios了,这是一个很强大的处理ajax的库。今天我就分享一下我是如何封装axios的。axios的基本api不再赘述,提前安装一下也不用我说了吧 第一步:配置axios 首先,创建一个Service.js,这里面存放的时axios的配置以及拦截器等,最后导出一个axios对象。我平常elementUI用的比较多,这里你也可以使用自己的UI库。 impor...

weixin_34192816的博客 3410

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

AXIOS的封装

1. 始vue化项目 https://www.cnblogs.com/xiaonq/p/11027880.html vue init webpack deaxios # 使用脚手架创建项目 deaxios(项目名,随便取得) cd deaxios # 进入项目 npm install axios@0.19.2 # 安装axios npm i element-ui -S # 安装element-ui到当前项目 前端项目结构规范 2.封装axios 2.1 创建 src/http

www_b的博客 526

axios的使用以及封装

axios 作为现代前端开发的核心工具,其灵活性和强大功能为 HTTP 请求处理提供了高效解决方案。通过原生使用和二次封装,开发者能够根据项目需求实现从基础到进阶的请求管理。封装后的代码不仅提升了可维护性,还通过统一配置和拦截机制增强了健壮性。接口解耦进一步优化了项目结构,使团队协作更加规范。掌握这些技巧将显著提升开发效率和代码质量,为复杂应用奠定坚实基础。

whhhhhhhhhw的博客 1182

axios使用及封装

axios跨域及封装 1、安装 npm install axios --save 2、main.js引用 import axios from 'axios'; 3、axios基本用法 function get(){ //axios.get('http://localhost:3000/post?id=1') axios({ url:'/posts', param:{ id:1 } }) .then(r

Weightlessly的博客 2583

axios、axios二次封装、api解耦

本文章主要讲解项目中axios的封装、解耦问题,这一块知识点是必须拿下的。

casually的博客 2857

axios的二次封装,

大部分情况下,请求头都是固定的,只有少部分情况下,会需要一些特殊的请求头,这里将普适性的请求头作为基础配置。当需要特殊请求头时,将特殊请求头作为参数传入,覆盖基础配置。请求,就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作,都需要写一遍。封装的同时,你需要和 后端协商好一些约定,请求头,状态码,请求超时时间.......如果每个页面都发送类似的请求,都要写一堆的配置与错误处理,就显得过于繁琐了。请求拦截器: 根据请求的请求头设定,来决定哪些请求可以访问。

JiQie_的博客 1133

Axios的使用以及封装

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

qq_73417698的博客 1993

axios封装

Axios 是一个 基于promise的 HTTP 客户端,适用于node.js和浏览器。它提供了简洁的API、自动JSON数据转换、请求/响应拦截等强大功能。完整的request代码 ,其中一些细节根据不同项目需要不同调整~const base = import.meta.env.VITE_APP_API // 接口地址timeout: 60000, // 设置超时时间// headers: { 'X-Custom-Header': 'foobar' }, // 设置请求头})//超时辅助函数。

Jet_Lover的博客 2519

axios的封装

掘金地址 一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中。他有很多优秀的特性,例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护,直接推荐我们使用axios库。如果还对axios不了解的,可以移步 axios文档。 安装 npm install axios; // 安装axios 引入 一般我会在项目的s

m0_53553562的博客 853

如何在Vue项目中封装axios

axios是一个基于的轻量级HTTP客户端,适用于浏览器和Node.js环境。创建XMLHttpRequests和HTTP请求支持 Promise API请求和响应拦截数据转换取消请求自动转换JSON数据客户端XSRF防御Vue 2.0起,官方推荐使用axios替代。

全栈若城,专注知识分享 6万+

【axios】封装axios

Axios是一个基于 promise的 HTTP`库,可以用在浏览器和node.js中。(本文围绕XHR) axios提供两个http请求适配器,XHR和HTTP。 XHR的核心是浏览器端的XMLHttpRequest对象; HTTP的核心是node的http.request方法。

余浩的博客 3496

axios的二次封装

摘要:本文展示了一个完整的Axios二次封装解决方案,包含配置管理、拦截器和错误处理等功能。通过创建axios实例,统一设置基础URL和请求头;使用请求拦截器自动添加认证token;响应拦截器处理数据格式化和错误状态码;封装常用请求方法简化调用。代码演示了GET/POST请求和错误处理场景,并提供了交互式测试功能。封装优势包括统一配置管理、集中错误处理、简化API调用等,有效提升前端开发效率和代码可维护性。

油墨香^-^的博客 4962
上一篇: overscroll-behavior的使用及局限性
下一篇: Java中实时读取yaml文件
My_Java_Life
博客等级 码龄11年 39粉丝 61原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值