ES6中的Promise

ES6中的Promise

1.认识Promise

简单理解什么是Promise？

ES6中一个非常重要和好用的特性就是Promise

Promise是异步编程的一种解决方案

什么时候会需要来处理异步事件？

网络请求的时候因为不能立即拿到返回的数据，所以往往我们会传入另外一个函数，在数据请求成功时，将数据用过传入的函数回调出去

2.Promise的基本使用

定时器的异步事件

// promise基本用法
new Promise((resolve, reject) => {
    setTimeout(() => {
        // 成功时调用
        resolve("success");
        // 失败时调用
        reject("error");
    }, 1000);
}).then((data) => {
    console.log(data);
}).catch((err) => {
    console.log(err);
})

运行结果:

定时器异步事件解析

• new Promise很明显是创建一个Promise对象
• 小括号中((resolve, reject) => {})也很明显就是一个函数
  • resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败来决定调用哪一个
• 成功还是失败
  • 如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调
  • 如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调

Promise三种状态

• pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
• fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
• reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()

Promise另外一种写法

// promise其他写法
new Promise((resolve, reject) => {
    setTimeout(() => {
        // 成功时调用
        resolve("success");
        // 失败时调用
        reject("error");
    }, 1000);
}).then(data => {
    console.log(data);
}, err => {
    console.log(err);
})

3.Promise的链式调用

// promise链式调用简写
new Promise((resolve, reject) => {
    setTimeout(() => {
        // 成功时调用
        resolve("success");
        // 失败时调用
        reject("error");
    }, 1000);
}).then(res => {
    console.log(res, "第0层的10行代码处理");
    // new Promise写法
    return new Promise((resolve) => {
        resolve(res + '111')
    })
}).then(res => {
    console.log(res, "第1层的10行代码处理");
    // 直接调用Promise.方法 写法
    return Promise.resolve(res + "222")
}).then(res => {
    console.log(res, "第2层的10行代码处理");
    // 简写Promise调用的写法
    return res + "333"
}).then(res => {
    console.log(res, "第3层的10行代码处理");
    // reject 失败写法 后续catch中返回结果
    // return Promise.reject("err message")
    // 或者
    throw "err message2"
}).catch(err => {
    console.log(err);
})

4.Promise.all用法

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

实例代码：

// promise.all用法
Promise.all([new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({name:"mike",age:18});
    }, 1000);
}),new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve({name:"john",age:25});
    }, 2000);
})]).then(result =>{
    console.log(result);
})

5.手写Promise(待更新)