一、Promise()的基本使用

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<script>

  // 1. 使用setTimeout

  // setTimeout(()=>{

  //   console.log("Hello word");

  // },1000)

  // 2. promise的使用

//  promise的参数-> 函数(resolve，reject)

//  resolve，reject本身他们就是函数

//   new Promise((resolve,reject) =>{

//     setTimeout(()=>{

//     console.log("Hello word");

//   },1000)

//   })

  // 3. 异步操作的时候使用promise对这个异步操作进行封装

  // new -> 构造函数(1.保存一些状态信息 2. 执行传入的函数 )

  // 在执行传入的回调函数时，会传入两个函数，resolve，reject 他们本身又是函数

    new Promise((resolve,reject)=>{

      setTimeout(()=>{

        // 成功的时候调用resolve

        // resolve('Hello Word')

        //  失败的时候调用reject

        reject('error message')

        // 失败的时候调用reject

      },1000)

    }).then((data) =>{

      console.log(data);

      console.log(data);

      console.log(data);

      console.log(data);

    }).catch((err)=>{

      console.log(err);

      console.log(err);

      console.log(err);

      console.log(err);

    })

</script>

</body>

</html>

基本使用

二、Promise((resolve,reject)=>{reject()}).then(success=>{},err=>{})

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<script>

new Promise((resolve, reject)=>{

  setTimeout(()=>{

    reject('error');

    // resolve("Hello");

  },1000)

}).then(

    data =>{console.log(data);}

    ,

    err =>{console.log(err);

              alert(err, 'reject')

   })

    //只写一个then(success=>{},err=>{})

</script>

</body>

</html>

.then()

三、Promise()链式操作和简写

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<script>

  // 需求

  // 网络请求: aaa -> 自己处理(10行)

  // 处理： aaa111 -> 自己处理(10行)

  // 处理： aaa111222 -> 自己处理

  // new Promise((resolve,reject) => {

  //   setTimeout(()=>{

  //     resolve('aaa')

  //   },1000)

  // }).then(res => {

  //       // 1. 自己处理10行代码

  //       console.log(res,"第一层的10行处理代码");

  //

  //       // 2. 对结果进行第二次处理

  //       return new Promise((resolve)=>{

  //         resolve(res + '111')

  //       })

  //     }).then(res =>{

  //       console.log(res,'第二层的10行处理代码');

  //

  //       return new Promise(resolve => {

  //         resolve(res + '222')

  //       })

  //     }).then(res=>{

  //       console.log(res,'第三层的10行处理代码');

  //     })

//没有异步的时候可以简写

  // 简写（省略new Promise()完整过程，直接return Promise.resolve(res + '111')）

  // new Promise((resolve,reject) => {

  //   setTimeout(()=>{

  //     resolve('aaa')

  //   },1000)

  // }).then(res => {

  //       // 1. 自己处理10行代码

  //       console.log(res,"第一层的10行处理代码");

  //

  //       // 2. 对结果进行第二次处理

  //       return Promise.resolve(res + '111')

  //

  //     }).then(res =>{

  //       console.log(res,'第二层的10行处理代码');

  //

  //       return Promise.resolve(res + '222')

  //     }).then(res=>{

  //       console.log(res,'第三层的10行处理代码');

  //     })

  // 极简写（再省略Promise，直接return res + '111'）

  // new Promise((resolve,reject) => {

  //   setTimeout(()=>{

  //     resolve('aaa')

  //   },1000)

  // }).then(res => {

  //       // 1. 自己处理10行代码

  //       console.log(res,"第一层的10行处理代码");

  //

  //       // 2. 对结果进行第二次处理

  //       return res + '111'

  //

  //     }).then(res =>{

  //       console.log(res,'第二层的10行处理代码');

  //

  //       return res + '222'

  //     }).then(res=>{

  //       console.log(res,'第三层的10行处理代码');

  //     })

  // 加异常简写

    new Promise((resolve,reject) => {

    setTimeout(()=>{

      resolve('aaa')

    },1000)

  }).then(res => {

        // 1. 自己处理10行代码

        console.log(res,"第一层的10行处理代码");

        // 2. 异常处理写法

        // return Promise.reject('error message')

      throw "error msg"

      }).then(res =>{

        console.log(res,'第二层的10行处理代码');

        return Promise.resolve(res + '222')

      }).then(res=>{

        // 不会处理这条，被异常跳过了

        console.log(res,'第三层的10行处理代码');

      }).catch(err=>{

      console.log(err);

    })

</script>

</body>

</html>

链式操作

四、Promise.all()

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

