ES6Promise的then⽅法，Set集合实例，class类各个实现和继承（三）⽂章⽬录
1. ES6 Promise
Promise是ES6引⼊的异步编程的新解决⽅法，语法是它是⼀个构造函数，⽤来封装异步操作并可以获取其成功或失败的结果。
⼩插曲：
console.log(data)；正常打印data。
<(data；会打印出红⾊错误的data。
console.warn(data)；会打印出黄⾊警告的data。
1.1 Promise then⽅法
promise有三种情况：初始化，成功，失败(错误)。这⾥我们使⽤then⽅法来演⽰⼀下成功和失败后，产出的结果。
<!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>Document</title>
</head>
<body>
<script>
//实例化promise
//promise有三种情况：初始化，成功，错误。
const p =new Promise((resolve,reject)=>{
setTimeout(function(){
//如果数据调⽤成功，则使⽤resolve⽅法。成功后它会调⽤实例对象then⽅法的第⼀个携带value参数的函数。
let data ='数据库中的⽤户数据';
resolve(data);
},1000);
});
//打印promise实例化对象，可以看到有⼀个then⽅法
console.log(p);
//调⽤promise对象中的then⽅法
p.then((value)=>{
console.log(value);
},(reason)=>{
console.log(reason);
});
</script>
<script>
//实例化promise
//promise有三种情况：初始化，成功，错误。
const p =new Promise(function(resolve,reject){
setTimeout(function(){
//如果数据调⽤失败，则使⽤reject⽅法。失败后它会调⽤实例对象then⽅法的第⼆个携带reason参数的函数。
let err ='数据读取失败';
reject(err);
},1000);
});
//调⽤promise对象中的then⽅法
p.then(function(value){
console.log(value);
},function(reason){
console.log(reason);
});
</script>
</body>
</html>
1.2 Promise 读取⽂件
通过node.js和promise来实现读取⽂件。其实就是在原来的基础上⾯加了node.js中的fs模块与promise中的相关参数相结合的操作。
const fs =require('fs');
//使⽤ promise 封装
const p =new Promise((resolve,reject)=>{
//如果失败
if(err)reject(err);
//如果成功
resolve(data);
});
});
p.then((value)=>{
console.String());
},(reason)=>{
console.log("失败了！")
});
1.3 promise 封装ajax
就是将ajax封装到了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>Document</title>
</head>
<body>
<script>
//这⾥就是将ajax封装到了promise⾥⾯。
const p =new Promise((resolve, reject)=>{
//ajax的四个步骤
const xhr =new XMLHttpRequest();
xhr.open("GET",'p/getJoke');
xhr.send();
adyState ===4){
if(xhr.status >=200&& xhr.status <300){
sponse);
}else{
reject(xhr.status);
}
}
};
});
p.then((value)=>{
console.log(value);
},(reason)=>{
<(reason);
});
</script>
</body>
</html>
1.4 Promise then⽅法
⼀定要记住以下4种情况。
1.then⽅法返回的是⾮promise类型。
filter过滤对象数组2.then⽅法返回的是promise类型。
3.then⽅法返回throw，抛出错误。
4.then⽅法不返回，默认是undefined，不会报错。
对于上⾯，第⼀种情况，如果then⽅法返回的结果是⾮promise类型，并且状态为成功，则返回值为对象成功的值。第⼆种情况，对于then⽅法的返回结果是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>Document</title>
</head>
<body>
<script>
//创建promise对象
const p =new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("⽤户数据");
/
/ reject("错误");
},1000);
});
const result = p.then(value =>{
console.log(value);
//1. ⾮promise类型的属性
// return '⾮promise';
//2. 是promise对象。对应两种resolve正常抛出和reject错误抛出
// return new Promise((resolve,reject)=>{
// // resolve('ok'); //resolve正常抛出
// reject('error'); //使⽤reject抛出错误
/
/ });
// 3. throw 抛出错误
// throw "error";
},reason =>{
console.warn(reason);
});
console.log(result);
</script>
</body>
</html>
1.5 Promise then⽅法读取多个链式⽂件异步
完成类似的这种链式关系，可以再次在then⽅法内返回⼀个Promise对象，这就是⼀个重点。案例：
const fs =require('fs');
const{ resolve }=require('path/posix');
// 通过promise来实现下⾯注释代码的内容。
// fs.readFile("./fs/测试.md",(err,data)=>{
// fs.readFile("./fs/测试2.md",(err2,data2)=>{
/
/ fs.readFile("./fs/测试3.md",(err3,data3)=>{
// let result = `${data}${data2}${data3}`;
// console.log(result);
// });
// });
// });
const p =new Promise((resolve, reject)=>{
resolve(data);
});
});
p.then((value)=>{
//完成上⾯的那种链式关系，可以再次在then⽅法内返回⼀个Promise对象。
return new Promise((resolve, reject)=>{
resolve([value, data]);
});
})
}).then((value)=>{
return new Promise((resolve, reject)=>{
//此时这⾥的value已经是⼀个数组了。
value.push(data);
resolve(value);
})
});
}).then((value)=>{
//打印上⾯的三个结果
console.log(value.join('\r\n'));//将数组内的结果进⾏拼接，添加上回车。
});
1.6 Promise catch
catch和then⽅法没多⼤区别，都可以抛出错误。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论