Promise

目录

一、介绍和基本使用

基本使用

二、Promise的三种状态

三、Promise的链式调用

第一种链式调用

第二种链式调用

四、Promise的all方法使用

---

 

一、介绍和基本使用

• 是ES6的新特性；
• 是异步编程的解决方案
• 避免ajax异步请求导致回调函数嵌套太深，陷入回调地狱

基本使用

这里使用setTimeout作为模拟网络请求：

模拟回调地狱

    //异步操作
    setTimeout(function () {
        console.log(123)
        console.log(123)
        console.log(123)
        setTimeout(()=>{
            console.log(456)
            console.log(456)
            console.log(456)
            setTimeout(()=>{
                console.log(789)
                console.log(789)
                console.log(789)
            },1000)
        },1000)
    },1000)

使用Promise

网络请求都在Promise对象中，每次处理的回调函数都在Promise.then方法中

一般情况下，是有异步操作时，使用Promise对这个异步操作进行封装

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

在执行传入的回调函数时，会传入两个参数，resolve，reject，本身又是函数；

new Promise（（resolve，reject）=>{

执行网络请求

resolve(参数x)//代替成功时处理结果的代码

或者reject（参数y）//代替失败时处理结果的代码

}）.then（（参数x）=>{

处理成功的操作

}）.catch（（参数y）=>{

处理失败的操作

}）

成功处理调用resolve，失败调用reject

 

二、Promise的三种状态

异步操作之后会有三种状态：

• pending：等待状态，正在进行异步操作（网络请求），还没有返回结果；
• fulfill：满足状态，当我们主动回调了resolve方法时，就处于该状态，并且这个时候会回调then()；
• reject：拒绝状态，当我们主动回调了reject时，就会处于改状态，并且同时回调catch()；

 

三、Promise的链式调用

第一种链式调用

见上一的回调地狱的Promise的处理

第二种链式调用

原：

简化：

    new Promise(resolve => {
        setTimeout(() => {
            resolve('aaa')
        }, 1000)
    }).then(res => {
        console.log(res, '第一层的十行处理结果');
        return Promise.resolve(res + '111')
    }).then(res => {
        console.log(res, '第二层的十行处理结果')
        return Promise.resolve(res + '333')
    }).then(res => {
        console.log(res, '第三层的十行处理结果')
    })

继续简化

    new Promise(resolve => {
        setTimeout(() => {
            resolve('aaa')
        }, 1000)
    }).then(res => {
        console.log(res, '第一层的十行处理结果');
        return res + '111'
    }).then(res => {
        console.log(res, '第二层的十行处理结果')
        return res + '333'
    }).then(res => {
        console.log(res, '第三层的十行处理结果')
    })

 

四、Promise的all方法使用

待优化的代码

使用Promise优化后的代码

Promise.all()的参数是一个可迭代对象，例如数组