vue2.0中axios请求配置

vue2.0中axios请求配置

  • 一、vue2.0项目中
    • 1.配置
    • 2.使用
  • 二、vue2.0+ts项目中如何配置
    • 1.配置
    • 2.使用

一、vue2.0项目中

1.配置

// axios.js
import axios from 'axios';
import { Message } from 'element-ui';
import router from '../../router/index.js';
//创建axios实例const service = axios.create({timeout: 600000, // 请求超时时间withCredentials: false,
});
//请求拦截
service.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json';config.headers['aiToken'] = JSON.parse(localStorage.getItem('token'));config.url = process.env.VUE_APP_WEB_API + config.url;// get请求缓存处理if (config.params) {config.params.f_rnd = new Date().getTime();} else {config.params = {f_rnd: new Date().getTime(),};}return config;},error => {return Promise.reject(error);}
);//响应拦截器
service.interceptors.response.use(response => {let data = response.data;if (response.config.isExport) {//配置是为了下载返回二进制文档流时候return response;}if (data.code === 200) {return data;} else {if (data.code === 1015) {Message({type: 'error',offset: 12,message: '登录/授权已经过期,请重新登录',duration: 5000,});router.push({ path: '/login' });return;}Message({showClose: true,message: data.message || data.msg,duration: 2000,type: 'error',});return Promise.reject(data);}// return data;},error => {console.log('error:' + error); // 用于调试return Promise.reject(error);}
);export default service;

2.使用

// api.js
import request from '@/assets/js/axios.js';export function wordClould(params) {return request({url: `url`,method: 'get',params,});
}export function adviserWordClould(data) {return request({url: 'url',method: 'post',data,});
}

二、vue2.0+ts项目中如何配置

1.配置

// axios.ts
import axios from 'axios';
import { AxiosResponse, InternalAxiosRequestConfig, AxiosError } from 'axios';
import { Message } from 'element-ui';const request = axios.create({timeout: 50000,withCredentials: false,
});/************************************请求拦截*/
request.interceptors.request.use(//在函数中使用名为 config 的参数,并且该参数必须符合 InternalAxiosRequestConfig<any> 这个自定义类型的定义。function (config: InternalAxiosRequestConfig<any>) {// Do something before request is sentif (config.headers) {config.headers['Authorization'] = 'token';}config.url = process.env.VUE_APP_WEB_API + config.url;return config;},function (error: AxiosError) {// Do something with request errorreturn Promise.reject(error);}
);// 名为 status 的数值属性
interface responseConfig {// 响应结果包含status,0 是成功status: number;
}
/************************************ 响应拦截*/
request.interceptors.response.use(function (response: AxiosResponse<responseConfig>) {if (response.data.status === 200) {return response;}Message.error('后台接口异常,请联系管理员');return Promise.reject(response);},function (error: AxiosError) {return Promise.reject(error);}
);export default request;

2.使用

// types.ts/*** 任意类型的参数*/
export interface paramsType {[key: string]: any;
}
// api.ts
import request from '../utils/axios';
import { paramsType } from '../utils/types';/*** 登录接口* @param userData* @returns*/
export function ApiLogin(data: paramsType) {return request({method: 'POST',url: 'url',data,});
}/*** 获取菜单* @param params* @returns*/
export function APIGetMenu(params: paramsType) {return request({method: 'GET',url: 'url',params,});
}

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

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

相关文章

装WebVideoCreator记录

背景&#xff0c;需要在docker容器内配置WebVideoCreator环境&#xff0c;配置npm、node.js WebVideoCreator地址&#xff1a;https://github.com/Vinlic/WebVideoCreator 配置环境&#xff0c;使用这个教程&#xff1a; linux下安装node和npm_linux离线安装npm-CSDN博客 1…

Android12上新增jar遇到的问题总结

最近在vendor目录下新增jar遇到一个问题&#xff0c;新增jar完全没问题&#xff0c;但是如果在framework/base/service下通过static_lib调用&#xff0c;就会出现如下报错&#xff0c;在SystemUI中调用都不会出现此问题&#xff0c;这个问题应该就是出现在framework/base/servi…

【C语言】---- 复合数据类型之枚举(Enum)

在C语言中&#xff0c;枚举&#xff08;Enum&#xff09;是一种用户定义的数据类型&#xff0c;它允许为一组常量分配有序的值。枚举在编程中经常用于表示一组相关的命名常量&#xff0c;提高程序的可读性和可维护性。 枚举的定义 枚举的定义使用 enum 关键字&#xff0c;它允…

反射: 获取变量类型

更高级的编程语言&#xff0c;提供反射、解释机制&#xff0c;获取对象类型非常方便&#xff0c;因为运行时保存有对象的全部信息&#xff0c;也包括类型&#xff0c;而对于编译型语言而言&#xff0c;变量类型要靠编译期或构造/依赖类型某个存储类型的结构。 不同语言的反射 …

JavaWeb - Mybatis - 基础操作

删除Delete 接口方法&#xff1a; Mapper public interface EmpMapper { //Delete("delete from emp where id 17") //public void delete(); //以上delete操作的SQL语句中的id值写成固定的17&#xff0c;就表示只能删除id17的用户数据 //SQL语句中的id值不能写成…

[数据集][目标检测]西红柿成熟度检测数据集VOC+YOLO格式3241张5类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3241 标注数量(xml文件个数)&#xff1a;3241 标注数量(txt文件个数)&#xff1a;3241 标注…

GitHub精选|8 个强大工具,助力你的开发和探究工作

本文精选了8个来自 GitHub 的优秀项目&#xff0c;涵盖了 低代码、报表工具、Web 开发、云原生、通知管理、构建系统、生物计算、位置追踪、API 规范和依赖更新等方面&#xff0c;为开发者和研究人员提供了丰富的资源和灵感。 目录 1.防弹 React&#xff1a;构建强大的 Web 应…

第十周:机器学习笔记

第十周机器学习周报 摘要Abstract机器学习——self-attention&#xff08;注意力机制&#xff09;1. 为什么要用self-attention2. self-attention 工作原理2.1 求α的两种方式2.2 attention-score&#xff08;关联程度&#xff09; Pytorch学习1. 损失函数代码实战1.1 L1loss&a…

电路分析 ---- 加法器

1 同相加法器 分析过程 虚短&#xff1a; u u − R G R G R F u O u_{}u_{-}\cfrac{R_{G}}{R_{G}R_{F}}u_{O} u​u−​RG​RF​RG​​uO​ i 1 u I 1 − u R 1 i_{1}\cfrac{u_{I1}-u_{}}{R_{1}} i1​R1​uI1​−u​​&#xff1b; i 2 u I 2 − u R 2 i_{2}\cfrac{u_{…

如何判断小程序是运行在“企业微信”中的还是运行在“微信”中的?

如何判断小程序是运行在“企业微信”中的还是运行在“微信”中的&#xff1f; 目录 如何判断小程序是运行在“企业微信”中的还是运行在“微信”中的&#xff1f; 一、官方开发文档 1.1、“微信小程序”开发文档的说明 1.2、“企业微信小程序”开发文档的说明 1.3、在企业…

无线信道中ph和ph^2的场景

使用 p h ph ph的情况&#xff1a; Rayleigh 分布的随机变量可以通过两个独立且相同分布的零均值、高斯分布的随机变量表示。设两个高斯随机变量为 X ∼ N ( 0 , σ 2 ) X \sim \mathcal{N}(0, \sigma^2) X∼N(0,σ2)和 Y ∼ N ( 0 , σ 2 ) Y \sim \mathcal{N}(0, \sigma^2)…

终端协会发布《移动互联网应用程序(App)自动续费测评规范》

随着移动互联网的快速发展&#xff0c;App自动续费服务已成为许多应用的标配&#xff0c;但同时也引发了不少消费者的投诉和不满。为了规范这一市场行为&#xff0c;保护消费者的合法权益&#xff0c;电信终端协会&#xff08;TAF&#xff09;发布了《移动互联网应用程序&#…

代码随想录 刷题记录-28 图论 (5)最短路径

一、dijkstra&#xff08;朴素版&#xff09;精讲 47. 参加科学大会 思路 本题就是求最短路&#xff0c;最短路是图论中的经典问题即&#xff1a;给出一个有向图&#xff0c;一个起点&#xff0c;一个终点&#xff0c;问起点到终点的最短路径。 接下来讲解最短路算法中的 d…

【C++】static作用总结

文章目录 1. 在函数内&#xff08;局部静态变量&#xff09;2. 在类中的静态成员变量3. 在类中的静态成员函数4. 在文件/模块中的静态变量或函数总结 1. 在函数内&#xff08;局部静态变量&#xff09; 当 static 用于函数内的局部变量时&#xff0c;该变量的生命周期变为整个…

网络层 V(IPv6)【★★★★★★】

一、IPv6 的特点 IP 是互联网的核心协议。现在使用的 IP&#xff08;即 IPv4 ) 是在 20 世纪 70 年代末期设计的。互联网经过几十年的飞速发展&#xff0c;到 2011 年 2 月&#xff0c;IPv4 的地址已经耗尽&#xff0c; ISP 已经不能再申请到新的 IP 地址块了。我国在 2014 年…

梨花声音教育退费普通话学习技巧之了解文化背景

在学习普通话的过程中&#xff0c;了解中国的文化背景是不可或缺的一环。语言不仅是交流的工具&#xff0c;更是文化的载体。通过深入了解中国的历史、文化和社会背景&#xff0c;学习者可以更好地理解和掌握普通话&#xff0c;使语言学习变得更加生动有趣。本文将从几个方面详…

JWT详解:一种轻量级的身份验证和授权机制

引言 JSON Web Token&#xff08;JWT&#xff09;是一种基于JSON格式的开放标准&#xff08;RFC 7519&#xff09;&#xff0c;它定义了一种紧凑且自包含的方式&#xff0c;用于在各方之间安全地传输信息。JWT因其轻量级、可扩展性和安全性&#xff0c;在Web应用程序和RESTful…

【iOS】属性关键字

目录 深浅拷贝 自定义类 容器类深拷贝 属性关键字 原子操作 atomic nonatomic 读写权限 readwrite readonly 内存管理 weak assign strong retian copy strong与copy 补充 属性关键字格式 ARC下property的默认属性 深浅拷贝 关于深浅拷贝&#xff0c;笔者在…

ClickHouse的安装教程

ClickHouse的安装教程 文章目录 ClickHouse的安装教程写在前面准备工作关闭防火墙CentOS 取消打开文件数限制安装依赖CentOS 取消 SELINUX 单机安装在 **node01** 的/opt/software 下创建 clickhouse 目录将下载的文件上传到 node01 的 /opt/software/clickhouse 目录下将安装文…

FPGA第 9 篇,Verilog 中的关键字和基数

前言 在 Verilog 中&#xff0c;关键字&#xff08;Keywords&#xff09;和基数&#xff08;Radix&#xff09;是语言的重要组成部分&#xff0c;它们有助于描述和定义硬件设计。上期分享了 Verilog 的基本使用&#xff0c;以及数据类型、逻辑值和算数运算符的简单应用&#x…