Promise的应用
Posted Vodka~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Promise的应用相关的知识，希望对你有一定的参考价值。
const { RSA_PKCS1_OAEP_PADDING } = require('constants');
var fs = require('fs');
const { resolve } = require('path');
/*
在Ecmascript 6中新增了一个 API ，Promise(一个构造函数)
1.Promise容器: Promise本身不是异步的，但是内部封装存放了一个异步任务,
Pending(悬挂状态)里的异步任务变化结果只有两种function(resolved,rejected){}参数， 一是resolved(已解决)，二是rejected(未执行,失败)
*/
//2.创建 Promise 容器:一旦创建，就开始执行里面的代码
// var p1 = new Promise(function(resolve,reject){
// fs.readFile('./a.txt','utf-8',function(error,data){
// if(error){
// // console.log(error);
// //Promise容器中的异步任务失败后，把容器的Pending状态改为 Rejected
// reject(error);
// }else{
// // console.log(data);
// //Promise 容器中的异步任务成功后，把容器的Pending状态改为，Resolved
// resolve(data);
// }
// })
// });
// var p2 = new Promise(function(resolve,reject){
// fs.readFile('./b.txt','utf-8',function(error,data){
// if(error){
// // console.log(error);
// //Promise容器中的异步任务失败后，把容器的Pending状态改为 Rejected
// reject(error);
// }else{
// // console.log(data);
// //Promise 容器中的异步任务成功后，把容器的Pending状态改为，Resolved
// resolve(data);
// }
// })
// });
// var p3 = new Promise(function(resolve,reject){
// fs.readFile('./c.txt','utf-8',function(error,data){
// if(error){
// // console.log(error);
// //Promise容器中的异步任务失败后，把容器的Pending状态改为 Rejected
// reject(error);
// }else{
// // console.log(data);
// //Promise 容器中的异步任务成功后，把容器的Pending状态改为，Resolved
// resolve(data);
// }
// })
// });
/*例子：p1就是那个Promise，当p1成功创建后，然后(then)做指定操作， then 方法接收的第一个function就是Promise中的 resolve 函数，第二个是reject函数
下面这个例子就确保了异步执行的顺序，当Promise 完成p1对象的操作后，就在它的then中返回p2实例作为p1.then的第一个参数，即resolve()，
完成p2实例代码后，在p2的then中返回p3实例,最后再执行p3
*/
// p1.then(function(data){
// console.log(data);
// return p2;
// },function(error){
// console.log('读取a文件失败');
// }).then(function(dataTwo){
// //前一个then的resolve函数返回一个Promise实例，就是紧跟着的then函数的参数
// console.log(dataTwo);
// return p3
// },function(error){
// console.log('读取b文件失败');
// }).then(function(dataThree){
// console.log(dataThree);
// },function(error){
// console.log('读取c文件失败');
// });
//封装Promise-API
//Promise版本的readFile
function PReadFile(FilePath){
return new Promise(function(resolve,reject){
fs.readFile(FilePath,'utf-8',function(error,data){
if(error){
reject(error);
}else{
resolve(data);
}
});
});
}
//封装Promise对象的then方法里的输出函数
// function Pout(obj,NextObj){
// obj.then(function(data){
// console.log(data);
// if (NextObj != null) Pout(NextObj);
// },function(error){
// console.log(error);
// });
// }
var a = PReadFile('./a.txt');
var b = PReadFile('./b.txt');
var c = PReadFile('./c.txt');
a.then(function(data){
console.log(data);
return c;
},function(error){
console.log(error);
}).then(function(data){
console.log(data);
return b;
},function(error){
console.log(error);
}).then(function(data){
console.log(data);
},function(error){
console.log(error);
});
//简单Promise应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Promise应用场景</title>
</head>
<body>
<form action="./Promise应用场景.js" id='UserForm'>
</form>
<script type="text/template" id="tpl">
<div>
<label for="">用户名</label>
<input type="text" name="" value="{{ user.Username }}">
</div>
<div>
<label for="">年龄</label>
<input type="text" value="{{ user.Age }}">
</div>
<div>
<label for="">职业</label>
<select name="" id="">
{{ each jobs}}
{{ if user.Job == $value.id }}
<option value="{{ $value.id }}" selected>{{ $value.Job }}</option>
{{ else }}
<option value="{{ $value.id }}"> {{ $value.Job }} </option>
{{ /if }}
{{ /each }}
</select>
</div>
</script>
<!-- 引进模板引擎 -->
<script src="node_modules/art-template/lib/template-web.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
/*
-用户表
其中一个接口获取用户数据
职业的序号是两个表关联的主键
-职业信息表
其中一个接口获取所有的职业信息
*/
//这里的get 是 callback 方式的API，可以使用 Promise 来解决这个问题
//获取用户的接口,获取职业的接口,同时使用多个接口的数据时，要接口嵌套使用
// get('http://127.0.0.1:3000/User/19124',function(UserData){
// get('http://127.0.0.1:3000/Job',function(JobsData){
// var Jobdata = JSON.parse(JobsData);
// var User = JSON.parse(UserData);
// //模板引擎渲染
// var Html = template('tpl',{
// user: User,
// jobs: Jobdata
// });
// document.querySelector('#UserForm').innerHTML=Html;
// });
//});
//Jquery里的Promise应用，定义一个全局变量对象，用于接收不同异步的返回结果,异步编程多时，使用Promise可以让代码更简洁优雅
// var Data = {};
// $.get('http://127.0.0.1:3000/User/19123')
// .then(function(UserData){
// Data.user = UserData;
// return $.get('http://127.0.0.1:3000/Job');
// })
// .then(function(JobsData){
// Data.Jobs = JobsData;
// var Html = template('tpl',{
// user: Data.user,
// jobs: Data.Jobs
// });
// document.querySelector('#UserForm').innerHTML = Html;
// });
//封装Promise版本的Ajax
function Pget(url){
return new Promise(function(resolve,reject){
var oReq = new XMLHttpRequest();
oReq.onload = function(){
resolve(JSON.parse(oReq.responseText));
}
oReq.onerror = function(error){
reject(error);
}
oReq.open("get",url,true);
oReq.send();
});
}
Pget('http://localhost:3000/User/19124')
.then(function(data){
console.log(data);
});
//不带Promise版本的Ajax
// function get(url,callback){
// var oReq = new XMLHttpRequest();
// //加载成功后，需要调用指定函数
// oReq.onload = function(){
// //现在需要得到这里的 oReq.responseText
// callback(oReq.responseText);
// }
// /*
// xhrReq.open(method, url, async, user, password);
// async:
// 一个可选的布尔参数，表示是否异步执行操作，默认为true。
// 如果值为false，send()方法直到收到答复前不会返回。
// 如果true，已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true，否则将引发异常。
// */
// oReq.open("get",url,true);
// oReq.send();
// }
</script>
</body>
</html>
以上是关于Promise的应用的主要内容，如果未能解决你的问题，请参考以下文章