Promise使用
Promise的使用
Es6中的Promise使得异步变得比同步变成简单，大大减少了代码量。
- 新建一个Promise对象
var p=new Promise()- 添加异步操作
在这里使用了jQuery，应该在文件中引入jQuery文件
var p=new Promise(function(resolve,reject)
{
$.ajax({
url:'arr.txt',
dataType:'json',
success(data){
resolve(data);},
error(err){
reject(err);}
})
})这里应该在Promise中传入一个函数，函数有两个参数，一个是resolve，就是在读取文件正确时，将读取到的数据传给这一个函数，另一个是reject，就是当读取文件错误的时候，将错误对象传给这一个函数。
3. then()
p.then(function(data){
console.log(data);},
function(){
console.log('错误');
})这里是读取完成后(可能读取成功，也可能读取失败)，执行的then操作。then的参数中有两个函数，就是第一个参数就是上述的resolve函数，第二个就是reject函数。
4.整体代码：
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle>
<script src="./jquery.min.js">script>
head>
<body>
<script>
var p=new Promise(function(resolve,reject){
$.ajax({
url:'arr.txt',
dataType:'json',
success(data){
resolve(data);},
error(err){
reject(err) }
}) })
p.then(function(data){
console.log(data);
},function(){
console.log('错误');
})
script>
body>
html>Promise.all()
- 基本使用
如果读取多个文件时，可以使用Promise.all()
Promise.all()里面传入一个参数------一个数组，就是数组里面存放着需要读取的对象
2.代码为：
<html lang="cn"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle>
<script src="./jquery.min.js">script>
head>
<body>
<script>
var p1=new Promise(function(resolve,reject){
$.ajax({
url:'arr.txt',
dataType:'json',
success(data){
resolve(data);
},
error(err){
reject(err)
}
})
});
var p2=new Promise(function(resolve,reject){
$.ajax({
url:'arr_2.txt',
dataType:'json',
success(data){
resolve(data);
},
error(err){
reject(err)
}
})
})
Promise.all([p1,p2]).then(data=>{
let [arr_1,arr_2]=data;
console.log(arr_1);
console.log(arr_2);
},error=>{
console.log('读取错误');
})
script>
body>
html>在jQuery中的promise
- 在jQuery中
$.ajax({url:'arr.txt',dataType:'json'})就是一个Promise对象 - 所以在Promise.all()中的数组中就可以直接将其传入，使代码更简洁
- 代码为：
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<script>
Promise.all([
$.ajax({
url:'arr.txt',dataType:'json'}), $.ajax({
url:'arr_2.txt',dataType:'json'}), ]).then(data=>{
let [arr_1,arr_2]=data;
console.log(arr_1);
console.log(arr_2);
},error=>{
console.log('错误'); })
</script>
</body>
</html>注意该例子需要在开启服务器才可以读取其中的问价，因为ajax如果不能直接从本地读取文件数据