您的位置:首页 > 健康 > 养生 > ES6基础----Promise的使用

ES6基础----Promise的使用

2024/10/6 14:23:56 来源:https://blog.csdn.net/weixin_69190490/article/details/141668176  浏览:    关键词: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); //异步任务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)})

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com