【es6】promise_淋雪_前端开发者

一、什么是promise?我们用promise解决什么样的问题

  promise是异步编程的一种解决方案:从语法上来说,Promise是一个对象,从他可以获取异步操作的信息;从本意上讲,它是承诺,它承诺过一段时间会给你一个答复。Promise有三种状态:pending(等待态)、fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。

  Promise常常用来解决两个问题:

  • 回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象
  • promise可以支持多个并发的请求,获取并发请求中的数据
  • 这个promise可以解决异步的问题,本身不能说promise是异步的
  • 回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象
  • promise可以支持多个并发的请求,获取并发请求中的数据
  • 这个promise可以解决异步的问题,本身不能说promise是异步的
  • 二、Promise 用法大全

      1、基础用法

      

    let p = new Promise( (resolve, reject) => {
        console.log('我刚刚进来')
        setTimeout(() => {
            console.log('执行成功');
            resolve('我是成功');
            reject('我是失败');
        }, 2000);
        console.log('我在函数的末尾')
    });
    
    
    p.then( (data) => {
        console.log(data)
    })

    // 执行结果

    // 我刚刚进来
    // 我在函数的末尾
    // 执行成功
    // 我是成功

     
    let p = new Promise( (resolve, reject) => {
        console.log('我刚刚进来')
        setTimeout(() => {
            console.log('执行成功');
            resolve('我是成功');
            reject('我是失败');
        }, 2000);
        console.log('我在函数的末尾')
    });
    
    
    p.then( (data) => {
        console.log(data)
    })

    // 执行结果

    new {
    console.log(
    我刚刚进来)
    setTimeout(()
    {
    console.log(
    执行成功);
    resolve(
    我是成功);
    reject(
    我是失败);
    },
    2000);
    console.log(
    我在函数的末尾)
    });

    p.then( (data) {
    console.log(data)
    })

    // 执行结果

    // 我刚刚进来
    // 我在函数的末尾
    // 执行成功
    // 我是成功

     

     

    Promise的构造函数接收一个参数:函数,并且这个函数需要传入两个参数:
    • resolve :异步操作执行成功后的回调函数
    • reject:异步操作执行失败后的回调函数
  • resolve :异步操作执行成功后的回调函数
  • reject:异步操作执行失败后的回调函数
  •   2、链式编程

    p.then( (data) => {
        console.log(data);
        return '我是第一个then'
    })
    .then( (data) => {
        console.log(data);
        return () => {
            console.log('我是第二个then的方法')
        }
    })
    .then( (fun) => {
        fun();
    })
    p.then( (data) => {
        console.log(data);
        return '我是第一个then'
    })
    .then( (data) => {
        console.log(data);
        return () => {
            console.log('我是第二个then的方法')
        }
    })
    .then( (fun) => {
        fun();
    })

    {
    console.log(data);
    return
    })
    .then( (data)
    {
    console.log(data);
    return {
    console.log(
    )
    }
    })
    .then( (fun)
    {
    fun();
    })

    所以,从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的:

      3、reject的用法(失败状态)

    let p2 = new Promise( (resolve, reject) => {
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (num > 5 ) {
                resolve(`${num}大于5,成功了`)
            } else {
                reject(`${num}小于5,失败了`)
            }
        }, 2000)
    });
    
    p2.then((data) => {
        console.log('resolve', data)
    }, (err) => {
        console.log('reject', err)
    });
    // 执行结果
    // reject 1小于5,失败了
    // resolve 8大于5,成功了
    let p2 = new Promise( (resolve, reject) => {
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (num > 5 ) {
                resolve(`${num}大于5,成功了`)
            } else {
                reject(`${num}小于5,失败了`)
            }
        }, 2000)
    });
    
    p2.then((data) => {
        console.log('resolve', data)
    }, (err) => {
        console.log('reject', err)
    });
    // 执行结果
    // reject 1小于5,失败了
    // resolve 8大于5,成功了

    new {
    setTimeout(()
    {
    let num
    );
    if ) {
    resolve(`${num}大于5,成功了`)
    }
    else {
    reject(`${num}小于5,失败了`)
    }
    },
    )
    });

    p2.then((data) {
    console.log(
    , data)
    }, (err)
    {
    console.log(
    , err)
    });
    // 执行结果
    //
    reject 1小于5,失败了
    //
    resolve 8大于5,成功了

    用来处理失败的情况

      4、catch的用法

      我们知道Promise对象除了then方法,还有一个catch方法,它是做什么用的呢?其实它和then的第二个参数一样,用来指定reject的回调。用法是这样:

    p.then((data) => {
        console.log('resolved',data);
        console.log(err); //此处的err未定义
    })
    .catch((err) => {
        console.log('rejected',err);
    });
    p.then((data) => {
        console.log('resolved',data);
        console.log(err); //此处的err未定义
    })
    .catch((err) => {
        console.log('rejected',err);
    });

    {
    console.log(
    ,data);
    console.log(err);
    //此处的err未定义})
    .
    catch {
    console.log(
    ,err);
    });

      catch在Promise中的任何一步出现异常都不会卡死js的运行,而是会进入到这个catch中。catch类似于 try – catch;

      5.all 的用法

      

    let Promise1 = new Promise(function(resolve, reject){
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (1) {
                resolve(`${num}大于5,Promise1成功了`)
            } else {
                reject(`${num}小于5,Promise1失败了`)
            }
        }, 2100)
    })
    let Promise2 = new Promise(function(resolve, reject){
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (1 ) {
                resolve(`${num}大于5,Promise2成功了`)
            } else {
                reject(`${num}小于5,Promise2失败了`)
            }
        }, 2200)
    })
    let Promise3 = new Promise(function(resolve, reject){
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (1 ) {
                resolve({'ccc': `${num}大于5,Promise3成功了`})
            } else {
                reject(`${num}小于5,Promise3失败了`)
            }
        }, 2300)
    })
    
    let pall = Promise.all([Promise1, Promise2, Promise3])
    
    pall.then((data) => {
        console.log(data, '成功')
    }, (err) =>{
      console.log(err, '失败')
    })
    // 执行结果
    // [ '4大于5,Promise1成功了',
    //   '8大于5,Promise2成功了',
    //   { ccc: '9大于5,Promise3成功了' } ] '成功'
    let Promise1 = new Promise(function(resolve, reject){
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (1) {
                resolve(`${num}大于5,Promise1成功了`)
            } else {
                reject(`${num}小于5,Promise1失败了`)
            }
        }, 2100)
    })
    let Promise2 = new Promise(function(resolve, reject){
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (1 ) {
                resolve(`${num}大于5,Promise2成功了`)
            } else {
                reject(`${num}小于5,Promise2失败了`)
            }
        }, 2200)
    })
    let Promise3 = new Promise(function(resolve, reject){
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (1 ) {
                resolve({'ccc': `${num}大于5,Promise3成功了`})
            } else {
                reject(`${num}小于5,Promise3失败了`)
            }
        }, 2300)
    })
    
    let pall = Promise.all([Promise1, Promise2, Promise3])
    
    pall.then((data) => {
        console.log(data, '成功')
    }, (err) =>{
      console.log(err, '失败')
    })
    // 执行结果
    // [ '4大于5,Promise1成功了',
    //   '8大于5,Promise2成功了',
    //   { ccc: '9大于5,Promise3成功了' } ] '成功'

    newfunction(resolve, reject){
    setTimeout(()
    {
    let num
    );
    if) {
    resolve(`${num}大于5,Promise1成功了`)
    }
    else {
    reject(`${num}小于5,Promise1失败了`)
    }
    },
    )
    })
    let Promise2
    newfunction(resolve, reject){
    setTimeout(()
    {
    let num
    );
    if ) {
    resolve(`${num}大于5,Promise2成功了`)
    }
    else {
    reject(`${num}小于5,Promise2失败了`)
    }
    },
    )
    })
    let Promise3
    newfunction(resolve, reject){
    setTimeout(()
    {
    let num
    );
    if ) {
    resolve({
    : `${num}大于5,Promise3成功了`})
    }
    else {
    reject(`${num}小于5,Promise3失败了`)
    }
    },
    )
    })

    let pall Promise.all([Promise1, Promise2, Promise3])

    pall.then((data) {
    console.log(data,
    )
    }, (err)
    {
    console.log(err,
    )
    })
    // 执行结果
    //
    [ ‘4大于5,Promise1成功了’,
    //
    ‘8大于5,Promise2成功了’,
    //
    { ccc: ‘9大于5,Promise3成功了’ } ] ‘成功’

      all方法: 谁跑的慢,就以谁为执行准执行回调。all接收一个数组参数,里面的值最终都返回到Promise对象中。

      有了all方法,就可以一次执行多个异步操作,并且可以统一处理返回结果。例:在打开一个页面是可以统一加载一些配置信息,比如下拉框选项等资源

    例:在打开一个页面是可以统一加载一些配置信息,比如下拉框选项等资源

      6、race用法

      6、race用法

      

      

    let p2 = new Promise( (resolve, reject) => {
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (num > 5 ) {
                resolve(`${num}大于5,成功了`)
            } else {
                reject(`${num}小于5,失败了`)
            }
        }, 5000)
    });
    let Promise3 = new Promise(function(resolve, reject){
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (1 ) {
                resolve({'ccc': `我执行的快,就我了`})
            } else {
                reject(`${num}小于5,Promise3失败了`)
            }
        }, 2300)
    })
     Promise.race([p2, Promise3]).then((data) =>{
            console.log(data);
        }).catch((err) => {
            console.log(err);
        });
    // { ccc: '我执行的快,就我了' }
    let p2 = new Promise( (resolve, reject) => {
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (num > 5 ) {
                resolve(`${num}大于5,成功了`)
            } else {
                reject(`${num}小于5,失败了`)
            }
        }, 5000)
    });
    let Promise3 = new Promise(function(resolve, reject){
        setTimeout(() => {
            let num = Math.ceil(Math.random() * 10);
            if (1 ) {
                resolve({'ccc': `我执行的快,就我了`})
            } else {
                reject(`${num}小于5,Promise3失败了`)
            }
        }, 2300)
    })
     Promise.race([p2, Promise3]).then((data) =>{
            console.log(data);
        }).catch((err) => {
            console.log(err);
        });
    // { ccc: '我执行的快,就我了' }

    new {
    setTimeout(()
    {
    let num
    );
    if ) {
    resolve(`${num}大于5,成功了`)
    }
    else {
    reject(`${num}小于5,失败了`)
    }
    },
    )
    });
    let Promise3
    newfunction(resolve, reject){
    setTimeout(()
    {
    let num
    );
    if ) {
    resolve({
    : `我执行的快,就我了`})
    }
    else {
    reject(`${num}小于5,Promise3失败了`)
    }
    },
    )
    })
    Promise.race([p2, Promise3]).then((data)
    {
    console.log(data);
    }).
    catch {
    console.log(err);
    });
    // { ccc: ‘我执行的快,就我了’ }

     

      reac用来处理加载超时的情况。

     

    » 本文来自:前端开发者 » 《【es6】promise_淋雪_前端开发者》
    » 本文链接地址:https://www.rokub.com/73171.html
    » 您也可以订阅本站:https://www.rokub.com
    赞(0)
    64K

    评论 抢沙发

    评论前必须登录!