2.2异步编程之promise

异步编程之promise

学习promise时，其中我觉得then()很重要，所以此篇学习总结中代码部分主要是展现then().

1、promise

promise是ES6中新增的异步编程解决方案, 在代码中的表现是一个对象。

2.创建Promise对象

new Promise(function(resolve, reject){…});

注意：( promise对象不是异步的, 只要创建promise对象就会立即执行存放的代码)

3.promise作用

      promise对象可以将异步操作以同步流程来表示, 避免了回调函数层层嵌套。
      企业开发中为了保存异步代码的执行顺序, 那么就会出现回调函数层层嵌套，此时如果回调函数嵌套的层数太多, 就会导致代码的阅读性和可维护性大大降低。

4.Promise通过同步的流程表示异步的操作方法

      promise对象是通过状态的改变来实现的, 只要状态发生改变就会自动触发对应的函数.

5.Promise对象三种状态

1. pending: 默认状态，只要没有告诉promise任务是成功还是失败就是pending状态
2. fulfilled(resolved): 只要调用resolve函数, 状态就会变为fulfilled, 表示操作成功
3. rejected: 只要调用rejected函数, 状态就会变为rejected, 表示操作失败

注意： 状态一旦改变既不可逆, 既从pending变为fulfilled, 那么永远都是fulfilled，既从pending变为rejected, 那么永远都是rejected。

5.监听Promise状态改变

通过函数来监听状态的变化
resolved --> then()
rejected --> catch()

6.then方法

then方法接收两个参数,
第一个参数是状态切换为成功时的回调,
第二个参数是状态切换为失败时的回调

代码举例

6.1 在修改promise状态时, 可以传递参数给then方法中的回调函数

let promise = new Promise(function (resolve, reject) {
resolve("111"); // 将状态修改为成功
//reject("aaa"); // 将状态修改为失败 
    });
 promise.then(function (data) {
    console.log("成功", data);
 }, function (data) {
    console.log("失败", data);
    });
    打印结果为：成功 111

 

6.2 同一个promise对象可以多次调用then方法,

该promise对象的状态会被其所有then方法执行

    let promise = new Promise(function (resolve, reject) {
        // resolve(); // 将状态修改为成功
        reject(); // 将状态修改为失败
    });
    promise.then(function () {
        console.log("成功1");
    }, function () {
        console.log("失败1");
    });
    promise.then(function () {
        console.log("成功2");
    }, function () {
        console.log("失败2");
    });
     let promise1 = new Promise(function (resolve, reject) {
        resolve(); // 将状态修改为成功
        // reject(); // 将状态修改为失败
    })
    promise1.then(function () {
        console.log("成功1");
    }, function () {
        console.log("失败1");
    }).then(function () {
        console.log("成功2");
    }, function () {
        console.log("失败2");3
    });
    打印结果为：失败1   失败2     成功1   成功2

 

6.3 then方法每次执行完毕后会返回一个新的promise对象

let promise = new Promise(function (resolve, reject) {
    resolve(); // 将状态修改为成功
    // reject(); // 将状态修改为失败
    });
 let p2 = promise.then(function () {
     console.log("成功1");
    }, function () {
        console.log("失败1");
    });
    console.log(p2);
    console.log(promise === p2);

    打印结果为：Promise对象   false   成功1

 

6. 4 可以通过上一个promise对象的then方法给下一个promise对象的then方法传递参数

注意点:
上一个promise对象无论是成功的回调还是失败的回调传递的参数,，都会传递给下一个promise对象成功的回调

    let promise = new Promise(function (resolve, reject) {
        // resolve("111"); // 将状态修改为成功
        reject("aaa"); // 将状态修改为失败
    });
    let p2 = promise.then(function (data) {
        console.log("成功1", data);
        return "222";
    }, function (data) {
        console.log("失败1", data);
        return "bbb";
    });
    p2.then(function (data) {
        console.log("成功2", data);
    }, function (data) {
        console.log("失败2", data);
    });

    打印结果为：失败1 aaa    成功2 bbb

 

6.5 如果then方法返回的是一个Promise对象, 那么会将返回的Promise对象的执行结果中的值传递给下一个then方法

let promise = new Promise(function (resolve, reject) {
        resolve("111"); // 将状态修改为成功
        // reject("111"); // 将状态修改为失败
    });
    let promise2= new Promise(function (resolve,reject) {
        reject("222");
    });
     promise.then(function (data) {
        console.log("成功1",data);
        return promise2;
    }, function (data) {
        console.log("失败1",data);
         // return promise2;
    }).then(function (data) {
       console.log("成功2",data);
   }, function (data) {
       console.log("失败2",data);
   });
    打印结果为：成功1 111     失败2 222

以上为今日的总结，继续加油~