前端(Axios和Promis)

news/2024/12/15 5:04:12/

Promise

语法

 <script>// 创建promise对象// 此函数需要再传入两个参数,都是函数类型let p=new Promise((resolve,reject)=>{if(3>2){resolve({name:"李思蕾",age:23,地址:"河南省"});}else{reject("error");}});console.log(p);p.then((o)=>{console.log(o)},(e)=>{console.log(e)})</script>

Promise封装Ajax

<script>let p=new Promise((resolve,reject)=>{let xhr=new XMLHttpRequest();xhr.open("get","https://jsonplaceholder.typicode.com/users");xhr.send();xhr.onreadystatechange=function(){if(xhr.readyState==4){if(xhr.status==200){resolve(xhr.response);}else{reject("获取失败")}}}});p.then(a=>{console.log(a)},b=>{console.log(b)})
</script>

Axios

语法

服务器Server.js(处理请求,并响应数据)

<script>let data=axios.get("http://localhost:3000",{params:{name:"李四",age:24}})data.then((a)=>{console.log(a.data)//请求成功后的数据},(b)=>{console.log("error")//请求失败后提示})
</script>
 客户端向服务器发送请求 
<script>let person=[{name:"李四",age:24},{name:"李四",age:24},{name:"李四",age:24},{name:"李四",age:24},{name:"李四",age:24},{name:"李四",age:24},{name:"李四",age:24}]let data=axios.get("http://localhost:3000",{params:person})data.then((a)=>{console.log(a.data)//请求成功后的数据},(b)=>{console.log("error")//请求失败后提示})
</script>
优化后Axios写法 
<script>let person=[{name:"王五",age:24}]let http=axios.create({baseURL:'http://localhost:3000'});let p= http.get("",{params:person})p.then((a)=>{console.log(a.data)//请求成功后的数据},(b)=>{console.log("error")//请求失败后提示})
</script>
拦截器 
<script>let person=[{name:"王五",age:24}]let http=axios.create({baseURL:'http://localhost:3000'});http.interceptors.request.use((request)=>{return request})http.interceptors.response.use((response)=>{return response.data;})let p=http.get("",{params:person})p.then((a)=>{console.log(a)//请求成功后的数据},(b)=>{console.log("error")//请求失败后提示})
</script>

http://www.ppmy.cn/news/1555214.html

相关文章

基于springboot的机器人学习交流网站系统

博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了多年的设计程序开发&#xff0c;开发过上千套设计程序&#xff0c;没有什么华丽的语言&#xff0c;只有实…

抓取价格数据,进行合同报价等工作已全面实现自动化

随着数字化转型的加速推进&#xff0c;企业面临的市场竞争日益激烈。为了在激烈的市场中保持竞争力&#xff0c;企业需要更快速、更高效地做出决策&#xff0c;尤其是在价格数据的抓取和合同报价环节。传统的手动操作方式不仅费时费力&#xff0c;还容易出错&#xff0c;拖慢了…

【C++】递归填充矩阵的理论解析与实现

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;问题描述&#x1f4af;递归实现&#x1f4af;参数解析函数参数详解填充顺序分析递归终止条件 &#x1f4af;示例解析第一层递归第二层递归第三层递归最终输出 &#x1f4af…

爬虫获取的数据能否用于商业分析?

根据搜索结果&#xff0c;爬虫获取的数据能否用于商业分析&#xff0c;主要取决于以下几个因素&#xff1a; 数据的合法性与合规性&#xff1a; 爬虫技术本身并不违法&#xff0c;关键在于使用的方式和目的。爬虫技术的使用必须遵守相关法律法规&#xff0c;如《反不正当竞争法…

Flume 测试 Kafka 案例

Flume Kafka 测试案例&#xff0c;Flume 的配置。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 a1.sources s1 a1.channels c1 a1.sinks k1 a1.sources.s1.type netcat a1.sources.s1.bind master a1.sources.s1.port 44444 a1.channels.c1.type memory a1.sinks.k1.ty…

EasyGBS点对点穿透P2P远程访问技术在安防视频监控中的应用

随着信息技术的快速发展&#xff0c;安防视频监控系统在公共安全领域的应用变得越来越广泛。传统的视频监控系统多依赖于中心服务器进行视频流的集中处理和分发&#xff0c;这不仅增加了网络带宽的负担&#xff0c;还可能成为系统性能瓶颈。为了解决这些问题&#xff0c;P2P&am…

【前端 Uniapp】使用Vant打造Uniapp项目(避坑版)

一、基本介绍 Uniapp 是基于 Vue.js 的开发框架&#xff0c;通过一套代码可以同时发布到多个平台的应用框架。而 Vant 是针对移动端 Vue.js 的组件库。通过这样的组合&#xff0c;我们可以快速构建出一个跨平台的移动应用。Vant 已经支持多种小程序和 H5 平台&#xff0c;也对…

亚信安全DeepSecurity完成与超云超融合软件兼容性互认

近日&#xff0c;亚信安全与超云数字技术集团有限公司&#xff08;以下简称“超云”&#xff09;联合宣布&#xff0c;亚信安全成功完成与超云超融合软件的产品兼容性互认证。经严格测试&#xff0c;亚信安全云主机安全DeepSecurity与超云FS5000增强型融合系统&#xff08;简称…