axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios
2024-05-12 12:35:59
目录
axios 的理解和应用
axios 特点：
使用 axios 发 ajax请求
1. 发送 GET 请求
axios get完整版：
axios get精简版：
axios get请求发送时携带query参数：
axios get携带 query参数完整版：
axios get携带 query参数精简版：
发送 POST 请求:
axios post完整版：
axios post精简版：
发送 PUT 请求:
axios put完整版：
axios put精简版：
发送 DELETE 请求：
axios DELETE 代码：
axios 常用配置：
axios 可以全局配置：
axios.create(config)配置一个新的axios
axios 的理解和应用
axios 是什么？
前端最流行的 ajax 的请求库
React/Vue 官方都推荐使用 axios 发 ajax 请求
文档：http://github.com/axios/axios
axios 特点：
- 基本 promise 的异步 ajax 请求库
- 浏览器 / node 端都可以使用
- 支持请求 / 响应拦截器
- 支持请求取消
- 请求 / 响应数据转换
- 批量发送多个请求
使用 axios 发 ajax请求
- axios 调用的返回值是 promise 实例
- 成功的值叫 response ，失败的值叫 error
- axios 成功的值是一个 axios 封装的 response 对象，服务器返回的真正数据在 response.data 中
1. 发送 GET 请求
<body><button id="btn">点我获取所有人的信息</button><script>//获取按钮const btn = document.getElementById('btn');//获取所有人的信息 发送GET请求 --- 不携带参数 btn.onclick = () => {//此处写axios代码！}</script>
axios get完整版：
const result = axios({url: 'http://localhost:5000/persons',//请求地址method: 'GET',//请求方式
});result.then(response => {console.log('请求成功了！', response.data);},error => {console.log('请求失败了，', error);}
);
axios get精简版：
axios.get('http://localhost:5000/persons').then(response => { console.log('请求成功了！', response.data); },error => { console.log('请求失败了，', error); }
);
axios get请求发送时携带query参数：
<body><button id="btn1">点我获取所有人的信息</button><br><br><button id="btn2">点我获取某个人的信息</button><input type="text" id="person_id" placeholder="请输入id"><!--
1. axios 调用的返回值是 promise 实例
2.成功的值叫 response，失败的值叫 error
3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中
4.携带query参数时，编写的配置项叫做params
--><script>//获取按钮const btn1 = document.getElementById('btn1');const btn2 = document.getElementById('btn2');const personId = document.getElementById('person_id');//获取所有人的信息 发送GET请求 --- 不携带参数 btn1.onclick = () => {...........}//获取某个人的信息 发送get请求 --- 携带query参数btn2.onclick = () => {//此处写入axios代码}</script>
</body>
axios get携带 query参数完整版：
axios({url:'http://localhost:5000/person',method:'GET',params:{id:personId.value}//此处写的params但其实传的是query参数
}).then(response =>{console.log('成功了',response.data);},error =>{console.log('失败了',error);}
)
axios get携带 query参数精简版：
axios.get('http://localhost:5000/person',{params:{id:personId.value}},).then(response =>{console.log('成功了',response.data);},error =>{console.log('失败了',error);}
)
发送 POST 请求:
<body><button id="btn1">点我获取所有人的信息</button><br><br><button id="btn2">点我获取某个人的信息</button><input type="text" id="person_id" placeholder="请输入id"><button id="btn3">点我添加一个人</button><input type="text" id="person_age" placeholder="请输入age"><input type="text" id="person_name" placeholder="请输入name"><br><br><script>//获取按钮const btn1 = document.getElementById('btn1');const btn2 = document.getElementById('btn2');const btn4 = document.getElementById('btn4');const personId = document.getElementById('person_id');const personAge = document.getElementById('person_age');const personName = document.getElementById('person_name');//获取所有人的信息 发送GET请求 --- 不携带参数 btn1.onclick = () => {...........}//获取某个人的信息 发送get请求 --- 携带query参数btn2.onclick = () => {...........}//添加某个人 发送post请求 --- 携带请求体body参数btn3.onclick = () =>{//此处写入axios代码}</script>
</body>
axios post完整版：
axios({url:'http://localhost:5000/person',method:'POST',// data:{name:personName.value,age:personAge.value},//携带请求体参数(默认json编码)data:`name=${personName.value}&age=${personAge.value}`,//携带请求体参数(urlencoded编码)
}).then(response =>{console.log('成功了'+response.data);},error =>{console.log('失败了'+error);}
)
axios post精简版：
//使用对象就会默认是json编码模式
//axios.post('http://localhost:5000/person',{name:personName.value,age:personAge.value}).then(
//是用字符串就会默认是urlencoded编码模式
axios.post('http://localhost:5000/person',`name=${personName.value}&age=${personAge.value}`).then(response =>{console.log('成功了'+response.data);},error =>{console.log('失败了'+error);}
)
备注：axios 底层源码中也是写入一个判断，假如第二个空中为对象则使用 JSON.stringify 来解码，假如第二个空为模板字符串则使用urlencoded方式来解码。
发送 PUT 请求:
<body><button id="btn1">点我获取所有人的信息</button><br><br><button id="btn2">点我获取某个人的信息</button><input type="text" id="person_id" placeholder="请输入id"><br><br><button id="btn3">点我添加一个人</button><input type="text" id="person_age" placeholder="请输入age"><input type="text" id="person_name" placeholder="请输入name"><br><br><button id="btn4">点我更新一个人</button><input type="text" id="person_update_id" placeholder="请输入一个人的id"><input type="text" id="person_update_age" placeholder="请输入一个人的年龄"><input type="text" id="person_update_name" placeholder="请输入一个人的姓名"><script>//获取按钮const btn1 = document.getElementById('btn1');const btn2 = document.getElementById('btn2');const btn3 = document.getElementById('btn3');const btn4 = document.getElementById('btn4');const personId = document.getElementById('person_id');const personAge = document.getElementById('person_age');const personName = document.getElementById('person_name');const personUpdateId = document.getElementById('person_update_id');const personUpdateAge = document.getElementById('person_update_age');const personUpdateName = document.getElementById('person_update_name');//获取所有人的信息 发送GET请求 --- 不携带参数 btn1.onclick = () => {........}//获取某个人的信息 发送get请求 --- 携带query参数btn2.onclick = () => {........}//添加某个人 发送post请求 --- 携带请求体body参数btn3.onclick = () => {........}//更新一个人 发送PUT请求--携带json编码参数 或 urlencoded编码btn4.onclick = () => {//此处写入axios代码}</script>
</body>
axios put完整版：
//完整版
axios({url: 'http://localhost:5000/person',method: 'PUT',data:{id:personUpdateId.value,name:personUpdateName.value,age:personAge.value}
}).then(response => { console.log('成功了' + response.data); },error => { console.log('失败了' + error); }
)
axios put精简版：
//精简版
axios.put("http://localhost:5000/person",{id:personUpdateId.value,name:personUpdateName.value,age:personAge.value,
}).then(response => { console.log('成功了' + response.data); },error => { console.log('失败了' + error); }
)
发送 DELETE 请求：
<body><button id="btn1">点我获取所有人的信息</button><br><br><button id="btn2">点我获取某个人的信息</button><input type="text" id="person_id" placeholder="请输入id"><br><br><button id="btn3">点我添加一个人</button><input type="text" id="person_age" placeholder="请输入age"><input type="text" id="person_name" placeholder="请输入name"><br><br><button id="btn4">点我更新一个人</button><input type="text" id="person_update_id" placeholder="请输入一个人的id"><input type="text" id="person_update_age" placeholder="请输入一个人的年龄"><input type="text" id="person_update_name" placeholder="请输入一个人的姓名"><br><br><button id="btn5">点我删除一个人</button><input type="text" id="person_delete_id" placeholder="请输入一个人的id"><!--
1. axios 调用的返回值是 promise 实例
2.成功的值叫 response，失败的值叫 error
3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中
4.携带query参数时，编写的配置项叫做params
5.携带params参数时，就需要自己手动拼在URL中
--><script>//获取按钮const btn1 = document.getElementById('btn1');const btn2 = document.getElementById('btn2');const btn3 = document.getElementById('btn3');const btn4 = document.getElementById('btn4');const btn5 = document.getElementById('btn5');const personId = document.getElementById('person_id');const personAge = document.getElementById('person_age');const personName = document.getElementById('person_name');const personUpdateId = document.getElementById('person_update_id');const personUpdateAge = document.getElementById('person_update_age');const personUpdateName = document.getElementById('person_update_name');const personDeleteId = document.getElementById('person_delete_id');//获取所有人的信息 发送GET请求 --- 不携带参数 btn1.onclick = () => {.........}//获取某个人的信息 发送get请求 --- 携带query参数btn2.onclick = () => {.........}//添加某个人 发送post请求 --- 携带请求体body参数btn3.onclick = () => {........}//更新一个人 发送PUT请求--携带json编码参数 或 urlencoded编码btn4.onclick = () => {.........}//删除一个人 发送delete请求---携带params参数btn5.onclick = () => {//此处写入axios代码}</script>
</body>
axios DELETE 代码：
//使用的params参数的方式
axios({url:`http://localhost:5000/person/${personDeleteId.value}`,method:'DELETE',
}).then(response =>{console.log('成功了',response.data);},error =>{console.log('失败了',error);}
)
axios 常用配置：
axios({url:"http://localhost:5000/test1",//请求地址method:'GET',//请求方式params:{delay:3000,b:2},//配置query参数data:{c:3,d:4},//配置请求体参数（json编码）data:`e=5&f=6`,//配置请求体参数（urlencoded编码）timeout:2000,//配置超市时间Headers:{demo:123},//配置请求头responseType: 'json'//配置响应数据的格式(默认是json)
})
axios 可以全局配置：
//给axios配置默认属性
axios.defaults.timeout= 2000;//配置了默认超时时间
axios.defaults.headers={school:'金科'};//配置每个请求的请求头都自带的内容
axios.defaults.baseURL='http://localhost:5000';
//配置请求的地址，若不配置，则axios默认从自身的地址发送请求；若配置了，写请求时不需要带以上写过的地址，只需要写后面的地址会自动拼接！
axios.create(config)配置一个新的axios
- 根据指定配置创建一个新的 axios ,也就是每个新 axios 都自己的配置
- 新的 axios 只是没有取消请求和批量发请求的方法，其他所有的语法都是一致的，所以不是100%一样
- 为什么要这个语法？
需要：项目中有部分接口需要的配置与另一部分接口需要的配置不一样
<body><button id="btn1">点我获取所有人</button><button id="btn3">点我获取笑话信息</button><script>const btn1 = document.getElementById('btn1');const btn3 = document.getElementById('btn3');//配置axios.create的内容const axios2 = axios.create({baseURL:'https//api.apiopen.top',timeout:3000,// headers:{name:'王成'}})//给axios配置默认属性axios.defaults.timeout = 2000;axios.defaults.headers = { school: '金科' };axios.defaults.baseURL = 'http://localhost:5000';btn1.onclick = () => {axios({..........}btn3.onclick = () => {axios2({url:'/getJoke',method:'GET',}).then(response =>{console.log('成功了',response.data);},error =>{console.log('失败了',error);})}</script>
</body>
备注：axios.create( ) 配置 需要写在 axios 全局配置的前面，否则会报错（目前版本0.27.2）之前某个版本可用
axios （get，post，put，delete），常用配置，全局配置，axios.create(config)配置一个新的axios相关推荐
- Web.Config配置详细说明
(一).Web.Config是以XML文件规范存储,配置文件分为以下格式 1.配置节处理程序声明 特点:位于配置文件的顶部,包含在<configSections>标志中. 2.特定 ...
- Seata 与 Nacos Config配置中心整合_03
前言:之前我们只将nacos注册中心和seata进行了整合,如果需要实现完整的功能还需要与nacos的配置中心进行整合. 文章目录 一.配置管理 1. 创建文件config.txt 2. 创建naco ...
- Ubuntu配置全局系统代理（常用工具配置）
Ubuntu配置全局系统代理(常用工具) 问题描述 解决方法 配置系统代理 终端部分配置 配置apt代理 配置curl,wget,pip代理 git相关代理的设置 配置docker代理 问题描述 公司 ...
- uni-app 全端通用组件库unify_Ui（全端兼容nvue和vue），所有组件全端兼容，可配置全局样样式，350+常用图标
简介 基于uni-app平台开发的一套轻量级全端UI框架,适用于nvue与vue页面,核心样式文件遵循weex规范编写,在uni.scss文件可配置全局的样式. 编写nvue或者vue文件使用unif ...
- vue引入全局静态变量_vue-cli4 全面配置(持续更新)
https://github.com/staven630/vue-cli4-configgithub.com vue-cli4 全面配置(持续更新) 细致全面的 vue-cli4 配置信息.涵盖了使 ...
- axios中并发、继发请求的全局loading设置
前言 项目中,全局loading一般是在整体内容区域进行展示,项目在调用接口的时候展示,接口调用完成后隐藏,防止在页面接口请求过程中用户进行意料之外的操作.这次就是对loading的一个处理过程 项目 ...
- 《SpringBoot从菜鸟到老鸟》之SpringBoot 如何配置全局的异常捕获
SpringBoot 如何配置全局的异常捕获 SpringBoot中自带的异常捕获机制返回的默认页面比较丑,对用户来说不够人性化. 所以这篇文章来讲解SpringBoot钟自定义全局异常捕获. 主要讲 ...
- Npm配置全局安装插件目录以及命令用法扩展
1 配置全局插件文件存放目录 说明:本地nodejs安装路径为:D:\Software\Nodejs 先在安装目录创建2个空的文件夹 cd /d D:\Software\Nodejs mkdir no ...
- 随笔-springBoot配置全局跨域
随笔-springBoot配置全局跨域 本文参考链接: 前端看视频学习vue使用axios进行Ajax请求,视频中使用nodemon创建的node-server,弄了半天一直说跨域.为了不浪费时间直接 ...
最新文章
- 工程建筑行业SAP整体解决方案
- c语言中如何将select出来的字段值赋给一个变量,sql server 重命名列（字段）
- Windows Hyper-V远程信息泄露漏洞CVE-2017-8712 影响Win2016和win10
- 如何让nRF52840 dongle化身为BLE sniffier (过程详细记录)
- php strstr 从尾部,PHP strstr() 和 strrchr() 详解
- HTML、JS、字符串的简单加密与解密
- 云图说｜应用魔方AppCube：揭秘码农防脱神器
- 甜品果汁饮品拍摄设计海报，美如蓬莱仙境！
- 生产者消费者伪码_[线程同步]生产者消费者代码实现
- 趣学 C 语言（九）—— 复杂指针解析
- Clipy 让苹果Mac复制粘贴发挥更强大的功能
- 拓端tecdat|R语言小数定律的保险业应用：泊松分布模拟索赔次数
- 为什么函数lamda显示权限不足_C++常用内置函数
- 计算机EXE文件改参数,exe文件修改器(eXeScope)
- 超简单！使用jQuery实现登录页面的“记住密码”功能
- 玩玩Linux云主机-安装MySQL ，The server quit without updating PID file，Linux chown 权限管理
- jdbc mysql url写法_详解数据库连接的URL的写法及总结
- 新南威尔士大学计算机博士申请,2020年新南威尔士大学博士申请时间
- Linux安装配置MySQL8.0 打war包 启动项目
- Symbian OS 精要