弹框确认按钮，请求两个接口跳转刷新页面,并使用async和await将异步改成同步的数据?_办公生活

弹框确认按钮，请求两个接口跳转刷新页面,并使用async和await将异步改成同步的数据?

创始人

2024-01-20 17:28:36

前景：公司前后端不分离项目，使用的框架element-ui较低版本的，弹框确定按钮加载动态按钮的loading。

//插件
npm i element-ui -S

效果图:

在这里插入图片描述

在这里插入图片描述
代码:

在这里插入图片描述

例子：
加载loading效果，并使用async await同步操作，确定按钮加载2个api的时候的，可以使用定时器setTimeout()。

setTimeout和setInterval区别:

setTimeout和setInterval都属于JS中的定时器，可以规定延迟时间再执行某个操作，不同的是setTimeout在规定时间后执行完某个操作就停止了，而setInterval则可以一直循环下去。

async、await详解：

1.同步代码编写方式:Promise使用then函数进行链式调用，一直点点点，是一种从左向右的横向写法；async/await从上到下，顺序执行，就像写同步代码一样，更符合代码编写习惯；

2.同步代码和异步代码可以一起编写:使用Promise的时候最好将同步代码和异步代码放在不同的then节点中，这样结构更加清晰；async/await整个书写习惯都是同步的，不需要纠结同步和异步的区别，当然，异步过程需要包装成一个Promise对象放在await关键字后面。

3.async和await的基础使用

async/awiat的使用规则:

async 表示这是一个async函数， await只能用在async函数里面，不能单独使用
async 返回的是一个Promise对象，await就是等待这个promise的返回结果后，再继续执行
await 等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接就可以得到返回值

...其他代码省略了 弹窗的代码，请复制上面的。
确定

总结:记录一下,少走弯路!!!

上一篇：计算机网络-网络层（ARP协议，DHCP协议，ICMP协议）

下一篇：牛客竞赛每日俩题 - 动态规划2

热门资讯

猫咪吃了塑料袋怎么办猫咪误食... 你知道吗？塑料袋放久了会长猫哦！要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...

世界上最漂亮的人世界上最漂亮... 此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...

我喜欢你韩语怎么说 sikid...

埃菲尔铁塔在哪中国仿建埃菲尔... 2019年4月26日，广西南宁市，街头惊现一座巨型山寨版埃菲尔铁塔，高约20米，白色塔身，造型逼真，...

苗族的传统节日贵州苗族节日有... 【岜沙苗族芦笙节】岜沙，苗语叫“分送”，距从江县城7.5公里，是世界上最崇拜树木并以树为神的枪手部落...

北京的名胜古迹北京最著名的景... 北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...

应用未安装解决办法平板应用未... ---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...

脚上的穴位图脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用，包括头部穴位图、胸部穴位图、背部穴位图、胳...

长白山自助游攻略吉林长白山游... 昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...