Promise

Promise异步编程解决方案

目的：解决网络请求的回调地狱

Promise基本语法

什么情况下会用到Promise？

一般情况下是有异步操作时

new->构造函数（1、保存了一些状态信息，2、执行传入的函数)

在执行传入的回调函数时，会传入两个参数resolve, reject

定时器的异步事件

new Promise((resolve, reject) => {
    setTimeout(() => {
        //成功时调用resolve
        resolve('hello world2')
            //失败时调用reject
        reject('error message')
    }, 1000)
}).then(data => {
    console.log(data);
    console.log(data);
}).catch(err => {
    console.log(err);
})


//多步
//链式编程

new Promise((resolve, reject) => {
    //第一次网络请求代码
    setTimeout(() => {
        resolve()
    }, 1000)
}).then(() => {
    //第一次处理代码
    console.log('hello world');
    console.log('hello world');
    //很多很多
    return new Promise((resolve, reject) => {
        //第二次网络请求代码
        setTimeout(() => {
            resolve()
        }, 1000)
    })
}).then(() => {
    //第二次处理代码
    console.log('hello promise');
    console.log('hello promise');
    //很多很多
    return new Promise((resolve, reject) => {
        //第三次网络请求代码
        setTimeout(() => {
            resolve()
        }, 1000)
    })
}).then(() => {
    //第三次处理代码
    console.log('hello es6');
    console.log('hello es6');
    //很多很多
})

Promise异步操作

Promise的链式操作及简化版

// new Promise((resolve, reject) => {
//     //第一次网络请求代码
//     setTimeout(() => {
//         resolve('aaa')
//     }, 1000)
// }).then((data) => {
//     //第一次处理代码
//     console.log(data, '第一次处理代码');
//     //很多很多
//     return new Promise((resolve, reject) => {
//         resolve(data + '111')
//     })
// }).then((data) => {
//     //第二次处理代码
//     console.log(data, '第二次处理代码');
//     //很多很多
//     return new Promise((resolve, reject) => {
//         resolve(data + '222')
//     })
// }).then((data) => {
//     console.log(data, '第三次处理代码');
// })

//简化版
return new Promise((resolve, reject) => {
 resolve(data + '111')
})
||
return Promise.resolve(data + '111')
||
return data + '111'

//未请求到版本
new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('aaa')
    }, 1000)
}).then(data => {
    console.log(data, '第一次处理代码');
    // return Promise.reject('error message')
    throw 'error message'
}).then(data => {
    console.log(data, '第二次处理代码');
    return data + '222'
}).then(data => {
    console.log(data, '第三次处理代码');
}).catch(err => {
    console.log(err);
})

Promise.all

Promise.all([
    new Promise((resolve, reject) => {
        // $.ajax({
        //     url:'url1',
        //     success:function(data){
        //         resolve(data)
        //     }
        // })
        setTimeout(() => {
            resolve({
                name: 'why',
                age: 18
            })
        }, 1000)
    }),
    new Promise((resolve, reject) => {
        // $.ajax({
        //     url:'url1',
        //     success:function(data){
        //         resolve(data)
        //     }
        // })
        setTimeout(() => {
            resolve({
                name: 'lisi',
                age: 18
            })
        }, 1000)

    }),

]).then(results => {
    console.log(results);
})

ve({
name: ‘lisi’,
age: 18
})
}, 1000)

}),

]).then(results => {
console.log(results);
})