一、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. Centos 7 下自启动服务配置

    在服务器部署服务后,往往需要将服务设置成开机自启的状态 ,以防设备出现宕机或断电重启,服务无法访问的情况. 对于常见的服务(httpd,mysqld,nginx)来说,可通过系统 systemctl ...

  2. webpack配置篇

    开发环境(development)和生产环境(production)的构建目标差异很大.在开发环境中,我们需要具有强大的.具有实时重新加载(live reloading)或热模块替换(hot modu ...

  3. 梳理继承中的has a和is a

    面向对象中的继承问题,研究了一天 ,简单梳理下其中最重要的has a和is a 1.has a 一个类中使用了另一个类中的自定义的类型 这里Student中使用了Book 和 computer2.类型 ...

  4. Kubernetes fabric8 JavaAPI

    Kubernetes fabric8 JavaAPI 一.依赖准备 <dependency> <groupId>io.fabric8</groupId> <a ...

  5. Redis设计原理简介

    学完MySQL InnoDB之后,又开始学习和研究Redis. 首先介绍下书:<Redis设计与实现>第二版 黄健宏著,机械工业出版社,388页,基于redis3.0版本.版本有点低,这个 ...

  6. redis学习——day01_redis简介与安装

    一.Redis 简介 1.1 Redis是什么 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统.Redi ...

  7. day20 函数闭包与装饰器

    装饰器:本质就是函数,功能是为其他函数添加新功能 原则: 1.不修改被装饰函数的源代码(开放封闭原则) 2.为被装饰函数添加新功能后,不修改被修饰函数的调用方式 装饰器的知识储备: 装饰器=高阶函数+ ...

  8. [UWP]使用离散式关键帧播放动画

    这篇文章介绍离散式关键帧,并使用它做些有趣的动画. 1. 什么是离散式关键帧 以DoubleAnimationUsingKeyFrames为例,它支持四种Double的关键帧,其中EasingDoub ...

  9. [Objective-C] 021 KVC、KVO

    写过C#的都知道C#通过反射读写一个对象的属性特别方便,可以利用字符串的方式去动态控制一个对象.其实在ObjC中,我们可以更高级点,根本不必进行任何操作就可以进行属性的动态读写,这种方式就是Key V ...

  10. [Objective-C] 007_Foundation框架之NSString与NSMutableString

    在Cocoa Foundation中的NSString和NSMutableString类,为我们提供了Unicode字符串的支持,NSString和NSMutableString类最大的区别是:NSS ...