Promise、Async、Await

一、promise

1. 为什么要用promise?

解决回调地狱。

2. 什么是promise？

promise，承诺。在代码中我们可以这么理解：此处我先许下个承诺，过了一定时间后我带给你一个结果；在 Ecmascript 6 中体现出来就是一个容器对象, 一般用来封装一个异步操作。在这段时间内，我们可以进行异步操作：比如请求网络数据、耗时运算、读写本地文件等。

3. promise的三种状态

异步操作是一个无法预测的事情，要么成功，要么失败。

• Pending：Promise对象实例创建时候的初始状态
• Fulfilled：成功的状态
• Rejected ：失败的状态
• 注意: 状态不可回退

4. promise注意点

1）Promise对象一经创建，立即执行
2）当 Promise 对象内部的异步操作结果失败的时候，告诉 Promise 对象容器，该异步任务失败了, 其实就是将 Promise 内部的 Pending 状态改为 Rejected。
3）Promise 对象内部的异步操作没有错误发生，证明成功了, 然后在这里将 Promise 内部的 Pending 状态改为 Resolved。
4）在使用 Promise 做异步流程控制的时候，关于异常的处理可以通过在最后一个 then 之后设置一个 catch，然后指定一个失败处理函数, 该函数可以捕获前面所有的 Promise 对象本身以及 then 内部的任务错误，当前面任何一个发生异常，直接进入 catch，后续所有的 Promise 包括 then 不再执行。

5. 常用API

Promise.resolve(value)
Promise.reject
Promise.prototype.then
Promise.prototype.catch
Promise.all
Promise.race

• Promise.all可以将多个Promise实例包装成一个新的Promise实例。
• 成功和失败的返回值是不同的，成功的时候返回的是一个结果数组。
• 失败的时候返回最先被reject失败状态的值。
• Promise.all在处理多个异步任务时非常有用，比如说一个页面上需要等待两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。
• Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即使p1的结果获取的比p2晚。
• 在前端开发请求数组的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。

let sleep = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(`倒计时${time / 1000}秒触发`);
        }, time);
    });
};

let p1 = sleep(3000);
let p2 = sleep(2000);

Promise.all([p1, p2]).then((result) => {
    console.log(result);
}).catch((err) => {
    console.log(err);
});

let result1 = Promise.all([p2, p1]);
result1.then((data) => {
    console.log(data);
});

Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回哪个结果，不管结果本身是成功状态还是失败状态。

let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("我成功了");
    },1000);
});

let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("我失败了");
    }, 500);
});

Promise.race([p1, p2]).then((result) => {
    console.log(result);
}).catch((error) => {
    console.log(error);
});

二、async和await

1. 基本概念

async用于声明一个function是异步的。await用于等待一个异步方法执行完成。

2. 使用规则

• await只能用到async函数里面，不能单独使用。
• await等待的是一个Promise对象，后面必须跟一个Promise对象，但是不必写then()，直接可以得到返回值。
• 在前端开发的过程中，偶尔会遇到多个请求，而后一个请求依赖之前请求的需求，如果要用promise的链式调用的话，那么有几个请求就需要写几个then。
• await其实阻塞了代码，如果不是这种后面的请求依赖前面的请求的话，最好不使用。

let request  = (time) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(time);
        }, time)
    });
};

async function zhang () {
    let result1 = await request(200);
    let result2 = await request(result1 + 200);
    let result3 = await request(result2 + 200);
    console.log(result3);
}
zhang();

// 错误捕获
async function zhang2 () {
    let result1 = await request(200);
    let result2 = await request(result1 + 200);
    return await request(result2 + 200);
}
zhang2().then((result) => {
    console.log(result);
}).catch((err) => {
    console.log(err);
});