【ES6】Promise

Promise

回调地狱

复制代码
const fs = require('fs');

fs.readFile('./a.txt', 'utf-8', (err, data) => {
  if(err) throw err;
  console.log(data);

  fs.readFile('./b.txt', 'utf-8', (err, data) => {
    if(err) throw err;
    console.log(data);

    fs.readFile('./c.txt', 'utf-8', (err, data) => {
      if(err) throw err;
      console.log(data);
    })
  })
})

Promise

Promise对象可以解决回调地狱的问题

Promise可以理解为一个容器,里面可以编写异步程序的代码

基本用法
复制代码
const fs = require('fs');

//1、创建对象
let p = new Promise((resolve, reject) => {
  //把异步任务成功的结果传递给resolve函数,把失败的结果传递给reject函数
  fs.readFile('./a.txt', 'utf-8', (err, data) => {
   //读取文件的时候,没有错误err=null, 有错误err={} 
    err ? reject(err) : resolve(data);
  })
});

//2、获取成功失败结果
p.then(res => console.log(res), err => console.log(err));
Promise三种状态

pending fulfilled rejected

  • 最初状态pending, 等待中,此时promise的结果为undefined;

  • 当调用resolve(data)时, 状态变为 fulfilled

  • 当调用reject(err)时, 状态变为 error

  • 当达到最终的fulfilled或rejected时,promise的状态就不会再改变了(所以多次调用resolve,后面的resolve都无效,只取第一次)

    // 1、创建对象

    let p = new Promise((resolve, reject) => {

    resolve();

    resolve(123);//这次调用无效

    });

    // 2、获取成功失败结果

    p.then(res => console.log(res), err => console.log(err));

Promise同步异步?
复制代码
console.log(1);

//new Promise属于同步代码
new Promise((resolve, reject) => {
  console.log(2);
  resolve(3);
  console.log(4);
}).then(res => console.log(res), err => console.log(err));//.then这里是异步的

console.log(5);

// 1 2 4 5 3
then的链式调用
复制代码
const fs = require('fs');

let p1 = new Promise((resolve, reject) => {
  fs.readFile('./a.txt', 'utf-8', (err, data) => {
    err ? reject(err) : resolve(data);
  })
});

let p2 = new Promise((resolve, reject) => {
  fs.readFile('./b.txt', 'utf-8', (err, data) => {
    err ? reject(err) : resolve(data);
  })
});

let p3 = new Promise((resolve, reject) => {
  fs.readFile('./c.txt', 'utf-8', (err, data) => {
    err ? reject(err) : resolve(data);
  })
});

//前一个then返回一个Promise对象
//后一个then可以得到前一个Promise对象的成功状态的值
p1.then(r1 => {
  console.log(r1); //aaa
  return p2
}).then(r2 => {
  console.log(r2); //bbb
  return p3;
}).then(r3 => {
  console.log(r3); //ccc
})



const fs = require('fs');

function myReadFile(filename) {
  return p = new Promise((resolve, reject) => {
    fs.readFile(filename, 'utf-8', (err, data) => {
      err ? reject(err) : resolve(data);
    })
  })
}

//前一个then返回一个Promise对象
//后一个then可以得到前一个Promise对象的成功状态的值
myReadFile('./a.txt').then(r1 => {
  console.log(r1); //aaa
  return myReadFile('./b.txt');
}).then(r2 => {
  console.log(r2); //bbb
  return myReadFile('./c.txt');
}).then(r3 => {
  console.log(r3); //ccc
})
相关推荐
鲨莎分不晴几秒前
Nginx 部署前端项目实战指南
运维·前端·nginx
码界奇点9 分钟前
基于Vue3与TypeScript的后台管理系统设计与实现
前端·javascript·typescript·vue·毕业设计·源代码管理
ashcn200115 分钟前
水滴按钮解析
前端·javascript·css
攀登的牵牛花15 分钟前
前端向架构突围系列 - 框架设计(五):契约继承原则
前端·架构
爱吃奶酪的松鼠丶22 分钟前
React长列表,性能优化。关于循环遍历的时候,key是用对象数据中的ID还是用索引
javascript·react.js·性能优化
xkxnq1 小时前
第二阶段:Vue 组件化开发(第 17天)
javascript·vue.js·ecmascript
豆苗学前端1 小时前
你所不知道的前端知识,html篇(更新中)
前端·javascript·面试
一 乐1 小时前
绿色农产品销售|基于springboot + vue绿色农产品销售系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·后端·宠物
zzjyr1 小时前
Webpack 生命周期原理深度解析
前端
xiaohe06011 小时前
💘 霸道女总裁爱上前端开发的我
前端·游戏开发·trae