Promise学习笔记

Promise

简介

Promise是一个类

Promise是ES6中的一个非常重要的特性

promise会将将自身的函数抽离出来，不需要同步执行（既按js代码顺序执行

promise是异步编程的解决方案

ajax是异步请求

定时器的异步事件

        // 1.使用setTimeout
        // setTimeout(()=>{
        //     console.log('hello world')
        // },1000)

        // 参数为一个函数  函数(resolve,reject)
        // resolve,reject本身也是函数
        // new Promise(参数)
    
        new Promise((resolve,reject)=>{
            // 将setTimeout看作网络请求
            // 第一次
            setTimeout(()=>{
                // 请求成功调用resolve,并执行then
               resolve()
            },1000)
        }).then(()=>{
            console.log('hello world')
            console.log('hello world')
            console.log('hello world')
            console.log('hello world')

            // 执行第二次网络请求并返回结果
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve()
                },1000)
            })
        }).then(()=>{
            console.log('hello vue')
            console.log('hello vue')
            console.log('hello vue')
            console.log('hello vue')
            console.log('hello vue')

            // 执行第三次网络请求并返回结果
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    resolve()
                },1000)
            })
       }).then(()=>{
            console.log('hello python')
            console.log('hello python')
            console.log('hello python')
            console.log('hello python')
            console.log('hello python')
       })

理解promise

//    Promise可理解为链式编程

    // 什么情况下使用promise？
    // 一般情况下，有异步操作的时候，就使用promise对这个异步操作进行封装
    // 例如常用的ajax就是一个异步请求操作

    new Promise((resolve,reject)=>{
        setTimeout(()=>{
            // 成功的时候调用reslove,执行then
            // reslove(传入then中的参数)
            // resolve('hello world')

            // 异步操作失败时调用reject,并执行catch
            // 如ajax请求错误
        
            reject('error msg')


            // ajax示例
            // $.ajax({
            //     type: "method",
            //     url: "url",
            //     data: "data",
            //     dataType: "dataType",
            //     success: function (response) {
            //         resolve(response)
            //     },
            //     error:function(err){
            //          reject(err)
            //     }
            // });
        },1000)
    }).then((data)=>{
        console.log(data)
        console.log(data)
        console.log(data)
    }).catch((err)=>{
        console.log(err)
    })

promise的三种状态

async：异步

sync：同步

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

promise.all([])

        // 当需要多个异步请求均完成时才能够进行下步操作时，可使用promise.all
        // Promise.all([异步请求])
        Promise.all([
            new Promise((resolve,reject)=>{
                $.ajax({
                    type: "method",
                    url: "url1",
                    data: "data",
                    dataType: "dataType",
                    success: function (response) {
                        resolve(response)
                    }
                });
            }),
            new Promise((resolve,reject)=>{
                $.ajax({
                    type: "method",
                    url: "url2",
                    data: "data",
                    dataType: "dataType",
                    success: function (response) {
                        resolve(response)
                    }
                });
            })
            // 当所有异步请求均返回结果后，执行then
            // then的参数位上方异步请求的结果，为一个数组，可通过下标获取
        ]).then((result)=>{
            result[0]
            result[1]
        })