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的版本号保持…...
创业团队如何利用Taotoken进行多模型选型与成本控制
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 创业团队如何利用Taotoken进行模型选型与成本控制 对于初创团队的技术负责人而言，在有限的预算下既要满足快速迭代的产…...
在taotoken用量看板中清晰追踪每个项目的模型消耗
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 在taotoken用量看板中清晰追踪每个项目的模型消耗 对于依赖大模型进行开发的团队或个人而言，成本控制与预算管理是项目…...
【鸿蒙PC三方库移植适配框架解读系列】第五篇：完整流程图与角色职责
系列导读：本文是 Lycium 适配系列的第五篇，通过一张完整的流程图展示适配者、Lycium 框架和 OHOS SDK 三者之间的交互关系，并总结各环节的角色职责。 欢迎加入【开源鸿蒙PC社区】，一起共建鸿蒙化C/C三方库生态。 前言 项目说明m…...
基于LLM的智能体驱动文字冒险游戏引擎设计与实现
1. 项目概述：一个AI驱动的文字冒险游戏引擎最近在GitHub上闲逛，发现了一个挺有意思的项目，叫droxey/agentadventure。光看名字，大概能猜到它和“智能体”（Agent）以及“冒险”（Adventure…...
AI 驱动单元测试生成：智能优先级与自动化验证实践
1. 项目概述如果你和我一样，长期在维护一个中大型的 TypeScript 项目，那么“补单元测试”这件事，大概率是你技术债清单上那个永远在滚动、却很少被真正划掉的任务。手动写测试枯燥耗时，尤其是面对那些遗留的、逻辑复杂的业务函数时…...
React Native Actions Sheet源码解析：深入理解其架构与实现原理
React Native Actions Sheet源码解析：深入理解其架构与实现原理 【免费下载链接】react-native-actions-sheet A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance for react native. Create anything you want inside…...
【ElevenLabs API接入黄金手册】：20年AI语音工程师亲授5大避坑要点与3小时极速上线实战路径
更多请点击： https://intelliparadigm.com 第一章：ElevenLabs API接入黄金手册：开篇导论与核心价值定位 ElevenLabs 以行业领先的语音自然度、情感表现力与多语言支持能力，成为生成式AI语音服务的事实标准。其API并非仅提供TTS基…...
记一次ubuntu 22.04安装旧版 MongoDB 4.2
22.04版本比较新，由于mongodb 2.4太老了，安装会遇到问题。特此记录1. 下载mongodb包wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-ubuntu1804-4.2.24.tgz2. 解压到当前目录sudo tar -zxvf mongodb-linux-x86_64-ubuntu1804-4.2.24.tgz3.…...
ClawGuard：为Clawdbot AI智能体打造的安全监控与熔断防护系统
1. 项目概述：ClawGuard 是什么，以及为什么你需要它如果你正在使用或开发基于 Clawdbot 框架的 AI 智能体，那么“安全”和“可控”这两个词，大概率已经在你脑海里盘旋过无数次了。我接触过不少团队，从最初的兴奋于 AI 智…...
【Oracle数据库指南】第06篇：Oracle DML语句与事务控制——数据操作与ACID特性深度解析
上一篇【第05篇】Oracle子查询与集合操作——嵌套查询与结果合并全解析 下一篇【第07篇】SQL*Plus基础——登录、环境设置与缓冲区操作 摘要 本文全面讲解Oracle DML（数据操作语言）语句，包括INSERT、UPDATE、DELETE和MERGE的详细用法&#x…...