Promise用法简介

一，promise基础

promise是异步编程的一种解决方案，假设当遇到ajax请求A的回调函数中嵌套另一个请求B，请求B的回调函数
中又嵌套一个请求C，请求C的回调函数中又嵌套一个请求D，以此最终获取到D回调函数中的data。正常情况下
这种方式可以运行且可以获取我们想得到的结果，但这样的代码在完成后在视觉上不容易看出其中的嵌套关系，
而且在后期不易维护。promise就在一定程度上解决了这种问题。

使用方法（以下用定时器模拟异步操作）

//其中传入的resolve,reject本身也是函数
//reslove函数对应成功调用then函数
//reject函数对应调用失败的catch函数
//在执行异步请求时函数括号内写入data
new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve()
        },1000)
    }).then(()=>{
        console.log('hello word');
        //第一次嵌套
        new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve()
            },1000)
        }).then(()=>{
            console.log('hello Vue')
            //第二次嵌套
            new Promise((resolve, reject) =>{
             setTimeout(()=>{
                 resolve()
             },1000)
            }).then(()=>{
                console.log('hello js')
                //第三次嵌套
                new Promise((resolve, reject) => {
                    setTimeout(()=>{
                        resolve()
                        reject()
                    },1000)
                }).then(()=>{
                    console.log('hello')
                }).catch(()=>{
                    console.log('error')
                })
            })
        })
    })

二，Promise三种状态

异步操作之后会有三种状态

pending：等待状态，如正在进行网络请求或定时器没有到时间

fulfill：满足状态，当我们主动回调reslove时就处于该状态，并会回调.then()

reject：拒绝状态，当我们主动回调了reject时就处于该状态，并会回调.catch()

.then和.catch的另一种写法

 new Promise((resolve, reject) => {
                        setTimeout(()=>{
                            resolve('hello')
                            reject('error')
                        },1000)
                    }).then(data=>{
                        console.log(data)
                    },error=>{
                        console.log(error)
                    })

三，网络请求处理

在请求到数据后对其进行下一步的处理并最后获取结果，使用Promise

例

//对请求到的数据res分别加上111，然后再加上222
new Promise(resolve => {
        setTimeout(() => {
            resolve('res')
        }, 1000)
    }).then(res => {
        console.log(res)
        //第一次内部处理
        // return new Promise(resolve => {
        //     resolve(res + '111')
        //简写形式
        return Promise.resolve(res + '111')
        //若抛出异常
        //return Promise.reject('error message')
        // 或
        //throw 'error message'
    }).then(res => {
        console.log(res)
        //第二次内部处理
        // return new Promise(resolve => {
        //     resolve(res + '222')
        return Promise.resolve(res + '222')
    }).then(res => {
        console.log(res)
    }).catch(err =>{
        console.log(err) 
    })
    //})
    //})

四，Promise的all方法使用

某个需求依赖于多个网络请求时使用此方法

使用方法

 Promise.all([
        new Promise((resolve, reject) => {
            $ajax({
                url:'url',
                success:function (data){
                    resolve(data)
                }
            })
        }),
        new Promise((resolve, reject) => {
            $ajax({
                url:'url',
                success:function (data){
                    resolve(data)
                }
            })
        })
    ]).then(results =>{
        //第一个请求结果
        console.log(results[0])
        //第二个请求结果
        console.log(results[1])
    })