vue封装接口

目录

封装接口前缀

配置逻辑

接口存放文件

配置代理

获取数据方法


封装接口前缀

config.js

const serverConfig = {baseURL: "https://xxx.xxxxxxxx.com/api", // 请求基础地址,可根据环境自定义useTokenAuthorization: false, // 是否开启 token 认证};export default serverConfig;

配置逻辑

api.js

import axios from "axios";
import serverConfig from "./config";
import qs from "qs";// 创建 axios 请求实例
const serviceAxios = axios.create({baseURL: serverConfig.baseURL, // 基础请求地址timeout: 10000, // 请求超时设置withCredentials: false, // 跨域请求是否需要携带 cookie
});// 创建请求拦截
serviceAxios.interceptors.request.use((config) => {// 如果开启 token 认证if (serverConfig.useTokenAuthorization) {config.headers["Authorization"] = localStorage.getItem("token"); // 请求头携带 token}// 设置请求头if(!config.headers["content-type"]) { // 如果没有设置请求头if(config.method === 'post') {config.headers["content-type"] = "application/x-www-form-urlencoded"; // post 请求config.data = qs.stringify(config.data); // 序列化,比如表单数据} else {config.headers["content-type"] = "application/json"; // 默认类型}}console.log("请求配置", config);return config;},(error) => {Promise.reject(error);}
);// 创建响应拦截
serviceAxios.interceptors.response.use((res) => {let data = res.data;// 处理自己的业务逻辑,比如判断 token 是否过期等等// 代码块return data;},(error) => {let message = "";if (error && error.response) {switch (error.response.status) {case 302:message = "接口重定向了!";break;case 400:message = "参数不正确!";break;case 401:message = "您未登录,或者登录已经超时,请先登录!";break;case 403:message = "您没有权限操作!";break;case 404:message = `请求地址出错: ${error.response.config.url}`;break;case 408:message = "请求超时!"; break;case 409:message = "系统已存在相同数据!";break;case 500:message = "服务器内部错误!";break;case 501:message = "服务未实现!";break;case 502:message = "网关错误!";break;case 503:message = "服务不可用!";break;case 504:message = "服务暂时无法访问,请稍后再试!";break;case 505:message = "HTTP 版本不受支持!";break;default:message = "异常问题,请联系管理员!";break;}}return Promise.reject(message);}
);
export default serviceAxios;

接口存放文件

user.js

import serviceAxios from "../request/api";export const index = (params) => {return serviceAxios({url: "/index",//url放接口method: "post",params,});
};

配置代理

vue.config.js

module.exports = {//vue-cli3.0 里面的 vue.config.js做配置
devServer: {proxy: {'/api': {target: 'https://xxx.xxxxxxxx.com',  // 后台接口域名secure: false,  // 如果是https接口,需要配置这个参数changeOrigin: true,  //是否跨域}}}};

获取数据方法

 import { index as user } from "../request/user";async function qwe() {let params = {email: "123",password: "12321"}let data = await user(params);console.log(data);}

本篇文章结束,大致就是这样,感谢观看。

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

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

相关文章

【C语言进阶】预处理详解

引言 对预处理的相关知识进行详细的介绍 ✨ 猪巴戒:个人主页✨ 所属专栏:《C语言进阶》 🎈跟着猪巴戒,一起学习C语言🎈 目录 引言 预定义符号 #define定义常量 #define定义宏 带有副作用的宏参数 宏替换的规则 …

理解LSTM一种递归神经网络(RNN)

1 递归神经网络结构 一个简单的传统神经网络结构如下图所示: 给他一些输入x0,x1,x2 … xt, 经过神经元作用之后得到一些对应的输出h0,h1,h2 … ht。每次的训练,神经元和神经元之间不需要传递任何信息。 递归神经网络和传统神经网络不同的一个点在于&am…

Linux 网络传输学习笔记

这篇是混合《Linux性能优化实战》以及 《Wireshark网络分析就这么简单》的一些关于Linux 网络的学习概念和知识点笔记 ,主要记录网络传输流程以及对于TCP和UDP传输的一些影响因素 Linux 网络传输流程 借用一张倪朋飞先生的《Linux性能优化实战》课程中的图片 接收流…

利用STM32CubeMX和keil模拟器,3天入门FreeRTOS(2.1) —— 任务挂起和恢复

前言 (1)FreeRTOS是我一天过完的,由此回忆并且记录一下。个人认为,如果只是入门,利用STM32CubeMX是一个非常好的选择。学习完本系列课程之后,再去学习网上的一些其他课程也许会简单很多。 (2&am…

Windows 下ffmpeg安装及实践

Windows 下ffmpeg安装及实践 背景安装实践其他 背景 最近负责音频文件处理相关的业务,涉及到 ffmpeg 对一些音频文件格式的校验,记录一下安装过程及踩坑过程。 安装 如图1所示,进入官网,在windows下任选一个文件:h…

day01 深度学习介绍

目录 1.1深度学习介绍 1.2神经网络NN 1、概念: 2、神经元 3、(单层)神经网络 4、感知机(两层) 5、多层神经网络 6、激活函数 (1)饱和与非饱和激活函数 (2)饱和激活…

写着玩的程序:pycharm实现无限弹窗程序(非病毒程序,仅整蛊使用)

运行环境 PyCharm 2023.2.1 python3.11 具体内容 源代码 import tkinter as tk from tkinter import messagebox import threadingclass PopupGenerator:def __init__(self):self.root tk.Tk()self.root.geometry("200x120")self.root.title("无限弹窗&qu…

LeetCode---380周赛

题目列表 3005. 最大频率元素计数 3006. 找出数组中的美丽下标 I 3007. 价值和小于等于 K 的最大数字 3008. 找出数组中的美丽下标 II 一、最大频率元素计数 这题就是个简单的计数题,正常遍历统计数据即可,关键是你要会写代码逻辑。 代码如下&…

Java设计模式-代理模式(7)

馆长准备了很多学习资料,其中包含java方面,jvm调优,spring / spring boot /spring cloud ,微服务,分布式,前端,js书籍资料,视频资料,以及各类常用软件工具,破解工具 等资源。请关注“IT技术馆”公众号,进行关注,馆长会每天更新资源和更新技术文章等。请大家多多关注…

steam游戏搬砖项目还能火多久?

最近放假回到老家,见了不少亲戚朋友,大家不约而同都在感叹今年大环境不好,工作不顺,生意效益不好,公司状况不佳,反问我们生意如何?为了让他们心里好受一点,我也假装附和道:也不咋地&…

为什么电脑降价了?

周末,非常意外地用不到3000元买到了一款2023年度发布的华为笔记本I5,16G,500G,基本是主流配置,我非常意外,看了又看,不是什么Hwawii,或者Huuawe。然后也不是二手。为什么呢?因为在ALU和FPU之外&…

Maven 打包时,依赖配置正确,但是类引入出现错误,一般是快照(Snapshot)依赖拉取策略问题

问题描述: 项目打包时,类缺少依赖,操作 pom.xml -> Maven -> Reload project ,还是不生效,但是同事(别人)那里正常。 问题出现的环境: 可能项目是多模块项目,结构…

图论可达性c语言实现

概述 图论中的可达性是指在图中是否存在从一个顶点到另一个顶点的路径。这是图论中的一个基本概念,对于许多实际问题的建模和解决都非常重要。以下是关于图论可达性的一些重要概念和信息: 有向图和无向图: 图可以分为有向图和无向图。在有向图…

MySQL JSON数据类型

在日常开发中,我们经常会在 MySQL 中使用 JSON 字段,比如很多表中都有 extra 字段,用来记录一些特殊字段,通过这种方式不需要更改表结构,使用相对灵活。 目前对于 JSON 字段的实践各个项目不尽相同,MySQL 表…

未来趋势:视频美颜SDK与增强现实(AR)的融合

当下,视频美颜SDK不断演化,成为用户记录和分享生活时不可或缺的一部分。同时,增强现实技术也以其独特的沉浸感和交互性受到青睐,被广泛应用于游戏、教育、医疗等领域。 一、视频美颜与AR的结合 1.实时美颜的AR增值体验 借助AR的…

【Web前端开发基础】CSS的结构伪类选择器、伪元素、浮动

CSS的浮动 目录 CSS的浮动一、学习目标二、文章内容2.1 结构伪类选择器2.2 伪元素2.3 标准流2.4 浮动2.5 清除浮动2.6 拓展(BFC) 三、综合案例3.1 小米模块案例3.2 网页导航案例 一、学习目标 能够使用结构伪类选择器在HTML中选元素能够说出标准流元素的…

服务器管理平台(5)- 数据展示

数据展示 Grafana导入MySQL数据源进行定制化数据展示,包括品牌分类饼图,详细数据列表等LayUI为开源前端框架,对系统概览、登录日志等信息,划分不同页面使用表格展示详细数据 1、Grafana 对品牌、CPU型号、内存等数据使用饼图展示…

探索全球DNS体系 | 从根服务器到本地解析

DNS 发展 DNS(Domain Name System)的起源可以追溯到互联网早期。 早期的挑战: 早期互联网主要通过IP地址进行通信,用户需要记住复杂的数字串来访问网站。 需求的催生: 随着互联网的扩大,更简单、易记的…

【剑指offer】重建二叉树

👑专栏内容:力扣刷题⛪个人主页:子夜的星的主页💕座右铭:前路未远,步履不停 目录 一、题目描述1、题目2、示例 二、题目分析1、递归2、栈 一、题目描述 1、题目 剑指offer:重建二叉树 给定节…

在CentOS 7中配置 RAID服务

实验过程 Xnode1克隆虚拟机raid ps: 阿里云盘Xnode1获取 xnode1 https://www.alipan.com/s/HgLXfoeBWG2 提取码: eb70 编辑虚拟机 添加2硬盘 CRT连接(root密码:000000) 创建raid 0 [rootdemo ~]# lsblk 安装mdadm [rootdemo…