4

前言

今天就简单总结一下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用法简单总结,后续会再补充。


hope93
469 声望18 粉丝

世上无难事,只要肯放弃。。。