VUE前后端交互之promise的用法
2023-06-07 本文已影响0人
小黄不头秃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
promise用法：
异步调用：
（1）定时任务
（2）Ajax
（3）事件函数
多次异步调用的依赖分析
多次异步调用的结果顺序不确定
异步调用结果如果存在依赖需要嵌套
-->
<!--
promise是异步编程的一种解决方式，从语法上来讲，promise是一个对象，从他可以获取异步操作的消息
使用promise主要有以下好处：
（1）可以避免多层异步调用的嵌套问题（回调地狱）
（2）promise对象提供了简洁的api，使得控制异步操作更加容易
-->
<!--
promise基本使用
实例化promise对象，构造函数传递函数，该函数中用于处理异步任务
resolve和reject两个参数用于处理成功和失败的两种情况，并且通过p.then获取处理的结果
var p = new Promise(function(resolve,reject){
// 成功时调用resolve（）
// 失败时调用reject（）
});
p.then(function(ret){},function(ret){});
-->
<div>前后端交互</div>
<script src="./vue/vue.js"></script>
<script>
// $.ajax({
// url:"",
// success:function(data){
// console.log();
// }
// }
// );
var p = new Promise(function(resolve,reject){
// 实现异步任务
setTimeout(function(){
var flag =false;
if(flag){
//正常情况
resolve('hello');
}else{
reject('出错了');
}
},100);
});
p.then(function(data){
console.log(data);
},function(info){
console.log(info);
});
</script>
</body>
</html>
