一、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. Postman学习之Authorization

    前言:本章将学习Postman当中的授权——Authorization 一.简介 Authorization顾名思义就是授权的意思,那是给谁授权呢?又有多少种授权的方式呢?Authorization是 ...

  2. Angular核心概念之五---过滤器

    Filter:过滤器,用于在view中呈现数据时显示为另一种格式:过滤器的本质是一个函数,接收原始数据转换为新的格式进行输出: function(oldVal){ ... return newVal ...

  3. Hexo进阶设置

    部署平台选型 前言 GitHub和Gitee(码云)是国内外比较流行的代码托管平台,现都推出GitHub/Gitee Pages可以存放静态网页代码,因此可以用来搭建自己的博客. 优缺点 平台 优点 ...

  4. poj3621 SPFA判断正环+二分答案

    Farmer John has decided to reward his cows for their hard work by taking them on a tour of the big c ...

  5. hdu2093 考试排名（还需完善）

    下面代码是借鉴的.好多的知识点等着完善 #include <iostream> #include <string> #include <algorithm> usi ...

  6. Write a merge sort program

    Merge Sort- Recursion Write a merge sort program in JavaScript. Sample array : [34, 7, 23, 32, 5, 62 ...

  7. elementUI中el-input输入数字且保留指定小数位

    <input type="text" placeholder="请输入保留一位小数的数字" class="user-input user-nam ...

  8. PIC单片机的for定时

    看到公司的一个项目上的用的for定时 但是网上查找看到<PIC16系列单片机C程序设计与PROTEUS仿真> 上有关于for语句的定时 void Delay(unsigned int n) ...

  9. 16 . PythonWeb框架之Django

    Web框架简介 Web开发是Python语言应用领域的重要部分,也是目前最主要的Web开发语言之一,在其二十多年的历史中出现了数十种Web框架,比如Django.Tornado.Flask.Twist ...

  10. 七个生产案例告诉你BATJ为何选择ElasticSearch！应用场景和优势！

    本文来源于公众号[胖滚猪学编程],转载请注明出处. 从今天开始,想和你一起死磕ElasticSearch,学习分布式搜索引擎,跟着胖滚猪就对了! 既然是ES的第一课,那么最重要的是让你爱上它!不想说那 ...