vue3+Ts封装axios网络请求

1.安装axios

npm i axios

在package.json中检查axios是否安装成功

 "dependencies": {"axios": "^1.7.2","vue": "^3.4.29","vue-router": "^4.4.0"},

2.新建文件

新建文件utils/request.ts

import axios from "axios";
const service=axios.create({baseURL:'http://localhost:3000',timeout:5000
})service.interceptors.request.use(config=>{const token=localStorage.getItem('token')if(token){config.headers['Authorization']=`Bearer ${token}`}return config;},error=>{return Promise.reject(error);}
)
service.interceptors.response.use(response => {// 对响应数据做点什么return response.data;},error => {// 对响应错误做点什么console.error('Response error:', error);if (error.response) {// 这里可以处理HTTP状态码异常的情况switch (error.response.status) {case 401:// 未授权,跳转到登录页break;case 403:// 禁止访问break;case 404:// 资源未找到break;default:console.error('Unhandled error:', error.response.status);}}return Promise.reject(error);});export default service;

新建文件api/user.ts

import request from "../utils/request";
const api_name='';
export default {getData(url:any,params:any){return request({url:api_name+url,method:'get',params})},postData(url:any,params:any){return request({url:api_name+url,method:'post',data:params})}
}

3.在指定文件引用并使用

 import getApi from '../api/user'

GET:

getApi.getData('http://jsonplaceholder.typicode.com/posts').then(res=>{console.log(res)})

POST:

getApi.postData('http://jsonplaceholder.typicode.com/posts',{"userId":1,"title":"sdf","body":"sdf"}).then(res=>{console.log(res)})

完成

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

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

相关文章

js 接收回调函数 转换为promise

下面是一个示例代码,展示如何编写一个接收回调函数并将其转换为 Promise 的 JavaScript 函数: // 定义一个接收回调函数并转换为 Promise 的函数 function convertCallbackToPromise(callbackFunction) {// 返回一个新的 Promise 对象return new Promis…

Java 并发编程常见问题

1、线程状态它们之间是如何扭转的? 1、谈谈对于多线程的理解? 1、对于多核CPU,多线程可以提升CPU的利用率; 2、对于多IO操作的程序,多线程可以提升系统的整体性能及吞吐量; 3、使用多线程在一些场景下可…

鸿蒙开发设备管理:【@ohos.multimodalInput.inputDevice (输入设备)】

输入设备 输入设备管理模块,用于监听输入设备连接、断开和变化,并查看输入设备相关信息。比如监听鼠标插拔,并获取鼠标的id、name和指针移动速度等信息。 说明: 本模块首批接口从API version 8开始支持。后续版本的新增接口&…

【算法专题--栈】用队列实现栈 -- 高频面试题(图文详解,小白一看就懂!!)

目录 一、前言 二、题目描述 三、解题方法 ⭐两个队列实现栈 🥝解题思路 🍍案例图解 ⭐用一个队列实现栈 🍇解题思路 🍍案例图解 四、总结与提炼 五、共勉 一、前言 用队列实现栈 这道题,可以说是--栈…

WAF 相关的术语解释

QPS 每秒查询率(Query Per Second QPS) 是对一个特定的查询服务器,在规定时间内所处理流量多少的衡量标准,在因特网上,作为域名系统服务器的机器性能经常用每秒查询率来衡量,对应 fetches/sec(…

论文写作笔记9 word论文排版常见问题

1.公式编写 word公式编写麻烦, 我推荐latex编写转word或识图. 识图可以使用软件Mathpix Snipping Tool, latex转word见下方链接. word中输入的Latex代码,按 Alt 将所选字母变成公式, 然后按 Ctrl 将 Latex 代码转换成 Word 公式 MAML在线互转 …

002-基于Sklearn的机器学习入门:回归分析(上)

本节及后续章节将介绍机器学习中的几种经典回归算法,所选方法都在Sklearn库中聚类模块有具体实现。本节为上篇,将介绍基础的线性回归方法,包括线性回归、逻辑回归、多项式回归和岭回归等。 2.1 回归分析概述 回归(Regression&…

【深度学习】Speech2Action: Cross-modal Supervision for Action Recognition

文章目录 Speech2Action: 基于跨模态监督的动作识别摘要1. 引言2. 相关工作将剧本与电影对齐动作识别的监督 3. Speech2Action模型3.1 IMSDb 数据集剧本解析动词挖掘舞台指令基于BERT的语音分类器实现细节结果 4. 动作识别视频挖掘4.1 未标注的数据4.2 获取弱标签4.2.1 使用Spe…

《昇思25天学习打卡营第14天 | 昇思MindSpore基于MindNLP+MusicGen生成自己的个性化音乐》

14天 本节学了基于MindNLPMusicGen生成自己的个性化音乐。 MusicGen是来自Meta AI的Jade Copet等人提出的基于单个语言模型的音乐生成模型,能够根据文本描述或音频提示生成高质量的音乐样本。 MusicGen模型基于Transformer结构,可以分解为三个不同的阶段…

springboot笔记示例六:fastjson2集成

springboot笔记示例六:fastjson2集成 本文md下载 https://download.csdn.net/download/a254939392/89491102本文md文档下载地址 #springboot json官方说明 https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/boot-features-json.htmlsprin…

HP UX服务器监控指标解读(Snmp)

随着企业信息化建设的不断深入,服务器的稳定运行成为了保障业务连续性的关键。HP UX作为一款高性能的Unix服务器操作系统,在各类企业级应用中发挥着重要作用。为了确保HP UX服务器的稳定运行,对其进行全面而细致的监控至关重要。本文将针对监…

⭐ UI自动化工具轻松实现微信消息提醒 ⚡

🌿🌿🌿🌿🌿🌿 演示效果 🌿🌿🌿🌿🌿🌿 😅😅😅😅😅😅 Python安装…

2023HW部分笔试题

题目来源:卡码网 136. 字符串处理器 问题描述 时间限制:1.000S 空间限制:256MB 题目描述 产品代码需要设计一个带游标的字符串处理器,它需要实现以下功能: 插入:在游标所在处添加文本,其对应操作为 i…

AI时代,你的工作会被AI替代吗?

AI在不同领域的应用和发展速度是不同的。在智商方面,尤其是在逻辑推理、数据分析和模式识别等领域,AI已经取得了显著的进展。例如,在国际象棋、围棋等策略游戏中,AI已经能够击败顶尖的人类选手。在科学研究、医学诊断、股市分析等…

一分钟彻底掌握Java枚举

在Java编程语言中,枚举(Enum)是一种特殊的类,它包含了一组固定的常量。枚举常用于表示固定数量的常量值,例如一周的七天、四个基本方向(东、南、西、北)等。 0.浅显理解 枚举就像是一个特殊的…

STM32 SWD烧写

最小电路 stm32f103x 内部已经集成了振荡电路,可以省略;rst引脚电路,可以省略,boot0,boot1不需要设置 正常烧录 -------------------------------------------------------------------STM32CubeProgrammer v2.9.0 …

使用 go-control-plane 自定义服务网格控制面

写在前面 阅读本文需要最起码了解envoy相关的概念 本文只是一个类似于demo的测试,只为了学习istio,更好的理解istio中的控制面和数据面(pilot -> proxy)是如何交互的,下图的蓝色虚线 先说go-control-plane是什么…

nginx 1024 worker_connections are not enough while connecting to upstream

现象 请求api响应慢,甚至出现504 gateway timeout,重启后端服务不能恢复,但重启nginx可以恢复。 解决方案 worker_connections使用了默认值 1024,当流量增长时,导致连接不够 在nginx.conf中修改连接数就可以了&…

小白学python(第四天)顺序与分支篇

这几天因为个人原因,python篇会更新比较慢,还望大家谅解,那么废话不多说,我们现在就进入正题 顺序篇 这个没啥好说的,就是自上而下,依次执行 分支篇 条件(if)语句语法格式&#…

【车载开发系列】瑞萨RH850单片机入门

【车载开发系列】瑞萨RH850单片机入门 【车载开发系列】瑞萨RH850单片机入门 【车载开发系列】瑞萨RH850单片机入门一. 瑞萨RH850概念二. 瑞萨RH850分类三. 瑞萨RH850的应用领域四. RH850和ARM的区别五. RH850内存概念1. Flash存储器2. RAM(随机访问存储器&#xff…