ES6语法(四) promise

0.作用

• 解决异步问题
• 代码可读性高
• 解决回调地狱

1.基本用法

let pro = new Promise(function(resolve,reject){
...
})

2.三种状态

1.pending：刚刚创建一个Promise实例的时候，表示初始状态；
2.fulfilled：resolve方法调用的时候，表示操作成功；
3.rejected：reject方法调用的时候，表示操作失败；
状态只能从 初始化 -> 成功 或者 初始化 -> 失败

let pro = new Promise(function(resolve,reject){
        //实例化后状态：pending
        if('操作成功'){
            resolve();
            //resolve方法调用，状态为：fulfilled
        }else{
            reject();
            //reject方法调用，状态为：rejected
    }
})

3.then()方法

（）里面是一个函数，会返回一个promise对象
用于绑定处理操作后的处理程序。

 pro.then(function (res) {
        //操作成功的处理程序
    },function (error) {
        //操作失败的处理程序
    });

4.catch()方法

处理操作异常的程序

pro.then(function (res) {
        //操作成功的处理程序
    }).catch(function (error) {
        //操作失败的处理程序
    });

上述两种方法调用后，都会返回promise对象

5.all()方法

接受一个数组作为参数，数组的元素是Promise实例对象，当参数中的实例对象的状态都为fulfilled时，Promise.all( )才会有返回。

6.race()方法

它的参数要求跟Promise.all( )方法一样，不同的是，它参数中的promise实例，只要有一个状态发生变化（不管是成功fulfilled还是异常rejected），它就会有返回，其他实例中再发生变化，它也不管了。

5.异步操作

// 回调函数实现异步操作
function getTime(callback){
    //通过延迟函数模拟异步操作
    console.log("开始执行")
    setTimeout(()=>{
        var a = "hello";
        callback(a);
    },2000)
}
 getTime(function(str){
    console.log(str)
 });
// 使用promise
function timeout(){
    let randNum = Math.random()*2;
    return new Promise(function(resolve,reject){
        setTimeout(()=>{
            if(randNum>1){
                resolve("a");
            }else{
                reject();
            }
        },2000)
    })
}
timeout().then((a)=>{
    console.log(a)
})

例子

function first() {
    return new Promise((resolve, reject) => {
        resolve('我是第一个')
    });
}

function section(data) {
    console.log(data);
    return "第二个"
}

function disange(data) {
    console.log(data);
    return "第三个"
}


first().then(section).then(section).then(disange).then(
    res=>{
        console.log(res)
    }
).then(res2=>{
    console.log(res2)
})
//结果
我是第一个
第二个
第二个
第三个
undefined

// /**
//  * 获取当前登录人
//  */
function getCurrentUser() {
    // 模拟请求异步操作
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let user = {
                userId: 1,
                name: '李四'
            };
            resolve(user);
        }, 500)
    })
}
//
// /**
//  * 根据用户id去获取这个用户关注的新闻栏目
//  * @param data
//  */
function getNewsCategoryListByUser(data) {
    console.log(data);
    return new Promise((resolve, reject) => {
        // 模拟请求异步操作
        setTimeout(() => {
            let categoryList = [{
                id: 1,
                name: '全部新闻'
            }, {
                id: 2,
                name: '头条'
            }];
            resolve(categoryList)
        }, 500)
    })
}
//
// /**
//  * 根据分类id获取新闻列表
//  * @param data
//  */
function getNewsListByCategory(data) {
    console.log(data)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let newsList = [{
                id: 1,
                name: '男篮世界杯被淘汰'
            }, {
                id: 2,
                name: '观众大喊李楠下课'
            }];
            let res = {
                success: false,
                data: newsList,
                msg: '请求参数不对'
            };
            resolve(newsList)
        }, 500)
    })
}
//
// // // then方法里接受的是一个函数
// // // 这个函数的参数是promise成功的数据
getCurrentUser()
    .then(data => {
        // 返回的是一个promise对象
        return getNewsCategoryListByUser(data.userId);
    }).then(res => {
        return "第三个"
    }).then(disange => {
        console.log(disange)
    })
    .then(data => {
        return getNewsCategoryListByUser(data[0].id)
    }).then(res => {
        console.log(res);
    });
// // then方法的参数本质上是一个函数
// // then会返回一个promise对象，这个promise的状态由这个then函数的返回值决定的
// // then里面的函数返回的是一个promise对象，我们.then()返回的promise和then里面返回的promise对象一致的
// // then里面的函数返回的是不一个promise对象,.then()返回的promise的参数有then里面的函数返回值决定