axios(ajax请求库)
json-server(搭建http服务)
json-server用来快速搭建模拟的REST API的工具包
使用json-server
- 下载：npm install -g json-server
- 创建数据库json文件：db.json
- 开启服务：json-srver --watch db.json
axios的基本使用
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios基本使用</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">基本使用</h2><button class="btn btn-primary"> 发送GET请求 </button><button class="btn btn-warning" > 发送POST请求 </button><button class="btn btn-success"> 发送 PUT 请求 </button><button class="btn btn-danger"> 发送 DELETE 请求 </button></div><script>//获取按钮const btns = document.querySelectorAll('button');//第一个btns[0].onclick = function(){//发送 AJAX 请求axios({//请求类型method: 'GET',//URLurl: 'http://localhost:3000/posts/2',}).then(response => {console.log(response);});}//添加一篇新的文章btns[1].onclick = function(){//发送 AJAX 请求axios({//请求类型method: 'POST',//URLurl: 'http://localhost:3000/posts',//设置请求体data: {title: "今天天气不错, 还挺风和日丽的",author: "张三"}}).then(response => {console.log(response);});}//更新数据btns[2].onclick = function(){//发送 AJAX 请求axios({//请求类型method: 'PUT',//URLurl: 'http://localhost:3000/posts/3',//设置请求体data: {title: "今天天气不错, 还挺风和日丽的",author: "李四"}}).then(response => {console.log(response);});}//删除数据btns[3].onclick = function(){//发送 AJAX 请求axios({//请求类型method: 'delete',//URLurl: 'http://localhost:3000/posts/3',}).then(response => {console.log(response);});}</script>
</body></html>axios的其他使用
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios其他使用</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">其他使用</h2><button class="btn btn-primary"> 发送GET请求 </button><button class="btn btn-warning" > 发送POST请求 </button><button class="btn btn-success"> 发送 PUT 请求 </button><button class="btn btn-danger"> 发送 DELETE 请求 </button></div><script>//获取按钮const btns = document.querySelectorAll('button');//发送 GET 请求btns[0].onclick = function(){// axios()axios.request({method:'GET',url: 'http://localhost:3000/comments'}).then(response => {console.log(response);})}//发送 POST 请求btns[1].onclick = function(){// axios()axios.post('http://localhost:3000/comments', {"body": "喜大普奔","postId": 2}).then(response => {console.log(response);})}/*** axios({* url: '/post',* // /post?a=100&b=200* // /post/a/100/b/200* // /post/a.100/b.200* params: {* a:100,* b:200* }* })* * * */</script>
</body></html>axios的默认配置
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios基本使用</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">基本使用</h2><button class="btn btn-primary"> 发送GET请求 </button><button class="btn btn-warning" > 发送POST请求 </button><button class="btn btn-success"> 发送 PUT 请求 </button><button class="btn btn-danger"> 发送 DELETE 请求 </button></div><script>//获取按钮const btns = document.querySelectorAll('button');//默认配置axios.defaults.method = 'GET';//设置默认的请求类型为 GETaxios.defaults.baseURL = 'http://localhost:3000';//设置基础 URLaxios.defaults.params = {id:100};axios.defaults.timeout = 3000;//3秒之后结果如果还没有回来就取消请求btns[0].onclick = function(){axios({url: '/posts'}).then(response => {console.log(response);})}</script>
</body></html>axios创建实例对象
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios实例对象对象</title><link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">基本使用</h2><button class="btn btn-primary"> 发送GET请求 </button><button class="btn btn-warning" > 发送POST请求 </button><br></div><script>//获取按钮const btns = document.querySelectorAll('button');//创建实例对象 /getJokeconst duanzi = axios.create({baseURL: 'https://api.apiopen.top',timeout: 2000});const another = axios.create({baseURL: 'https://b.com',timeout: 2000});//这里 duanzi 与 axios 对象的功能几近是一样的// duanzi({// url: '/getJoke',// }).then(response => {// console.log(response);// });duanzi.get('/getJoke').then(response => {console.log(response.data)})</script>
</body></html>拦截器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拦截器</title><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><script>// Promise// 设置请求拦截器 config 配置对象axios.interceptors.request.use(function (config) {console.log('请求拦截器 成功 - 1号');//修改 config 中的参数config.params = {a:100};return config;}, function (error) {console.log('请求拦截器 失败 - 1号');return Promise.reject(error);});axios.interceptors.request.use(function (config) {console.log('请求拦截器 成功 - 2号');//修改 config 中的参数config.timeout = 2000;return config;}, function (error) {console.log('请求拦截器 失败 - 2号');return Promise.reject(error);});// 设置响应拦截器axios.interceptors.response.use(function (response) {console.log('响应拦截器 成功 1号');return response.data;// return response;}, function (error) {console.log('响应拦截器 失败 1号')return Promise.reject(error);});axios.interceptors.response.use(function (response) {console.log('响应拦截器 成功 2号')return response;}, function (error) {console.log('响应拦截器 失败 2号')return Promise.reject(error);});//发送请求axios({method: 'GET',url: 'http://localhost:3000/posts'}).then(response => {console.log('自定义回调处理成功的结果');console.log(response);});</script>
</body>
</html>请求取消
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>取消请求</title><link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body><div class="container"><h2 class="page-header">axios取消请求</h2><button class="btn btn-primary"> 发送请求 </button><button class="btn btn-warning" > 取消请求 </button></div><script>//获取按钮const btns = document.querySelectorAll('button');//2.声明全局变量let cancel = null;//发送请求btns[0].onclick = function(){//检测上一次的请求是否已经完成if(cancel !== null){//取消上一次的请求cancel();}axios({method: 'GET',url: 'http://localhost:3000/posts',//1. 添加配置对象的属性cancelToken: new axios.CancelToken(function(c){//3. 将 c 的值赋值给 cancelcancel = c;})}).then(response => {console.log(response);//将 cancel 的值初始化cancel = null;})}//绑定第二个事件取消请求btns[1].onclick = function(){cancel();}</script>
</body>
</html>相关文章：
)
axios(ajax请求库)
json-server(搭建http服务) json-server用来快速搭建模拟的REST API的工具包 使用json-server 下载：npm install -g json-server创建数据库json文件：db.json开启服务：json-srver --watch db.json axios的基本使用 <!doctype html>…...
Ideal窗口中左右侧栏消失了
不知道大家在工作过程中有没有遇到过此类问题，不论是Maven项目还是Gradle项目，突然发现Ideal窗口右侧图标丢失了，同事今天突然说大象图标不见了，不知道怎样刷新gradle。 不要慌张，下面提供一些解决思路： 1…...
麦芒30全新绽放，中国电信勾勒出AI手机的新方向
高通总裁兼CEO克里斯蒂亚诺阿蒙曾在媒体采访时表示：2024年将成为全球AI手机元年，生成式AI正在“非常快”的进入手机。 把大模型装进手机，由此成了智能终端演进的新方向。三星、华为、OPPO、小米等品牌动作频频，纷纷抢滩AI手机市场…...
数据结构之初始二叉树（3）
找往期文章包括但不限于本期文章中不懂的知识点： 个人主页：我要学编程(ಥ_ಥ)-CSDN博客 所属专栏：数据结构（Java版） 二叉树的基本操作 通过上篇文章的学习，我们简单的了解了二叉树的相关操作。接下来就是有…...
egret 白鹭的编译太慢了 自己写了一个
用的swc 他会检测git的改变 const simpleGit require(simple-git); const fs require(fs); const path require(path); // 初始化 simple-git const swc require(swc/core); const baseDir D:\\project; const gameDir game\\module\\abcdefg; const gitDir D:\\projec…...
＜数据集＞pcb板缺陷检测数据集＜目标检测＞
数据集格式：VOCYOLO格式 图片数量：693张 标注数量(xml文件个数)：693 标注数量(txt文件个数)：693 标注类别数：6 标注类别名称：[missing_hole, mouse_bite, open_circuit, short, spurious_copper, spur…...
实验四：图像的锐化处理
目录 一、实验目的 二、实验原理 1. 拉普拉斯算子 2. Sobel算子 3. 模板大小对滤波的影响 三、实验内容 四、源程序和结果 (1) 主程序（matlab） (2) 函数GrayscaleFilter (3) 函数MatrixAbs 五、结果分析 1. 拉普拉斯滤波 2. Sobel滤波 3. 不同大小模板的滤波…...
【Linux】权限的管理和Linux上的一些工具
文章目录 权限管理chgrpchownumaskfile指令sudo指令 目录权限粘滞位Linux中的工具1.软件包管理器yum2.rzsz Linux开发工具vim 总结 权限管理 chgrp 功能：修改文件或目录的所属组 格式：chgrp [参数] 用户组名 文件名 常用选项：-R 递归修改文…...
ES6 字符串的新增方法（二十）
1. String.prototype.startsWith(searchString, position) 特性：判断字符串是否以指定的子字符串开始。 用法：检查字符串的开始部分。 const str "Hello World"; console.log(str.startsWith("Hello")); // 输出：true…...
如何将MP3或WAV文件解码成PCM文件
文章目录 概要整体架构流程技术细节 概要 本文介绍使用 FFmpeg，将MP3或WAV文件解码成PCM文件的方法。 整体架构流程 首先，使用的 FFmpeg 库要支持 MP3/WAV 解码功能，即编译的时候要加上（编译 FFmpeg 库可以参考：Win…...
OpenAI 推出 GPT-4o mini，一种更小、更便宜的人工智能模型
OpenAI 最近推出了新型人工智能模型 GPT-4o mini，以其较小体积和低成本受到关注。这款模型在文本和视觉推理任务上性能优越，且比现有小型模型更快、更经济。GPT-4o mini 已向开发者和消费者发布，企业用户将在下周获得访问权限。 喜好儿网 在…...
Nacos 服务发现（订阅）源码分析（服务端）
前言： 前文我们分析了 Nacos 服务发现（订阅）的流程，从 Nacos Client 端的源码分析了服务发现的过程，服务发现最终还是要调用 Nacos Server 端来获取服务信息，缓存到客户端本地，并且会定时向 Na…...
DICOM CT\MR片子免费在线查看工具；python pydicom包加载查看；mayavi 3d查看
DICOM CT\MR片子免费在线查看工具 参考： https://zhuanlan.zhihu.com/p/668804209 dicom格式： DICOM（Digital Imaging and Communications in Medicine）是医学数字成像和通信的标准。它定义了医学图像（如CT、MRI、X…...
VSCode远程连接Ubuntu/Linux
文章目录 前言SSH（Secure Shell）简介主要功能工作原理常见的 SSH 客户端和服务器 Ubuntu安装sshvscode远程插件安装远程插件开始远程连接 打开文件夹新建终端 总结 前言 在现代开发环境中，远程工作和跨平台开发变得越来越普遍。Visual Studi…...
【Nginx80端口被占用】80端口被System占用如何解决【已解决】
【Nginx80端口被占用】80端口被System占用如何解决【已解决】 01 问题背景 Nginx 版本 1.19及以上80端口被System占用，无法kill tcp6 0 0 :::111 :::* LISTEN 1/systemd tcp6 0 0 :::80 :::* LISTEN 1/systemd 执行以下代码无效&…...
云计算的发展历程与边缘计算
云计算的发展历程 初期发展（1960s-1990s） 概念萌芽：云计算的概念可以追溯到1960年代，当时约翰麦卡锡（John McCarthy）提出了“计算将来可能成为一种公共设施”的想法。这个概念类似于现代的云计算…...
199.二叉树的右视图（DFS）
给定一个二叉树的根节点 root，想象自己站在它的右侧，按照从顶部到底部的顺序，返回从右侧所能看到的节点值。 示例 1: 输入: [1,2,3,null,5,null,4] 输出: [1,3,4] 示例 2: 输入: [1,null,3] 输出: [1,3] 示例 3: 输入: [] 输出: [] 解题…...
机器学习基础入门（1）
最近也在努力的想要学习些机器学习的知识，目前正在了解各个概念及术语，下面就把学习到的概念都列出来。 人工智能 (AI) Artificial intelligence 人工智能生成内容（AIGC） 机器学习（ML） Machine Learning …...
mybatis的xml中，where标签不自动删除多余的and之类的问题
遇到了这个莫名其妙的问题，起初是很疑惑的，where标签好像失灵了一般不会自动删除掉 多余的and 看了眼sql语句，发现还是有and没被删除。 后来重新写了遍后发现又没事了。真的是神人。 然后就研究了好一会，发现！&#…...
RK3588 编译opencvopencv_contrib记录
RK3588 编译opencv&opencv_contrib记录 1. 下载文件1.1 opencv源码1.2 安装cmake 2.开始编译2.1 提示缺少boostdesc_bgm.i 等问题2.2 提示缺少某hpp头文件2.3 其它问题 3. 设置环境变量4. 测试5.参考 1. 下载文件 1.1 opencv源码 需要opencv和opencv-contrib的版本号保持…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装： 下载安装DevEco Studio 4.0（支持HarmonyOS 5）配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化： ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile，新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版 图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
使用 SymPy 进行向量和矩阵的高级操作
在科学计算和工程领域，向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能，能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作，并通过具体…...
提升移动端网页调试效率：WebDebugX 与常见工具组合实践
在日常移动端开发中，网页调试始终是一个高频但又极具挑战的环节。尤其在面对 iOS 与 Android 的混合技术栈、各种设备差异化行为时，开发者迫切需要一套高效、可靠且跨平台的调试方案。过去，我们或多或少使用过 Chrome DevTools、Remote Debug…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日，在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上，可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞，强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...