一、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. Docker之镜像地址

    转载自https://www.cnblogs.com/doraman/p/9570891.html 官方docker hub 官方:https://hub.docker.com/explore/ 常用 ...

  2. wepy 小程序开发（interceptor拦截器 && WXS）

    WePY全局拦截器可对原生API的请求进行拦截. import wepy from 'wepy'; export default class extends wepy.app { constructo ...

  3. promise对象里resolve和reject状态讲解及Promise.all()的使用

    首先来说下同步异步与阻塞非阻塞的概念,同步异步与阻塞非阻塞并没有关系.同步异步主要是事情做完以后,如何进行处理.或者说关注的是一种消息通信机制. 同步的情况下,是由处理消息者自己去等待消息是否被触发: ...

  4. 最短Hamilton路径 数位dp

    最短Hamilton路径 #include<bits/stdc++.h> using namespace std; ; <<maxn][maxn]; int maps[maxn ...

  5. 06.drf(django)的权限

    默认配置已经启用权限控制 settings 'django.contrib.auth', 默认 migrate 会给每个模型赋予4个权限,如果 ORM 类不托管给django管理,而是直接在数据库中建 ...

  6. linux_centos7_时间更新

    EDT:美国时间            CST:中国北京时间 方法一.使用ntpdate从时间服务器更新时间: 1.下载ntpdate组件 yum install -y ntp 2.完成后直接测试 [ ...

  7. format函数格式化显示的方法

    数字 格式 输出 描述 3.1415926 {:.2f} 3.14 保留小数点后两位 3.1415926 {:+.2f} +3.14 带符号保留小数点后两位 -1 {:+.2f} -1.00 带符号保 ...

  8. ztree实用教程

    首先导入ztree ztree是建立在jquery的基础上的 <link href="js/zTree_v3-master/css/zTreeStyle/zTreeStyle.css& ...

  9. nodejs 开发服务端 部署到 iis 服务器环境 -- iisnode 安装问题解决记录

    开发环境 nodejs: v10.15.3 windows: 10 iis: 10 需求: 用Nodejs开发了服务端,要部署到IIS 需要在IIS服务器上安装iisnode,结果遇到问题:安装不上 ...

  10. 关于vue的多页面标签功能，对于嵌套router-view缓存的最终无奈解决方法

    最近写我自己的后台开发框架,要弄一个多页面标签功能,之前有试过vue-element-admin的多页面,以为很完美,就按它的思路重新写了一个,但发现还是有问题的. vue-element-admin ...