一、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. 初试stm32嵌入式开发遇到的巨坑

    开发板使用的是st官方的stm32F207ZG nucleo,遇到的问题是在keil中报错: no target connected 到网上找答案,都是说gpio口的问题,让按着reset键改debu ...

  2. 搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

    搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : model - view - viewmodel的缩写,说都能直接说出来 model:模型,view:视图,view-Model:视 ...

  3. linux常用命令---文件软硬链接

    文件链接

  4. Apache 慢连接dos

    http://neue.v2ex.com/t/108717------不实用 http://www.blogjava.net/bukebushuo/articles/293776.html http: ...

  5. python+selenium实现百度关键词搜索自动化操作

    缘起 之前公司找外面网络公司做某些业务相关关键词排名,了解了一下相关的情况,网络公司只需要我们提供网站地址和需要做的关键词即可,故猜想他们采取的方式应该是通过模拟用户搜索提升网站权重进而提升排名. 不 ...

  6. 花6个月写的付费专栏，免费送|仿开源框架从零到一完整实现高性能、可扩展的RPC框架

    作者 渡码,阿里巴巴码农,公众号:渡码 作者,专注大数据开发.数据分析和Python技术. 关注公众号 渡码 回复关键字 manis,可获取电子书.各章节和完整源代码,并且可加入读者群一起交流问题. ...

  7. 新版Element-UI级联选择器高度位置不对的问题

    在做电商后台管理系统项目事遇到的问题,可能视频是去年的,element现在已经是新版本了,有些地方修改了,从而导致了以下问题 级联选择器的位置不对 解决的方法就是在全局css中添加以下代码: .el- ...

  8. C#中的out关键字

    在一个方法里面使用out关键字的时候这个方法中作为out关键字之后的参数会被返回出去:调用这个方法的时候需要先有一个变量来承接这个传递出来.已经被该方法改动过的参数,并且要记得传实参的时候前面带上ou ...

  9. (板子)缩点 + DAG上的DP（深搜）luogu P3387

    板子传送门 根据题目意思,我们只需要找出一条点权最大的路径就行了,不限制点的个数.那么考虑对于一个环上的点被选择了,一整条环是不是应该都被选择,这一定很优,能选干嘛不选.很关键的是题目还允许我们重复经 ...

  10. Springboot之actuator未授权访问

    copy 子杰的哈,懒的写了 0x01  未授权访问可以理解为需要授权才可以访问的页面由于错误的配置等其他原因,导致其他用户可以直接访问,从而引发各种敏感信息泄露. 0x02 Spring Boot ...