ES6精解:promise用法

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6精解:promise用法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

今天就简单总结一下promise的用法,在用PRomise之前,我们要先了解一下什么promise,这个东西是用来干什么的?

通俗易懂的讲,promise其实就是一个构造函数,是用来解决异步操作的,我们平时其实还是会用到挺多的,比如我们经常会嵌套一层层的函数

step1(function (value1) {

  step2(value1, function(value2){

    steP3(value2,function(value3) {

      step4(value3,function(value4) {

        // ...

      });

    });

  });

});

传统方法我们会这样写,但是如果用promise就会简单很多,如下:

(new Promise(step1))

  .then(step2)

  .then(step3)

  .then(step4);

基本用法

   new Promise(function (resolve,reject) {
        console.LOG('promise准备阶段');
        
        resolve("成功!");
        reject("失败!");
    })

输出结果:

promise准备阶段

注意: promise总共有三个状态,准备状态,成功状态,失败状态,这里面promise是刚刚定义,所以是进入准备状态,因为每@L_360_0@一个promise都会进入准备状态,我们还没有运行就进入准备状态了,所以,我们经常用一个函数给他包起来

  function asyncPro(@H_734_126@){
        return new Promise(function (resolve,reject) {
            console.log('promise准备阶段');
            resolve("成功!");
            reject("失败!");
        });
    }
    asyncPro();

输出结果:

promise准备阶段

这里,只有调用asyncPro(),promise才开始new一个

上面,大家应该也注意到了在构建promise时,有两个参数,resolve和reject,接下来我们重点讲下这两个

1. resolve讲解

resolve其实就是异步操作成功时候执行的函数,当我们创建一个构造函数之后,成功执行之后,我们传递的参数要如何获取呢?

function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log('promise准备阶段');
            resolve("成功!");
            reject("失败!");
        });
    }
    asyncPro().then(function (msg) {
        console.log(msg);
    });

输出结果:

promise准备阶段
成功!

注意: .then就是获取成功时候获取的数据

2. reject讲解

上面resolve是成功的时候回调,那么reject就是失败之后的回调

   function asyncPro(){
        return new Promise(function (resolve,reject) {
            console.log('promise准备阶段');
            resolve("成功!");
            reject("失败!");
        });
    }
    asyncPro().then(function (msg) {
        console.log(msg);
    }).catch(function (msg) {
        console.log(msg);
    });

这个一般只有在操作异常的时候才会回调,.catch就是reject的回调,一般我们可以不写

好了,上面主要简单了解一下promise,接下来用一个例子来总结一下

  function asyncPro(msg){
        return new Promise(function (resolve,reject) {
            console.log(msg+':promise准备阶段');
            resolve(msg+'成功!');
            reject(msg+"失败!");
        });
    }
    asyncPro('第一步').then(function (msg) {
        console.log(msg);
        return asyncPro('第二步');
    }).then(function (msg) {
        console.log(msg);
        return asyncPro('第三步');
    }).then(function(msg){
        console.log(msg);
    });

输出结果:

第一步:promise准备阶段
第一步成功!
第二步:promise准备阶段
第二步成功!
第三步:promise准备阶段
第三步成功!

从上面代码可以看出,promise对多层嵌套时有很大的帮助,可以对代码很好的维护,当第一步执行完毕,要执行第二步的时候,return出第二步的函数,在下一个then中获取返回的数据,以此类推。

以上是对promise用法简单总结,后续会再补充。

脚本宝典总结

以上是脚本宝典为你收集整理的ES6精解:promise用法全部内容,希望文章能够帮你解决ES6精解:promise用法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。