ES6 promise用法总结

分类：ES6作者：佚名

一   什么时候promise?

promise是异步编程的一个解决方案,是一个构造函数,身上带着all,resolve,reject,原型上有cath,then等方法

promise有两个特点:

1) 对象的结果不受外界影响,promise对象就代表一个异步操作,它有三种状态:pedding(进行中)  fulfiled(已完成)  rejected(已失败),只有异步操作的结果能够改变状态,其它任何操作都无法改变这个状态

2) 一旦状态改变,任何时候都会得到结果,而且不能够再改变这中状态. 状态的改变只有两种可能:pedding----->rulfiled     pedding--->rejected　　只要这两种状态发生了,转态就凝固了,这时称resolved(已定型)

下面我们简单new promise一下

 let result= new Promise((resolve,reject)=>{
    setTimeout(() => {
      console.log("执行成功");
      
      resolve("需要返回的数据接口")
    }, 2000);
  })

我们用打开页面,去控制台查看

 

执行过程: 执行一个异步操作,也就是settimeout,2s后打印执行成功,然后回调resolve方法

 

我们new promise对象的时候,自动执行了里面的内容,我们没有办法控制promise什么时候执行,

所以我们通常在使用它的时候在它的外面套一个函数,当我们需要用到它的时候去执行函数就可以了

<body>
  <button onclick="btnClick()">执行操作</button>
</body>
<script>
  function btnClick(){
    let result = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("执行成功");

        resolve("需要返回的数据接口")
      }, 2000);
    })
    return result
  }

点击按钮,控制台结果输出:执行成功

放在函数中,我们返回的promise对象,对象身上有then,catch,all等方法了

上面的代码中还有resolve,它是什么呢  下面我们还是代码展示

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

调用promise对象(也就是btnClick()的返回值)的then方法,then方法里面的参数是一个函数,该函数的参数接受resolve里面的返回值,这时就会输出:

 

这样一来,你应该就知道了原来then在btnClick执行异步操作完毕之后被执行,这就是promise的作用了.

promise只是能够简化层层调用的写法,而实质上最主要的精髓在于用维护转态,处理状态使得调用及时,相比于callback来说更加简单,灵活.

backcall方式

asyncFunc1(opt, (...args1) => {
    asyncFunc2(opt, (...args2) => {
        asyncFunc3(opt, (...args3) => {
            asyncFunc4(opt, (...args4) => {
                // some operation
            })
        })
    })
})

可以看到，我们没增加一个异步请求，就会多添加一层回调函数的嵌套，这段代码中四个异步函数的嵌套已经开始使一段本可以语言明确的代码编程不易阅读与维护了

promise方式

new proimse((resolve,reject)=>{

　　ansyncFunc1(opt,(...arg1)=>{

　　　　resolve(result1)
　　})

}).then((data1)=>{

　　return asyncFunc2(opt,(...args2))

}).then((data2)=>{

　　return asyncFunc3(opt,(...args2))

}).then((data3)=>{
　　return asyncFunc3(opt,(...args2))

}).then((data4)=>{

　　some operation

})

两者比较,虽然看起来,promise方式虽然看起来代码量庞大了,但是缺更容易理解了,而callback嵌套,使人看到特别头疼,而且会加大维护的难度.这就是promise优势所在.

reject用法

上面介绍了resove成功的时候的回调,就是讲promise的状态从pedding--->fulfiled的转态.而reject就是讲promise的状态从pedding--->rejected状态,这样我们就可以在then方法中捕获调用失败的信息

  function btnClick(){
    let result = new Promise((resolve, reject) => {
      setTimeout(() => {
        var flag = false
        if(flag){
          resolve("成功拿到flag")
        }else{
          reject("没有拿到flag")
        }
      }, 2000);
    })
    return result
  }
  btnClick().then((data)=>{
    console.log("接收resolve的数据--->"+data);
  },(err)=>{
    console.log("接收reject的回调--->"+err);
  })

控制台打印

 

promise调用then方法时,往里面传了两个参数,第一个是接收resolve的函数,第二个是接收reject调用失败的函数

因为我们将flag设置的为false则执行reject然后then方法中捕获到调用失败的信息,并打印

catch的用法

与Promise对象方法then方法中第二个回调函数相同的一个方法就是catch,catch也是是用来捕获异常的.与then中的用法是一样的,

下面介绍一下它的强大之处

  function btnClick(){
    let result = new Promise((resolve, reject) => {
      setTimeout(() => {
        var flag = true
        if(flag){
          resolve("成功拿到flag")
        }else{
          reject("没有拿到flag")
        }
      }, 2000);
    })
    return result
  }
  btnClick().then((data)=>{
    console.log("接收resolve的数据--->"+nodata);
  }).catch((err)=>{
    console.log("接收reject的回调--->" +err);
  })

控制台没有报错而是将报错的信息传给了catch,然后进行输出打印

 

 这样的话,即使进入了resove的then方法中,有错误,也不会报错了

all的用法

all是与then同级的另一个方法，all方法，该方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后并且执行结果都是成功的时候才执行回调。

