Gitlab 高阶函数 Markdown 如何做网络营销推广 scope UIkit vuejs 教程 list获取最后一个元素 mysql操作日志 录音棚设备一套多少钱 grep不是内部命令 pip环境变量配置 html好看的字体 mysql获取当前时间戳 oracle数据库创建表空间 python安装mysql python参数 java数据库 java函数式接口 javarandom java接口怎么写 java中接口的定义 java数组最大值 java获取本机ip java创建目录 java网课 java类方法 h5模板 customerrors 系统集成项目管理工程师教程 rndis驱动下载 beatedit js绝对值 免费的视频剪辑 oem修改器 subscribe 模拟人生2夜生活 excel应用大全 管理文件 ios删除描述文件
当前位置: 首页 > 学习教程  > 编程语言

ES6 Promise的理解应用

2020/12/28 19:23:21 文章标签:

本文是读了阮一峰大神《ES6标准入门》-Promise 对象 后的一些个人的小总结 1. 什么是promise? 1.1 重要概念 一个 Promise 必然处于以下几种状态之一: 待定(pending): 初始状态,既没有被兑现,也没有被拒…

本文是读了阮一峰大神《ES6标准入门》-Promise 对象 后的一些个人的小总结

1. 什么是promise?

1.1 重要概念

一个 Promise 必然处于以下几种状态之一:

  • 待定(pending): 初始状态,既没有被兑现,也没有被拒绝。
  • 已兑现(fulfilled): 操作成功完成。
  • 已拒绝(rejected): 操作失败。

待定状态的 Promise 对象要么会通过一个值被兑现(fulfilled),要么会通过一个原因(错误)被拒绝(rejected)。

1.2 创建promise

  • promise对象是一个构造函数,用来生成promise实例
  • 该构造函数会把一个叫做“处理器函数”(executor function)的函数作为它的参数。这个“处理器函数”接受两个函数resolve 和 reject 作为其参数。
  • 当异步任务顺利完成且返回结果值时,会调用 resolve 函数;而当异步任务失败且返回失败原因(通常是一个错误对象)时,会调用reject 函数。
    • resolve:pending ——> resolved, 异步操作的结果作为返回值
    • reject:pending ——> rejected, 错误原因作为返回值
  • promise实例生成以后,用 then 方法指定resolved状态和rejected状态的回调函数

注:为了方便,resolved(表示 promise 已经处于已敲定(settled)状态)指fulfilled状态。

const promise = new Promise(function(resolve,reject){
  // some codes
  if(/*异步操作成功*/){
    resolve(value);
  }else{
    reject(error);
  }
});
//then方法接受两个回调函数作为参数,第二个函数不一定提供
promise.then(function(value){
  //suc
},function(error){
  //fail
});

举一个栗子:

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done'); //done是resolve函数的参数,这里就是value
  });
}

timeout(3000).then((value) => {
  console.log(value);
});

上面栗子是说,过了指定时间(本例3000ms)后promise实例的状态变成resolved,触发then方法的回调函数打印出结果(done)

2. promise的执行顺序

  • promise新建后立即执行
  • then方法指定的回调函数,在当前脚本所有同步任务执行完成后才执行

直接来看栗子叭~~

console.log('Hi!');
let promise = new Promise(function(resolve, reject) {
  console.log('I am Promise'); //新建后立即执行
  resolve();
});
console.log("I'm tom");
promise.then(function() {
  console.log('resolved.'); //在当前脚本所有同步任务执行完成后才执行
});
console.log("I'm a boy");

结果如下:
在这里插入图片描述

3. 使用promise可以避免回调地狱

初次学习promise的时候,老师说promise可以避免回调地狱。脑子里面一直似懂非懂的,这下终于弄懂了来记录一下。
再举个栗子~~
我们现在想模拟一下接力跑的过程,我们如何用代码实现呢?

function f1(next){
  console.log("f1起跑...");
  setTimeout(()=>{
    console.log("f1到达,传递接力棒");
    next();
  },4000)
}
function f2(next){
  console.log("f2起跑...");
  setTimeout(()=>{
    console.log("f2到达,传递接力棒");
    next();
  },5000)
}
function f3(next){
  console.log("f3起跑...");
  setTimeout(()=>{
    console.log("f3到达终点");
    next();
  },3000)
}
f1(function(){
  f2(function(){
    f3(function(){
        console.log("比赛结束!");
    })
  })
})

通过上面代码,我们的确得到了预期的结果:
在这里插入图片描述
我们难以想象如果有更多的层层嵌套的回调函数,我们还能这样的轻松的、不出错的写出代码吗?
这样的代码可读性低、编写费劲、容易出错,我们该如何解决呢?
来看看用promise如何解决:

function f1(next){
  return new Promise(function(resolve,reject){
    console.log("f1起跑...");
    setTimeout(()=>{
      console.log("f1到达,传递接力棒");
      resolve();
    },4000)
  }) 
}
function f2(next){
  return new Promise(function(resolve,reject){
    console.log("f2起跑...");
    setTimeout(()=>{
      console.log("f2到达,传递接力棒");
      resolve();
    },5000)
  }) 
}
function f3(next){
  return new Promise(function(resolve,reject){
    console.log("f3起跑...");
    setTimeout(()=>{
      console.log("f3到达终点");
      resolve();
    },3000)
  }) 
}
f1()
.then(f2)
.then(f3)
.then(()=>console.log("比赛结束!"));

总结:

  • 使用then方法依次指定多个回调函数
  • 第一个回调函数完成后,会将结果作为参数传入第二个回调函数
  • 采用链式的then,可以指定一组按照次序调用的回调函数。若第一个回调函数返回一个promise对象,这时后面的回调函数会等待该promise对象状态发生变化,才会被调用

还有一些promise的静态方法没有总结,下次补上~


本文链接: http://www.dtmao.cc/news_show_550224.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?