浅谈对Promise的使用

拼搏现实的明天。 2023-10-11 15:54 7阅读 0赞

*  Promise简单上手  
    Promise对象的出现用于解决传统的ajax请求嵌套回调的问题。Promise对象通过new 关键字创建，构造函数需要传递一个函数作为参数，并且该函数需要两个形参（resolve和reject）。如下

let p = new Promise((resolve,reject) => {
                   
         })

promise对象共有三种状态为成功、失败和触发。  
通常我们会在promise的构造函数中执行ajax查询，ajax查询成功则调用resolve方法，失败则调用reject方法。如下：

let p = new Promise((resolve,reject) => {
        
                    $.ajax({
        
                        url:"./data1.json",
                        data:{
        },
                        method:"get",
                        success(res){
        
                            resolve(res)
                        },
                        error(err){
        
                            reject(err)
                        }
                    })
                })

当请求成功后，调用了resolve方法，一旦调用了该方法，则p对象的状态就置为成功，然后就会触发p对象的then方法。如下：

let p = new Promise((resolve,reject) => {
        
                    $.ajax({
        
                        url:"./data1.json",
                        data:{
        },
                        method:"get",
                        success(res){
        
                            resolve(res)
                        },
                        error(err){
        
                            reject(err)
                        }
                    })
                })
    
    
                p.then(res => {
        
                    console.log(res)
                })

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70]这里ajax发送请求成功后我们调用resolve方法后触发了then方法的回调，我暂且理解为then回调为处理ajax请求成功的逻辑，catch回调为处理ajax请求失败的逻辑。

*  then方法返回值  
    then方法的返回值有两种情况，首先说明一下，then方法永远返回Promise对象。

1.  then方法的返回值为非promise对象，如return 123

let p = new Promise((resolve,reject) => {
        
                    $.ajax({
        
                        url:"./data1.json",
                        data:{
        },
                        method:"get",
                        success(res){
        
                            resolve(res)
                        },
                        error(err){
        
                            reject(err)
                        }
                    })
                })
    
    
                var result =  p.then(res => {
        
                    console.log(res)
                    return 123
                })
    
                console.log(result)

输出结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70 1]当then方法的返回值为非promise对象是，则then方法的返回值为promise对象，且该对象的状态为成功，成功的值就是返回值。

1.  then方法的返回值为promise对象

let p = new Promise((resolve,reject) => {
        
                    $.ajax({
        
                        url:"./data1.json",
                        data:{
        },
                        method:"get",
                        success(res){
        
                            resolve(res)
                        },
                        error(err){
        
                            reject(err)
                        }
                    })
                })
    
    
                var result =  p.then(res => {
        
                    console.log(res)
                    return new Promise((resolve,reject) => {
        
    
                    })
                })
    
                console.log(result)

结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70 2]当then方法返回的promise对象的函数中没有调用resolve或者reject，则返回的promise对象的状态为触发状态。

调用resolve方法

var result =  p.then(res => {
        
                    console.log(res)
                    return new Promise((resolve,reject) => {
        
                        resolve("Hello")
                    })
                })
    
                console.log(result)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70 3]如果调用了resolve的返回的promise对象的状态就为成功，此时就会调用这个对象的then方法。同样，如果调用的reject则会调用该对象的catch方法  
![在这里插入图片描述][20210716172028942.png]

利用这个特性我们就可以进行链式调用，解决回调嵌套问题。

案例：利用Promise顺序读取文件

function axiosPost(url,data){
        
                   return new Promise((resolve,reject)=>{
        
                        $.ajax({
        
                            url,
                            data,
                            method:"get",
                            success(res){
        
                                resolve(res)
                            },
                            error(er){
        
                                reject(er)
                            }
                        })
                   })
               }
    
               axiosPost("./data1.json",{
        })
                .then(res => {
        
                    console.log(res)
                    return axiosPost("./data2.json",{
        })
                })
                .then(res => {
        
                    console.log(res)
                    return axiosPost("./data3.json",{
        })
                })
                .then(res => {
        
                    console.log(res)
                })
               }

首先我们调用了 axiosPost函数，返回了Promise对象，而且在第一次调用中请求了data1.json文件进行了输出，在then方法中又调用了axiosPost方法，此时then方法的返回值是一个Promise对象，那既然是一个Promise对象，则该对象的状态取决于对象构造函数中调用了哪个方法，请求成功以后调用resolve，则该对象的状态为成功，一旦为成功触发then方法，继续请求data3.json。这样写的代码不会出现多层嵌套，很方便解决了回调地狱问题。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210716165658602.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210716171300907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210716171541881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2021071617172356.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzUwNjU2,size_16,color_FFFFFF,t_70
[20210716172028942.png]: https://img-blog.csdnimg.cn/20210716172028942.png