axios和Ajax

1.axios

官网:https://axios-http.com/zh/
CDN:https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js
axios是一个请求库,在浏览器环境中,它封装了XHR,提供更加便捷的API发送请求

基本使用

// 发送 get 请求到 https://study.duyiedu.com/api/herolist,输出响应体的内容
axios.get("https://study.duyiedu.com/api/herolist").then(resp=>{console.log(resp.data); // resp.data 为响应体的数据,axios会自动解析JSON格式
})// 发送 get 请求到 https://study.duyiedu.com/api/user/exists?loginId=abc,输出响应体的内容
axios.get("https://study.duyiedu.com/api/user/exists", {params: { // 这里可以配置 query,axios会自动将其进行Url编码loginId: "abc"},
}).then(resp=>{console.log(resp.data); // resp.data 为响应体的数据,axios会自动解析JSON格式
})// 发送 post 请求到 https://study.duyiedu.com/api/user/reg
// axios 会将第二个参数转换为JSON格式的请求体
axios.post("https://study.duyiedu.com/api/user/reg", {loginId: 'abc',loginPwd: '123123',nickname: '棒棒鸡'
}).then(resp=>{console.log(resp.data); // resp.data 为响应体的数据,axios会自动解析JSON格式
})

axios的基本用法为:

axios.get(url地址, [请求配置]);
axios.post(url地址, [请求体对象], [请求配置]);// 或直接使用 axios 方法,在请求配置中填写请求方法
axios(请求配置);

实例

axios允许开发者先创建一个实例,后续通过使用实例进行请求

这样做的好处是可以预先进行某些配置

示例:

// 创建实例
const instance = axios.create({baseURL: 'https://study.duyiedu.com/'
});// 发送 get 请求到 https://study.duyiedu.com/api/herolist,输出响应体的内容
instance.get("/api/herolist").then(resp=>{console.log(resp.data); // resp.data 为响应体的数据,axios会自动解析JSON格式
})

拦截器

有时,我们可能需要对所有的请求或响应做一些统一的处理

比如,在请求时,如果发现本地有token,需要附带到请求头

又比如,在拿到响应后,我们仅需要取响应体中的data属性

再比如,如果发生错误,我们需要做一个弹窗显示

这些统一的行为就非常适合使用拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// config 为当前的请求配置// 在发送请求之前做些什么// 这里,我们添加一个请求头const token = localStorage.getItem('token');if(token){config.headers.authorization = token;}return config; // 返回处理后的配置
});// 添加响应拦截器
axios.interceptors.response.use(function (resp) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return resp.data.data; // 仅得到响应体中的data属性
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么alert(error.message); // 弹出错误消息
});

设置好拦截器后,后续的请求和响应都会触发对应的函数

拦截器可以针对axios实例进行设置

2.ajax

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

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

相关文章

如何对非线性【SVM】进行三维可视化

首先导入相应的模块, from sklearn.datasets import make_blobs from sklearn.svm import SVC import matplotlib.pyplot as plt import numpy as np 我们使用make_circles()函数创建散点图,并将散点图中的点的横纵坐标赋值给x,y,其中x是特…

golang工程中间件——redis常用结构及应用(string, hash, list)

Redis 命令中心 【golang工程中间件——redisxxxxx】这些篇文章专门以应用为主,原理性的后续博主复习到的时候再详细阐述 string结构以及应用 字符数组,redis字符串是二进制安全字符串,可以存储图片等二进制数据,同时也可以存…

4、Python基本数据类型:数字、字符串、列表、元组、集合、字典

文章目录 1、Python基本数据类型简介2、数字3、字符串4、列表5、元组6、集合7、字典1、Python基本数据类型简介 Python是一种非常强大且易于学习的编程语言,它具有简洁的语法和丰富的数据类型。了解和掌握Python的基本数据类型是学习和使用Python的基础。本文将详细介绍Pytho…

react-app-env.d.ts是什么?

react-app-env.d.ts这个文件是使用CRA脚手架生成react项目时自动生成的,在平时的开发过程中看到这个文件就会感觉很疑惑,出于好奇心,在网上查找资料,得出下文 前置知识 这个是一个类型声明文件 它的内容很短,就一行…

ZYNQ_project:led

本次实验完成:led流水间隔0.5s 闪烁间隔0.25s。 名词解释: analysis分析:对源文件进行全面的语法检查。 synthesis综合:综合的过程是由 FPGA 综合工具箱 HDL 原理图或其他形式源文件进行分析,进而推演出由 FPGA 芯…

Blender vs 3ds Max:谁才是3D软件的未来

