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的版本号保持…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
关于 WASM：1. WASM 基础原理
一、WASM 简介 1.1 WebAssembly 是什么？ WebAssembly（WASM） 是一种能在现代浏览器中高效运行的二进制指令格式，它不是传统的编程语言，而是一种 低级字节码格式，可由高级语言（如 C、C、Rust&am…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别
【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而，传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案，能够实现大范围覆盖并远程采集数据。尽管具备这些优势…...
字符串哈希+KMP
P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...
路由基础-路由表
本篇将会向读者介绍路由的基本概念。 前言 在一个典型的数据通信网络中，往往存在多个不同的IP网段，数据在不同的IP网段之间交互是需要借助三层设备的，这些设备具备路由能力，能够实现数据的跨网段转发。 路由是数据通信网络中最基…...