Prominse的静态方法，Prominse.then的返回值，Prominse的三种状态，async函数，同源策略，get和post传参的区别

• Prominse的静态方法
• Promise和Promise相结合的接口
• Promise.then返回值
• Prominse中reject和catch这两个方法
• Promise的三种状态
• eventloop，事件循环（宏任务，微任务）

Prominse的静态方法

有两种静态方法：

all和race两种方法，all是返回全部的参数，race是返回最快的参数

<script>
    function timeoutPro(delay) {
        return new Promise((resolve, reject) => {
            // 根据成功  resolve then
            setTimeout(() => {
                resolve(`延迟了${delay}秒执行`)
            }, delay * 1000)
        })
    }
    // 创建多个Promise对象
    // p1,p2,p3 Promise对象
    const p1 = timeoutPro(2)
    const p2 = timeoutPro(3)
    const p3 = timeoutPro(4)
    const p4 = timeoutPro(9)
    console.log(p1,p2,p3,p4)
    /*
      1. Promise.all 等待传入的Promise数组,每一项 都完成
      2. 每一个Promisethen的结果,挨个的设置给res
      3. res-->array
      4. all 所有,等所有
    */
    // Promise.all([Promise实例化对象，对象1，对象2])
    Promise.all([p1,p2,p3,p4])//调用所有的Promise对象
        .then(res => {
            console.log(res)
        }) //如果有一个有问题就回去进入err中
    /*
      1. Promise.race 等待传入的Promise数组,第一个 完成就触发then
      2. then中获取到的是 第一个完成Promise对象的then中的值
      3. race 竞赛,等第一
    */
    Promise.race([p1,p2,p3,p4])//调用最快的Promise对象
        .then(res => {
            console.log(res)
        }) //只返回最快的那个接口

</script>

Promise和Promise相结合的接口

<script>
    function myAxios(option) {
        // 获取传入的属性
        const { url, method = 'get', data } = option
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest()
            // 调用 新闻接口
            xhr.open(method, url)
            // 设置 请求头 内容格式为JSON
            xhr.setRequestHeader('content-type', 'application/json')
            xhr.addEventListener('load', function () {
                // console.log('load:', xhr.response)
                // 通过 resolve 将成功的结果传递给then
                resolve(JSON.parse(xhr.response))
            })
            // 发送  JSON
            xhr.send(JSON.stringify(data))
        })
    }
    const p1 = myAxios({
        url : `http://ajax-api.itheima.net/api/news`, //获取新闻表单
        method : `GET`,
    })
    const p2 = myAxios({
        url : `http://ajax-api.itheima.net/api/books`, //获取图书列表
        method : `get`,
    })
    const p3 = myAxios({
        url : `http://ajax-api.itheima.net/api/area?pname=河南省&cname=南阳市`,
        method : `get`,
    })
    // 1.测试多个接口
    // 新闻 图书接口 英雄接口
    Promise.all([p1,p2,p3]).then(res => {
        console.log(res)
        console.log(res[0])
        console.log(res[0].data)
        console.log(res[2])
        console.log(res[2].data)
    }).then(err => {
        console.log(err)
    })
</script>

Promise.then返回值

<script>
    function time(a) {
        return new Promise ((resolve, reject) =>{
            setTimeout(() => {
                resolve(a)
            },1000)
        })
    }
    const  result = time(1).then(res => {
        console.log(res)
        return time(2)
    }).then(res1 => {
        console.log(res1)
        return 1
    }).then(res2 => {
        console.log(res2)
    }).then(res3 => {
        console.log(res3)
    })
</script>

Prominse中reject和catch这两个方法

<script>
    function randomPro() {
        return new Promise((resolve, reject) => {
            // 延迟 1s
            setTimeout(() => {
                // 随机数
                // Math.random() 0-1的小数
                // * 100 控制范围
                // parseInt 转整数
                const num = parseInt(Math.random() * 100)
                if (num > 0 && num < 50) {
                    resolve('成功啦:' + num)
                } else if (num >= 50 && num <= 100) {
                    reject('失败啦:' + num)
                }
            }, 10)
        })
    }
    /*
      1. then的第二个参数在失败时触发(如果写了的话)
      2. catch的本质 就是调用了then 传递勒第二个参数
    */
    randomPro().then(
        res => console.log('res:', res),
        err => console.log('err:', err),
    ).finally(() => {  //重点，不管成功或者失败，都会走我这里-
        console.log(`成功或者失败都要走我这里`)
    })
</script>

Promise的三种状态

<script>
    function randomPro() {
        return new Promise((resolve, reject) => {
            // 延迟 1s
            setTimeout(() => {
                // 随机数
                // Math.random() 0-1的小数
                // * 100 控制范围
                // parseInt 转整数
                const num = parseInt(Math.random() * 100)
                if (num > 0 && num < 50) {
                    resolve('成功啦:' + num)
                } else if (num >= 50 && num <= 100) {
                    reject('失败啦:' + num)
                }
            }, 10)
        })
    }
    /*
      1. then的第二个参数在失败时触发(如果写了的话)
      2. catch的本质 就是调用了then 传递勒第二个参数
    */
    // 保存下来 方便后续查看
    const p = randomPro()
    console.log(`初始化状态`,p)
    p.then(res => {
        console.log(res)
            console.log(`成功状态`,p)
        },
        err => {
            console.log(`失败状态`,p)
        }
    ).finally(function () {
        console.log(`我是什么状态`,p)
    })
</script>

eventloop，事件循环（宏任务，微任务）

先执行主线程代码，然后执行微任务，最后执行宏任务。如果宏任务中还有其他微任务，则继续执行宏任务中的微任务

script是最大的宏任务，先执行（同步任务，微任务，宏任务）

new Promise{（里面就是同步任务）}

.then是微任务

setTimeout（）setInterval（）这两个属于宏任务

<script>
    // 宏任务
    setTimeout(function () {
        console.log(1)
    })
    new Promise(function (resolve, reject) {
        console.log(2)
        resolve(3)
    }).then(function (val) {
        // 微任务
        console.log(val) // 3
    })
    console.log(4)
</script>