<script>

  //两个异步都完成的时候调.then()

  // .then(results=>{

  //   console.log(results);          results是一个数组，

  //   console.log(results[0]);   第一个Promise的结果

  //   console.log(results[1]);   第二个Promise的结果

  // })

  Promise.all([   // all里面传入的是一个可迭代对象

      new Promise ((resolve, reject) =>{

        setTimeout(() =>{

          resolve("result1")

          console.log("2秒")

        },2000)

      }),

      new Promise((resolve, reject) => {

        setTimeout(()=>{

          resolve('result2')

          console.log("1秒")

        },1000)

      })

  ]).then(results=>{

    console.log(results);

    console.log(results[0]);

    console.log(results[1]);

  })

</script>

</body>

</html>

.all

ES6优雅的异步操作Promise()的更多相关文章

  1. ES6新特性之 promise

    新的ES6中引入了promise的概念,目的是让回调更为优雅.层层嵌套的回调会让javascript失去美感和可读性,同时javascript也推荐采用链式的方式去书写函数调用.于是Promise就应 ...

  2. javascript ES6 新特性之 Promise，ES7 async / await

    es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向 ...

  3. es6学习3：promise

    promise含义: 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果. 从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Pro ...

  4. 石川es6课程---12、Promise

    石川es6课程---12.Promise 一.总结 一句话总结: 用同步的方式来书写异步代码,让异步书写变的特别简单 用同步的方式来书写异步代码Promise 让异步操作写起来,像在写同步操作的流程, ...

  5. es6 快速入门 系列 —— promise

    其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...

  6. ES6异步操作Promise

    什么是Promise Promise是异步编程的一种解决方案,说白了就是一个构造函数,带有all,reject,resolve这几个方法,圆形上有then,catch等方法 Promise的特点 对象 ...

  7. ES6学习笔记之Promise

    入职百度EFE团队实习已经三周了,实习中接触到了生产环境的技术和开发流程,大开眼界,和自己在学校接小作坊式项目是很不一样的体验.其中一个很大的感触是,ES6早已不是“选修”的尝鲜技术,而是已经全面普及 ...

  8. ES6系列_14之promise对象的简单使用

    1.产生原因 在前端开发中,最常见的的就是"回调",我相信很多人对于这个"回调"可谓是印象深刻呢.究其原因是因为层层回调会造成所谓的“回调地狱 (callbac ...

  9. ES6入门八：Promise异步编程与模拟实现源码

    Promise的基本使用入门: ——实例化promise对象与注册回调 ——宏任务与微任务的执行顺序 ——then方法的链式调用与抛出错误(throw new Error) ——链式调用的返回值与传值 ...

随机推荐

  1. php-fpm搜索php.ini很奇怪的一个现象

    php-fpm 找不到 php.ini phpinfo 或者 php -i 上来看,搜索的目录都是/usr/local/php/etc下,但是事实上并没用去找这个目录 bin/php --ini 来看 ...

  2. 微信小程序跑步计时器

    firstStep:run.wxml <view class="head" style="flex-direction:row;"> <ima ...

  3. DRF认证组件

    1.DRF认证组件之视图注册用法(自定义简单使用) settings.py配置 INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.a ...

  4. Django模板之模板标签

    标签比变量更加复杂:一些在输出中创建文本,一些通过循环或逻辑来控制流程,一些加载其后的变量将使用到的额外信息到模版中. 一些标签需要开始和结束标签 (例如:{% tag %} ...标签 内容 ... ...

  5. eslint插件开发教程

    开发eslint插件目的:根据项目需要,自定义满足项目特殊需要的校验规则 参考eslint官方文档展开阐述 插件开发 自定义规则 单元测试 下面开始通过一个示例demo来介绍插件整个开发流程 代码中出 ...

  6. charme浏览器 jquery1.9.1min.js 报脚本错误 无jquery.min.map 文件

    http://www.vipaq.com/Article/View/blog/357.html /*! jQuery v1.9.1 | (c) 2005, 2012 jQuery Foundation ...

  7. Chipmunk-js物理引擎学习笔记

    一.基本概念## 空间:在Chipmunk中,空间是所有对象容器.因此,刚体.形状.链接节点等对象都需要添加到空间中.空间控制这些对象的相互作用. 刚体:物理上的刚体指的是在运动和受力作用后,形状和大 ...

  8. 如何分析和提高(C/C++)程序的编译速度？

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://www.cnblogs.com/lihuidashen/p/129354 ...

  9. Redis学习笔记（十四）Sentinel(哨兵)（上）

    最近谈到Redis就会听到哨兵模式,工作期间同事也分享过关于哨兵模式的知识,但由于工作忙(给自己找个借口)没有没认真看,现在恶补下,老样子还是分上篇应用,下篇看实现过程,下面我们来看下哨兵到底是啥? ...

  10. 在DAO的查询操作里，数据库查询到记录，sql语句也成功执行，但是返回的对象是null

     在这里  如果改成User user=null; 后面 对user对象的赋值是会失败的. 原因: 要赋值的话,一定要有对象,要new一下给对象分配空间然后再给对象赋值.