Promise!!!!!!!

最新推荐文章于 2024-08-06 08:50:34 发布

未烟寻

最新推荐文章于 2024-08-06 08:50:34 发布

阅读量82

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_52513740/article/details/119480245

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Promise用于处理异步操作，它将请求代码与处理代码分离，通过resolve和reject改变状态。当状态由pending变为fulfilled或rejected时，分别触发.then()和.catch()。在处理多个请求时，可以使用Promise.all()对请求进行封装，所有请求完成后一起处理结果。Promise能有效解决回调地狱问题，提高代码可读性和维护性。

摘要由CSDN通过智能技术生成

什么时候使用promise

一般情况下是有异步操作,对异步操作进行封装

Promise的基本语法

 new Promise((resolve,reject)=>{      //resolve与reject都是函数
            setTimeout(() => {
                resolve()     //成功的时候调用resolve
                reject()      //失败的时候调用reject
        }, 1000) 
        })
        .then()
        .catch()

promise将请求的代码与处理代码进行分离,得到结果的处理代码存放于.then()之中,可以通过resolve函数将参数传到then()之中处理
例如:
在这里插入图片描述

        //第一次网络请求的代码
        new Promise((resolve,reject)=>{      //resolve与reject都是函数
            setTimeout(() => {
                resolve('hello.lily'),     //调用resolve后,便可调用then()
                reject('wrong net')     //调用reject后,便可调用catch()
        }, 1000) 
        })
            //第一次拿到结果的处理代码
        .then((data)=>{
            console.log(data);

                    //第二次网络请求的代码
            	return new Promise((resolve,reject)=>{
                	setTimeout(() => {
                	resolve()     
                	}, 1000) 

            		})
        .catch((data)=>{
                console.log(data);
            })

promise的简写形式
return Promise.resolve(参数)
在这里插入图片描述
也可以通过
throw '参数' 来传递参数到下一个then或者reject

promise的三种状态

pending:等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill:满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
reject:拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

解决回调地狱

在这里插入图片描述

promise的all方法

对多个请求进行包装
例如:

Promise.all([
            new Promise((resolve,reject)=>[   //用一个数组将请求放在一起
                $ajax({
                            url:'url1',
                            success:function(data1){
                                    resolve(data1)
                            }
                }),
                $ajax({
                            url:'url2',
                            success:function(data2){
                                resolve(data2)
                            }
                })


                        
        ]).then(results=>{   //then中会被传递一个数组,不同下标不同的请求
            results[0]
            results[1]
        })