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

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

//插件
npm i element-ui -S

效果图:

在这里插入图片描述

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

<template>
	<div>
		<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
		<!-- :before-close="handleClose" 绑定一个函数：handleClose -->
		<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<span>这是一段信息</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
 
<script>
	export default {
		data() {
			return {
				dialogVisible: false,//默认是隐藏弹框
			};
		},
		methods: {
		//1.第一种操作：
		//before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起   效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑
		//	handleClose(done) {//关闭弹框事件
		//		this.$confirm('确认关闭？')
		//			.then(_ => {
		//				// 关闭方法-上方传的参数done
		//				done();
		//			})
		//			.catch(_ => {});
		//	},
		//2.第二种操作:
			handleClose(done) {//关闭弹框事件
			 //在关闭弹窗事件的时候对多选事件清除操作.注意是项目有这个需求的时候。
			 //单选的时候，不点击确定按钮下，关闭图标的操作事件
			 this.userInfo="";//清除单选双向数据绑定
			 this.dialogVisible=false;//关闭弹窗
		    },
		}
	};
</script>

在这里插入图片描述

例子：
加载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()，直接就可以得到返回值

...其他代码省略了 弹窗的代码，请复制上面的。
<el-button type="primary" :loading="btnLoading"   @click="submit">确定</el-button>
<script>
	export default {
	  data(){
	     return {
				btnLoading: false,
				//默认要设置为 loading 状态  true是加载 false是不加载状态
		  };
      }，
      methods: {
         //事件
         publicApiEvents(){//公共api
         $.post("cm/Controller.php?LastSeason",
                {
                    param:{
                        ssId : id
                    }
                },
                function(data,status) {
                //解析因为后台返回的数据不标准格式，才需要解析，标准的就不用了
                //$.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象。
                 const obj = jQuery.parseJSON(data);
                 //可以对拿到的数据做操作obj返回的是成功code==='0'
                 }
             });    
         },
      async  submit(){//确定事件
          this.btnloading = true;//加载的loading关闭
           //调用第一个接口
         await  this.publicApiEvents()
           //第二个接口
              $.post("cm/aController.php?aLastSeason",
                {
                    param:{//我这里参数是可以全局获取到
                        ssId : id,
                        season:season
                    }
                },
                function(data,status) {
                //解析因为后台返回的数据不标准格式，才需要解析，标准的就不用了
                //$.parseJSON() 函数用于将符合标准格式的的JSON字符串转为与之对应的JavaScript对象。
                 const obj = jQuery.parseJSON(data);
                 //可以对拿到的数据做操作obj返回的是成功code==='0'
                     if(obj.code==='0'){
                    setTimeout(() => {
                     this.btnloading = false;//开始加载
                     //跳转新页面并刷新页面
                     window.location.href = '/cm/scoreDetail.php?ssId=' +id; 
                    }, 700);
                 }
             });    
          
         }

       }
     }

</script>

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