function btn1(){
    let result1 = new Promise((reslove,reject)=>{
      setTimeout(()=>{
        let num = parseInt(Math.random() * 20 + 1)
        console.log("获得第一个数据");
        reslove(num)
      },1000)
    })
    return result1
  }
  function btn2(){
      let result2 = new Promise((reslove, reject) => {
      setTimeout(() => {
        let num = parseInt(Math.random() * 20 + 1)
        console.log("获得第二个数据");
        reslove(num)
      }, 2000);
    })
    return result2
  }
  function btn3() {
      let result3 = new Promise((reslove, reject) => {
        setTimeout(() => {
          let num = parseInt(Math.random() * 20 + 1)
          console.log("获得第三个数据");
          reslove(num)
        }, 3000);
      })
      return result3
    }
  Promise.all([btn1(),btn2(),btn3()]).then((result)=>{
    console.log("获得全部数据,可以渲染页面");
    console.log(result);
  })

promise.all中的参数是一个promise对象的数组,然后执行,当他们全部执行完毕后,会生成一个数组,里面就是全部的数据.

分别执行得到结果，all统一执行完三个函数并将值存在一个数组里面返回给then进行回调输出,结果如下

 

all方法,通常是用在一个页面需要加载数据需要同时拥有才能去渲染的情况,例如上边的例子,需要获得三个数据,然后才可以渲染页面

 race方法

all方法是全部执行完毕之后才返回结果,而race方法是最先执行完毕的可以进入race的回调,其余的就不能再进入了

 

function btn1() {
      let result1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          let num = parseInt(Math.random() * 20 + 1)
          if(num>10){
            console.log("4s获得第一个数据即将执行resolve");
            resolve(num)
          }else{
            console.log("4s执行函数失败,即将执行reject");
            reject("获取失败")
          }
        }, 4000)
      })
      return result1
    }
    function btn2() {
      let result2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          let num = parseInt(Math.random() * 20 + 1)
          if(num>10){
            console.log("2s获得第二个数据,即将执行resolve");
            resolve(num)
          }else{
            console.log("2s执行函数失败,即将执行reject");
            reject("获取失败")
          }
        }, 2000);
      })
      return result2
    }
    function btn3() {
      let result3 = new Promise((resolve, reject) => {
        setTimeout(() => {
          let num = parseInt(Math.random() * 20 + 1)
          if(num>10){
            console.log("3s获得第三个数据,即将执行resolve");
            resolve(num)
          }else{
            console.log("3s执行函数失败,即将执行reject");
            reject("获取失败")
          }
        }, 3000);
      })
      return result3
    }
    Promise.race([btn1(), btn2(), btn3()]).then((result)=>{
      console.log("获得数据:"+result);
      console.log("回调完成");
    }).catch((err)=>{
      console.log(err);
    })

控制台输出,第一个回调失败时,下面的不会再进入race回调

 

 控制台输出,第一个回调成功时,下面的也不会再进入race回调

 

 

综上所述,就是用race方法时,先执行完的无论是resolve还是reject都将会进入race回调,并且后面的不会再进入回调.

race方法,应用场景:代码如下

    function btn1(){
        let result = new Promise((resolve,reject)=>{
            //异步请求,比ajax,axios等
            resolve(data)
        })
        return result
    }
    function time(){
        let result = new Promise((resolve,reject)=>{
            setTimeout(() => {
                reject("请求超时")
            }, 10000);
        })
        return result
    }
    Promise.race([btn1(),time()]).then((data)=>{
        console.log(data);
    }).catch((err)=>{
        console.log(err);
    })

time()为一个异步操作10s的时间,让btn1()和它同时奔跑,如果btn1()在10s内获得数据,则显示数据,否则显示请求超时

这个就是看大佬们的博客,自己的一点理解,然后有不对的地方可以提出来,共同进步,讨论,学习,

下面时大佬博客的链接:https://blog.csdn.net/qq_34645412/article/details/81170576

 

原文地址：https://www.cnblogs.com/junlebao/p/13198027.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

