ES6基础----Promise的使用
目录
Promise 是 ES6 提出的解决异步编程的一种方法，主要是为了解决回调地狱的问题
1、异步编程的执行方式
2、回调地狱：需求：先执行完--异步任务1 之后再去执行--异步任务2 最后执行--异步任务3
3、Promise 是构造函数，可以直接 new ,后面有两个形参
（1）resovle 代表成功的返回
（2）reject 代表失败的返回
（3）Promise 后面是跟的回调函数，回调函数可以使用普通函数 ,也可以使用箭头函数
（4）Promise 有三个状态
4、使用 Promise 解决回调地狱
Promise 是 ES6 提出的解决异步编程的一种方法，主要是为了解决回调地狱的问题
1、异步编程的执行方式
console.log("同步任务1");
setTimeout(() =>{
console.log("异步任务1") //到达等待时间之后才执行，同时在等待的时候也执行下面的
},3000)
console.log("同步任务2")
setTimeout(() =>{
console.log("异步任务2")
},2000)
console.log("同步任务3")
setTimeout(() =>{
console.log("异步任务3")
},1000)2、回调地狱：需求：先执行完--异步任务1 之后再去执行--异步任务2 最后执行--异步任务3
//回调地狱，不断的异步任务嵌套 ---不断的嵌套会造成代码可靠性降低
setTimeout(() =>{
console.log("异步任务1")
setTimeout(() =>{
console.log("异步任务2")
setTimeout(() =>{
console.log("异步任务3")
},3000)
},2000)
},1000)3、Promise 是构造函数，可以直接 new ,后面有两个形参
（1）resovle 代表成功的返回
（2）reject 代表失败的返回
（3）Promise 后面是跟的回调函数，回调函数可以使用普通函数 ,也可以使用箭头函数
（4）Promise 有三个状态
pending--运行中 fulfilled--成功 rejected--失败
Resolver 将 pending 状态变为 fulfilled 状态
reject 将 pending 状态变为 fuldilled 状态
// 成功 失败
let pro=new Promise((resovle,reject) =>{
resovle("成功了");
reject("失败了"); //---必须注释一个，不注释只执行第一个
});
// .then() 方法接收 promise 成功和失败的值
//后面跟两个回调函数
//第一个回调函数处理成功的逻辑
//第二个回调函数处理失败的逻辑
//.then() 可以多个用，用 return返回决定下一个 的成功，return成功即执行成功，否则执行不成功的
console.log(pro); //Promise {<fulfilled>: '成功了'}
//第一个--成功
pro.then((res) =>{
console.log(res);
//第二个--失败
},(error)=>{
console.log(error);
});
.then() 接收成功的内容
.catch() 接收所有失败的内容
.finally() 不管 promise 是成功还是失败都会执行 .finally() 里面的内容
pro.then((res) => {
console.log("这是成功的值:"+res); //成功执行
}).catch((error) => {
console.log("这是失败的值:"+error);//失败执行
}).finally(()=> {
console.log("这是不管成功还是失败的值:123")//都会执行
})4、使用 Promise 解决回调地狱
let promise = new Promise((resovle, reject) => {
setTimeout(() => {
resovle("异步任务1")
}, 1000);
})
promise.then((res) => {
console.log(res); //异步任务2
return new Promise((resovle, reject) => {
setTimeout(() => {
resovle("异步任务2")
}, 1000);
})
})
.then((res) => {
console.log(res); //异步任务2
})//优化代码
//把公共部分提出来封装为单独的函数，实现代码复用
//数据通过传参的方式传入
function test(text, time) {
return new Promise((resovle, reject) => {
//如果有值成功，否则失败
if (text) {
setTimeout(() => {
resovle(text)
}, time)
} else {
reject("没有传入值")
}
})
}
//先执行异步任务1再执行异步任务2
test("异步任务1", 1000).then((res) => {//接收异步任务1成功，进行处理
console.log(res)
return test("异步任务2", 2000)//进行异步任务2的执行
}).then((res) => {//接收异步任务2成功，进行处理
console.log(res)
}).catch((error) => {//接收失败，进行处理
console.log(error)
})