【Vue】四、了解Promise

秒速五厘米 2023-10-09 15:16 25阅读 0赞

#### 后端程序员的vue学习之路 ####

*  一、了解Promise
 *   *  1、What is Promise？
     *  2、回调地狱问题
     *  3、Promise使用语法
     *  4、Promise实例对象
     *   *  1) Promise的状态
         *  2) Promise状态的改变
         *  3) Promise的结果
     *  5、Promise的方法
     *   *  then方法
         *  catch方法
         *  Promise链式调用
     *  优化回调地狱

## 一、了解Promise ##

### 1、What is Promise？ ###

Promise翻译成中文是：许诺，承诺，答应，保证，代表了未来将要发生的事件的一个承诺；  
Promise是JavaScript异步编程解决方案之一，是为了解决请求回调地狱问题而提出的，是目前解决Javascript异步编程中最优雅的实现方案，在业界非常流行；  
Promise是基于Promise / A++规范：https://promisesaplus.com/ ；  
Promise有各种开源实现，在ECMAScript 6中被统一规范，由浏览器直接支持，在不支持ECMAScript 6的浏览器中不被支持，先测试一下你的浏览器是否支持Promise：

如果不报错，表示支持Promise；

### 2、回调地狱问题 ###

$.ajax({
        
        url: 'https://www.baidu.com',
        success: function (res) {
        
            $.ajax({
        
                url: 'https://www.taobao.com',
                type: 'GET',
                data: {
        
                    accountId: 123456
                },
                success:function(res){
        
                    $.ajax({
        
                        url: 'https://www.tencent.com',//地址随便写的
                        type: 'GET',
                        data: {
        
                            accountId: 123456
                        },
                        success:function(res){
        
                            $.ajax({
        
                                url: 'https://www.douban.com',//地址随便写的
                                type: 'GET',
                                data: {
        
                                    accountId: 123456
                                },
                                success:function(res){
        
                                    console.log(res);
                                }
                            });
                        }
                    });
                }
            });
        }
    });
    $.ajax()中回调函数嵌套过多，回掉函数中再嵌套回调，导致回调地狱，那么Promise解决了回调地狱问题；

### 3、Promise使用语法 ###

new Promise(( reslove, reject ) =>\{\})  
其中括号里面的 ( reslove, reject ) =>\{\} 是箭头函数；  
• Promise构造器接收一个函数作为参数  
• 这个函数中又可以接收两个参数，这两个参数又是函数；  
• resolve: 是处理成功的函数  
• reject: 是处理失败的函数  
示例：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    
    <body>
        <div id="app">
            Promise test01
        </div>
    
        <script type="text/javascript">
            //构造方法需要有参数
            // var p = new Promise()
            // console.log(p)
    
            // var a = new Promise(() => {})
            // console.log(a)
            
            var b = new Promise((reslove) => {
        })
            console.log(b)
    
            var c = new Promise((reslove, reject) => {
        })
            console.log(c)
    
            var d = new Promise((reslove, reject, err, aa, bb, cc) => {
        })
            console.log(d)
    
        </script>
    </body>
    
    </html>

### 4、Promise实例对象 ###

创建出来的promise实例有两个属性  
• PromiseState: 状态属性  
• PromiseResult: 结果属性

#### 1) Promise的状态 ####

第一种状态: pending，未处理，等待处理的一种状态；  
第二种状态: fulfilled，已处理，处理成功的一种状态；  
第三种状态: rejected，已处理，处理失败的一种状态；

#### 2) Promise状态的改变 ####

Promise状态的改变是一次性的，不能同时fulfilled又rejected；  
举例：

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test02</title>
    </head>
    
    <body>
        <div id="app">
            Promise test02
        </div>
    
        <script type="text/javascript">
    
            var c = new Promise((reslove, reject) => {
        
                //调用该函数, 使当前Promise对象的状态改成fulfilled
                reslove() 
                
                //调用该函数, 使当前Promise对象的状态改成rejected
                reject()
            })
    
            console.log(c)
    
        </script>
    </body>
    
    </html>