ES6模块的import和export用法总结
原文连接：https://www.cnblogs.com/dupd/p/5951311.htmlES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。ES6在语言规格的层面上，实现了模块功能，而且...
浅谈Es6中import * as xxx from几种基本用法
以为Es6，javascript第一次支持了module。ES6的模块化分为导出（export）与导入（import）两个模块，其中在项目中，我们会经常看到一种用法import * as obj from，这种写法是把所有的输出包裹到obj对象里。示例一 1 2 3 4 5 6 7 // index.js export function fn1(data){ console.log(1) } export f.
ES6系列文章 异步神器async-await
视频讲解关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。async-await和Promise的关系经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点，接收了这些信息后，就蒙圈了。现在才知道...
TypeScript看完就会了
TypeScript什么是TypeScript?TypeScript是由微软开发的一款开源的编程语言TypeScript是JavaScript的超集，遵循最新的ES5 ES6规范，TypeScript扩展了JavaScript的语法TypeScript更像后端 Java c# 这样的面向对象语言可以让js开发大型企业项目谷歌也在大力支持TypeScript的推广，React ，VUE 都集成了TypeScriptTypeScript安装安装-- 安装npm install -g type
typeScript 变量名 冒号 类名 ＜–这种写法什么意思?
export class AppComponent { title = 'Tour of heroes'; hero: Hero = { id: 1, name: '张三' };}export class Hero { id: number; name: string;}就是这一段,看起来有点晕,这里是实例化一个Hero类型的对象hero,还是创建一个变量?后面是赋值,但是不知道什么意思?hero: Hero = { id: 1, na.
用 async/await 来处理异步
用 async/await 来处理异步昨天看了一篇vue的教程，作者用async/ await来发送异步请求，从服务端获取数据，代码很简洁，同时async/await 已经被标准化，是时候学习一下了。先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async 函数async function timeout() {return 'hello world'
es6之解构赋值
es6的语法已经出了很长的时间了，在使用上也可以通过babel这类的编译工具转译为浏览器可以识别的es5的语法，但是依旧有很多开发在写代码的时候，依旧没有用es6的语法，而是习惯使用老的语法，这篇文章主要会介绍解构赋值基本用法以及在实际使用场景中相比es5语法的优势，让大家从根本上了解es6语法的优势基本用法数组解构让我们一起先来看数组解构的基本用法：let [a, b, c] ...
TypeScript 定义函数的几种写法
参考链接1 参考链接2写法1 - 使用 function 关键字function greeter(fn: (a: string) =&gt; void) { fn("Hello, World");}function printToConsole(s: string) { console.log(s);}greeter(printToConsole);(a: string) =&gt; void上述语法的含义：表示一个函数，接收一个字符串作为输入参数，没有返回参数。可
es6
ES6简介-ECMAScript是javascript标准-ES6就是ECMAScript的第6个版本-ECMAScript6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ES6新增加的功能：1.let
ES6的函数写法总结，一看就会！
ES6  在ES5的基础上增加了一些新的特性和写法，特别在函数写法上，增加了箭头函数 1.正经的函数写法//普通的传递值的写法functionsum1(x,y){returnx+y;}constres=sum1(2,3);console.log(res);//传递对象的方式,调用时需要传递一个对象过去function
JavaScript中的es5及es6新增的内容
ES5及ES6es表示ECMASCript，他是从es3，es5，es6，es5是2009.12月发布的，es6是2015.6月发布的。vue2完全支持es5的（vue3完全支持es6的），react完全支持es6es5的新特性严格模式（对应的相反的称为怪异模式）'usestrict'//一般用于相关的设计上面书写一个严格模式底下的代码就需要按照严格模
ES5及ES6
ES5的严格模式所谓严格模式，从字面上就很好理解，即更严格的模式，在这种模式下执行，浏览器会对JS的要求更苛刻，语法格式要求更细致，更符合逻辑。怪异模式：就是我们之前一直使用的开发模式，就叫怪异模式。因为很多时候出来的结果是非常怪异的，所以才称之为怪异模式。'usestrict'//一般用
es6 export和export default的区别
相同点export与exportdefault均可用于导出常量、函数、文件、模块可在其它文件或模块中通过import+(常量|函数|文件|模块)名的方式，将其导入，以便能够对其进行使用不同点一、在一个文件或模块中，export、import可以有多个，exportdefault仅有一个//model.jsle
学习ES6[尚硅谷二]笔记
24.class类 25.class中的extend 26.super关键字 27.super应用 28.class属性 30.静态成员和实例成员 31.构造函数问题 32.构造函数原型 33.原型链 34.js查找机制 35.原型对象中this指向 36.扩展内置对象方法 37.call方法 38.借用父构造函数
【JS高级】es6
什么是ES6ES的全称是ECMAScript,它是由ECMA国际标准化组织,制定的一项脚本语言的标准化规范。泛指2015年发布的es2015版极其后续版本ES6中新增语法letES6中新增的用于声明变量的关键字。注意:使用let关键字声明的变量才具有块级作用域，使用var声明的变量不具备块级作用域特
JavaScript ES6新增
命名修饰符let：不能重复声明变量、块级作用域leta=1;leta=2;//报错const：初始化常量，必须给初始值，否则报错、在同一个作用域内，const定义的常量不能修改其值、块级作用域consta=10a=100//报错，不能重复声明解构constobj={name:'jack'age:18sex:'
ES6
ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。1{2leta=10;3varb=1;4}56a//ReferenceError:aisnotdefined.7b//1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用
ES6基础知识解构赋值
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatib
es6 正则的扩展
一，RegExp构造函数es5中，RegExp构造函数的参数有两种情况。1，参数是字符串，第二个参数表示正则表达式的修饰符（flag）。2，参数是一个正则表达式，返回一个原有正则表达式的拷贝。es6中，如果RegExp构造函数第一个参数是一个正则对象，那么可以使用第二个参数指定修饰符。而
ES6学习笔记二-字符串的扩展
一、字符的Unicode表示法JavaScript允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。表示法只限于码点在\u0000~\uFFFF之间的字符，超过该范围需要用两个双字节表示ES6改进：将码点放入大括号，就能正确解读该字符。转换参考：https://blog.csdn.net/hezh1994/ar
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot