zoukankan      html  css  js  c++  java
  • js Promise学习

    js Promise

    • promise入参为两个
      • 成功时的执行 resolve
      • 失败时的执行 reject
    • promise的状态

      • 肯定(fulfilled) 该 Promise 对应的操作成功了
      • 否定(rejected) 该 Promise 对应的操作失败了
      • 等待(pending) 还没有得到肯定或者否定结果,进行中
      • 结束(settled) 已经肯定或者否定了
    • promise必须实现then方法,只有实现then方法才可以取出promise里面的值

        var promise = new Promise(function(resolve, reject) {
            resolve(1);
        });
    
        promise.then(function(val) {
            console.log(val); // 1
        });
    
    • then方法返回的不是值,而是promise,此promise需要用then方法实现之后才可以取出其中的值
        var promise = new Promise(function(resolve, reject) {
            resolve(1);
        });
    
        var aa = promise.then(function(val) {
            console.log(val); // 1
            return val + 2;
        });
        aa.then(function(data){
            console.log(data);// 3
        });
        console.log(aa);//obj

    此时的aa是一个promise,状态是pending

    • 链接调用;promise的链接调用功能是非常强大,并且代码可读性也是相当的高
        var promise = new Promise(function(resolve, reject) {
            resolve(1);
        });
    
        promise.then(function(val) {
            console.log(val); // 1
            return val + 2;
        }).then(function(data){
            console.log(data);// 3
        });
    • 执行顺序;promise执行在后;
        var promise = new Promise(function(resolve, reject) {
            resolve(1);
        });
    
        promise.then(function(val) {
            console.log(val); // 1
        });
    
        console.log("first");

    以上代码会先输入first,然后再输出1

    • 如何取promise当中的值
      var promise = new Promise(function(resolve, reject) {
          resolve(1);
      });
    
      var aa = promise.then(function(val) {
          var res = {},
              age = val + 2;
          res.age = age;
          return res;
      }).then(function(data) {
          data.name = "zhangsan";
          return data;
      }).then(function(data) {
          if (data.name == "zhangsan" && data.age == 3) {
              data.address = "Hangzhou China";
          }
          return data;
      });
    
      aa.then(function(data) {
          console.log(data);
      })
    
    //返回结果:
    [object Object] {
      address: "Hangzhou China",
      age: 3,
      name: "zhangsan"
    }

    每一次实现then方法的时候,都需要将data全部组装返回,这样才可以保证最后得到的值是全部的data

    版权声明:本文为博主原创文章,未经博主允许不得转载。

  • 相关阅读:
    css 中关于border-color 继承了color的说明
    关于飞书的相关开发案例
    好看的点赞设计
    较好的设计网站参考
    较好的B端设计体验 说明
    基于vue的流程图插件
    较好看的中后台模板(ui)
    前端笔记-201807
    前端笔记(201905-201906)
    前端笔记(201902-201904)
  • 原文地址:https://www.cnblogs.com/penggy/p/4786486.html
Copyright © 2011-2022 走看看