ES6精解(3)：promise用法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hope93/article/details/80803517

前言

今天就简单总结一下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是刚刚定义，所以是进入准备状态，因为每new一个promise都会进入准备状态，我们还没有运行就进入准备状态了，所以，我们经常用一个函数给他包起来

  function asyncPro(){
        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用法简单总结，后续会再补充。