Promise,async,await笔记

Promise

创建promise对象

• Promise对象构造方法传入一个带有resolve和reject两个参数的函数function

var promise = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        console.log('异步操作');
    }, 2000)
});

promise中resolve，reject

• Promise对象构造方法传入的function中的resolve，reject参数是用来处理成功或失败
• Promise对象总共有3中状态：
  • pending: 初始状态，不是成功或失败状态。
  • fulfilled: 意味着操作成功完成。（执行resolve状态会变为fulfilled）
  • rejected: 意味着操作失败。（执行reject状态会变为rejected）

var promise = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            console.log('成功');
            resolve('成功');//fulfilled
        } else {
            console.log('失败');
            reject('失败');//rejected
        }
    }, 2000)
});

promise中then，catch

• Promise实例通过then接受成功（可以连点），catch接收失败
• promise一次resolve执行会顺序触发promise实例下的所有then方法
• promise中reject,throw Erroe都会promise实例下的所有catch方法

var promise = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('执行成功');
        } else {
            reject('失败');
        }
    }, 2000)
});
//promise实例接受成功和失败
promise.then(function (data) {
    console.log(1);
    console.log(data);
}).then(function (data) {
    console.log(2);
    console.log(data);
}).catch(function (err) {
    console.log(err);
});
// 上述代码会打印:
// 1
// 执行成功
// 2
// 执行成功

两个promise依赖执行

• promise的then方法默认返回的是自身promise实例（从而实现then的连点）,当在then方法中添加return时,return就会根据return来变化

现有一个这样的业务场景需要先调接口A获取用户信息,再根据接口A返回的数据调用接口B,两个接口存在依赖

var promise1 = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('接口A');
        } else {
            reject('失败');
        }
    }, 2000)
});
//promise实例接受成功和失败
promise1.then(function (data) {
    console.log('接口A执行');
    console.log(data);
    var promise2 = new Promise(function (resolve, reject) {
        //方法体内执行异步操作如:文件读写ajax之类
        setTimeout(function () {
            let success = true;
            if (success) {
                resolve('接口B');
            } else {
                reject('失败');
            }
        }, 1500)
    });
    return promise2;
}).then(function (data) {
    console.log('接口B执行');
    console.log(data);
}).catch(function (err) {
    console.log(err);
});
// 上述代码会打印:
// 接口A执行
// 接口A
// 接口B执行
// 接口B

两个promise顺序执行

• promise的then方法默认返回的是自身promise实例（从而实现then的连点）,当在then方法中添加return时,return就会根据return来变化

现有一个这样的业务场景需要先调接口A和接口B获取数据,根据结果A返回数据取处理结果B返回的数据,两个接口不存在依赖，但是存在顺序

• 以下demo虽然接口B会比接口A早返回数据但是promise可以实现异步顺序处理

var promise1 = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('接口A执行成功');
        } else {
            reject('失败');
        }
    }, 2000)
});
var promise2 = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('接口B执行成功');
        } else {
            reject('失败');
        }
    }, 1500)
});
//promise实例接受成功和失败
promise1.then(function (data) {
    console.log(1);
    console.log(data);
    return promise2;
}).then(function (data) {
    console.log(2);
    console.log(data);
}).catch(function (err) {
    console.log(err);
});
// 上述代码会打印:
// 1
// 接口A执行成功
// 2
// 接口B执行成功

Promise.all方法

• all方法是Promise类下的静态方法,用于处理多个promise执行合并

现有一个这样的业务场景渲染需要接口A和接口B数据，两个接口不存在依赖，也不存在顺序

var promise1 = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('promise1执行成功');
        } else {
            reject('失败');
        }
    }, 1500)
});
var promise2 = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('promise2执行成功');
        } else {
            reject('失败');
        }
    }, 2000)
});
Promise.all([promise1,promise2]).then(function (datas) {
    console.log(datas[0]);
    console.log(datas[1]);
}).catch(function (err) {
    console.log(err);
});
// 上述代码会打印:
// promise1执行成功
// promise2执行成功

Promise.race方法

• race方法是Promise类下的静态方法,用于处理多个promise竞速

现有一个这样的业务场景需要接口A或者接口B的数据，两个接口不存在依赖，也不存在顺序，谁先返回我就用谁的数据

var promise1 = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('promise1执行成功');
        } else {
            reject('失败');
        }
    }, 1500)
});
var promise2 = new Promise(function (resolve, reject) {
    //方法体内执行异步操作如:文件读写ajax之类
    setTimeout(function () {
        let success = true;
        if (success) {
            resolve('promise2执行成功');
        } else {
            reject('失败');
        }
    }, 2000)
});
Promise.race([promise1,promise2]).then(function (data) {
    console.log(data);
}).catch(function (err) {
    console.log(err);
});
// 上述代码会打印:
// promise1执行成功

async/await

• async关键字申明的该方法是一个异步方法,申明方法中的await申明的promise对象都会转换为同步
• await关键字阻塞promise对象使promise变为同步
• await只能在async关键字申明的异步方法中使用
• await等待的虽然是promise对象，但不必写.then()，直接可以得到resolve的返回值。
• 捕获错误用try catch

function asyncfun(time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            let success = true;
            if (success) {
                resolve('成功');
            } else {
                reject('失败');
            }
        }, time);
    });
}
/**
 * 使用async，await
 */
let load = async function() {
    console.log('开始');
    try {
        //直接可以得到resolve的返回值。
        let succ = await asyncfun(2000);
        console.log('2000'+succ);
        let succ1 = await asyncfun(1500);
        console.log('1500'+succ1);
    } catch (err) {
        //直接可以得到reject的返回值。
        console.log(err);
    }
    console.log('结束');
};
load();