#### 3) Promise的结果 ####

举例：test03.html

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test03</title>
    </head>
    
    <body>
        <div id="app">
            Promise test03
        </div>
    
        <script type="text/javascript">
    
            var c = new Promise((reslove, reject) => {
        
                //通过调用reslove函数传递参数，改变当前Promise对象的结果
                //reslove("成功的结果");
    
                reject("失败的结果")
            })
            console.log(c)
    
        </script>
    </body>
    
    </html>

### 5、Promise的方法 ###

#### then方法 ####

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test05</title>
    </head>
    
    <body>
        <div id="app">
            Promise test05
        </div>
    
        <script type="text/javascript">
    
            var p = new Promise((resolve, reject) => {
        
                //通过调用reslove函数传递参数，改变当前Promise对象的结果
                //resolve("成功的结果");
    
                reject("失败的结果")
            })
            console.log(p)
    
            //then方法函数
            //两个参数都是函数
            //返回值: 是一个Promise对象
            p.then(()=>{
        
                //当Promise的状态是fulfilled时执行
                console.log("成功的回调")
            },()=>{
        
                //当Promise的状态是rejected时执行
                console.log("失败时调用")
            })
    
        </script>
    </body>
    
    </html>

#### catch方法 ####

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test10</title>
    </head>
    
    <body>
        <div id="app">
            Promise test10
        </div>
    
        <script type="text/javascript">
            //catch中的参数函数在什么时候被执行
            //1.当Promise的状态改为rejcted被执行
            //2.当Promise执行体重出现代码错误时被执行
            
            var p = new Promise((resolve, reject) => {
        
                //reject("失败")
                //console.log(a)
                throw new Error("出错了");
            })
    
            var t = p.then((msg) => {
        
                console.log(msg)
            })
    
            t.catch((err) => {
        
                console.log("catch", err)
            })
        </script>
    </body>
    
    </html>

#### Promise链式调用 ####

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>test11</title>
    </head>
    
    <body>
        <div id="app">
            Promise test11
        </div>
    
        <script type="text/javascript">
            new Promise((resolve, reject) => {
        
                resolve("执行成功")
            }).then((msg) => {
        
                console.log(msg)
                return "OK"
            }).then((msg) => {
        
                console.log(msg)
                return "SUCCESS"
            }).then((msg) => {
        
                console.log(msg)
                console.log(msg2)
            }).catch((err) => {
        
                console.log(err)
            })
        </script>
    </body>
    
    </html>

### 优化回调地狱 ###

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <script src="js/jquery-3.6.0.min.js"></script>
        <title>test12</title>
    </head>
    
    <body>
        <div id="app">
            Promise test12
        </div>
    
        <script type="text/javascript">
            //封装ajax请求
            function getData(url, data = {
        }) {
        
                return new Promise((resolve, reject) => {
        
                    $.ajax({
        
                        //发送请求类型
                        type: "GET",
                        url: url,
                        data: data,
                        success: function (res) {
        
                            // 修改Promise状态为成功, 修改Promise的结果res
                            resolve(res)
                        },
                        error: function (res) {
        
                            // 修改Promise的状态为失败,修改Promise的结果res
                            reject(res)
                        }
                    })
                })
            };
    
            //调用函数
            getData("http://localhost:8080/info")
                .then((res) => {
        
                    console.log(res)
                    const {
         id } = res //对象解构赋值，ECMAScript 6里面的特性
                    return getData("http://localhost:8080/info2")
                }).then((res) => {
        
                    console.log(res)
                    const {
         name } = res
                    return getData("http://localhost:8080/info3")
                }).then((res) => {
        
                    console.log(res)
                }).catch((err) => {
        
                    console.log(err)
                })
        </script>
    </body>
    
    </html>