在不断发展的3D建模和动画领域,两大软件巨头Blender和3ds Max一直在争夺顶级地位。 随着技术的进步和用户需求的演变,一个重要问题逐渐浮出水面:Blender是否最终会取代3ds Max?本文将深入探讨二者各自的优势和劣势、当前状况&…

文件上传下载API

文件上传下载API 一、wx.uploadFile文件上传API二、wx.downloadFile文件下载API 微信小程序请求服务器地址需要在微信公众平台进行配置。 一、wx.uploadFile文件上传API wx.uploadFile(object)将本地资源上传到服务器,发起一个HTTP POST请求。其中content-type为mu…

linux命令screen解决client_loop: send disconnect: Broken pipe

一、SSH连接服务器,client_loop: send disconnect: Broken pipe 最近需要在服务器上运行一个需要跑很久的脚本,但ssh连接的远程服务器的命令窗口经常会报:client_loop: send disconnect: Broken pipe,这个错误是ssh 命令之后没有活…

python图像处理 ——图像分块

python图像处理 ——图像分块 前言一、分块与合并1.读取原始图像2.网格划分,将图像划分为m*n块3.网格合并 二、代码 前言 根据图像尺寸创建一个 ( m 1 ) ( n 1 ) 个均匀的网格顶点坐标,对于图像块来说每个图像块的左上角和右下角可以唯一确定一个图像…

react+canvas实现横跨整个页面的动态的波浪线(贝塞尔曲线)

本来写这个特效 我打算用css实现的,结果是一波三折,我太难了,最终没能用css实现,转战了canvas来实现。来吧先看效果图 当然这个图的波浪高度、频率、位置、速度都是可调的,请根据自己的需求调整,如果你讲波…

前端框架Vue学习 ——(六)Vue组件库Element

文章目录 Element 介绍快速入门常见组件表格分页Dialog 对话框组件表单 Container 布局容器 Element 介绍 Element:是饿了么团队研发的,一套为开发者、 设计师和产品经理准备的基于Vue 2.0的桌面端组件库。 组件:组成网页的部件,…

【Unity】2D角色跳跃控制器

最近加了学校的Nova独游社,本文是社团出的二面题,后续有时间优化下可能会做成一个二维冒险小游戏。本文主要涉及相关代码,参考教程:《勇士传说》横版动作类游戏开发教程 效果演示 【Unity】2D角色跳跃模拟器 主要实现功能&#xf…

CV计算机视觉每日开源代码Paper with code速览-2023.11.2

精华置顶 墙裂推荐!小白如何1个月系统学习CV核心知识:链接 点击CV计算机视觉,关注更多CV干货 论文已打包,点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【目标检测】Re-Scoring Using Image-Language Similarit…

Spring Boot 整合SpringSecurity和JWT和Redis实现统一鉴权认证

📑前言 本文主要讲了Spring Security文章,如果有什么需要改进的地方还请大佬指出⛺️ 🎬作者简介:大家好,我是青衿🥇 ☁️博客首页:CSDN主页放风讲故事 🌄每日一句:努力…

多功能声学综合馆:空间的“膜法师”

建筑是文明的承载者,是历史的见证者,也是城市的象征。但在现代都市中,我们不仅需要“固定”的建筑,更需要灵活与多功能性的空间。而这,正是多功能声学综合馆为我们带来的“膜法”。 不仅仅是建筑,更是艺术的…

【文末送书】【Java中的异常处理机制】提供常见的异常报错详情及其解决方案

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

【技术干货】开源库 Com.Gitusme.Net.Extensiones.Core 的使用

目录 1、项目介绍 2、为项目添加依赖 3、代码中导入命名空间 4、代码中使用 示例 1:string转换 示例 2:object转换 1、项目介绍 Com.Gitusme.Net.Extensiones.Core是一个.Net扩展库。当前最新版本1.0.4,提供了常见类型转换&#xff0c…

专精特新申报条件

(一)申报条件 申报企业须满足《山东省“专精特新”中小企业认定管理办法》(鲁工信发〔2020〕7号)所列条件。其中,企业近两年平均营业收入增速调整为不低于5%,其他条件不变。2018年认定的山东省“专精特新”…

Linux认证 | RHCA是什么等级的证书?考到工资能有多少?

RHCA就是红帽认证架构师,RHCA是红帽公司在红帽认证工程师(RHCE)和红帽认证技师(RHCT)认证推出之后又一个最新的顶级认证,在业界也是最受欢迎的、最成熟的linux认证。 那么RHCA是什么等级的证书&#xff1f…

asp.net上传文件

第一种方法 前端&#xff1a; <div> 单文件上传 <form enctype"multipart/form-data" method"post" action"upload.aspx"> <input type"file" name"files" /> …