04 Promise的理解（Ajax）

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一、Promise是什么？

二、Promise语法

1.Promise的catch方法（捕获promise失败的时候的操作）

2.Promise中all与race方法

三、Promise工作原理

一、Promise是什么？

Promise，英文是许诺的意思，在Ajax中可理解为一件没有完成的事情，但是一定有结果的。

Promise是用来解决回调地狱问题的。

详情看下面的例子（类似于这种层层嵌套的语法结构我们称作为回调地狱）

04 Promise的理解（Ajax）_css3

04 Promise的理解（Ajax）_ajax_02

代码的层级开始层层递减这样的结构我们称之为回调地狱（层级多不方便修改与维护，看起来也难受）

为了解决这种回调地狱的问题，因此引入了Promise

结构如下：

04 Promise的理解（Ajax）_ajax_03

控制台查看，这样与第一种结果是一样的，但是这样写代码更加美观与可控性

04 Promise的理解（Ajax）_css3_04

如何解决的？

本质上来说是将第一次调用的返回值作为下次的调用者来用

二、Promise语法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 流程：1.创建实例对象
        const p = new Promise((resolve, reject) => {
            setTimeout(() => {
                if (1 > 0) {
                    resolve('ok')
                } else {
                    reject('not')
                }
            }, 1000)
        })

        // 2.调用实例化对象，成功输出1/ok，错误输出2/not
        p.then(res => {
            console.log(res);
            console.log(1);
        }, err => {
            console.log(err);
            console.log(2);
        })

    </script>
</body>

</html>

控制台查看，上面对了走resolve(),输出的ok1,如果上面if判断错误则走reject()err输出not2

04 Promise的理解（Ajax）_ajax_05

1.Promise的catch方法（捕获promise失败的时候的操作）

04 Promise的理解（Ajax）_前端_06

比如看这里，没有执行21行的代码，会直接直接下面错误的catch里面的函数

2.Promise中all与race方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>

    <script>
        const p1 = axios.get('http://ajax-api.itheima.net/api/province')
        const p2 = axios.get('http://ajax-api.itheima.net/api/city?pname=湖北省')
        const p3 = axios.get('http://ajax-api.itheima.net/api/area?pname=湖北省&cname=武汉市')

        // all方法：把多个promise方法合并成为一个promise对象 
        const pAll = Promise.all([p1, p2, p3])

        pAll.then(res => {
            // 对象是个数组，数组中的每一个元素就是promise的结果。
            // 利用了数组的有序性
            console.log(res);
        })


        
        /* race方法：也是多个合并成为一个promise，数组里面的任意一个promise
        执行完了就会执行那一个，其他的不执行 */
        const pRace = Promise.race([p1, p2, p3])
        pRace.then(res => {
            console.log(res);
        })

    </script>


</body>

</html>

控制台查看：

04 Promise的理解（Ajax）_javascript_07