目录
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); //异步任务2return 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再执行异步任务2test("异步任务1", 1000).then((res) => {//接收异步任务1成功,进行处理console.log(res)return test("异步任务2", 2000)//进行异步任务2的执行}).then((res) => {//接收异步任务2成功,进行处理console.log(res)}).catch((error) => {//接收失败,进行处理console.log(error)})