【一起来烧脑】读懂Promise知识体系

达达前端

发布于 2019-07-18 16:27:58

4070

发布于 2019-07-18 16:27:58

文章被收录于专栏：达达前端达达前端

知识体系

Promise基础语法，如何处理错误，简单介绍异步函数

内容

错误处理的两种方式：

reject('错误信息').then(null, message => {})

throw new Error('错误信息').catch(message => {})

推荐第二种

4个案例promise

// 1
doSomething().then(function () {
 return doSomethingElse();
});

// 2
doSomething().then(function () {
 doSomethingElse();
});

// 3
doSomething().then(doSomethingElse());

// 4
doSomething().then(doSomethingElse);

.then()

状态响应函数可以返回新的Promise，或其它值如果返回新的Promise，那么下一级.then()会在新Promise状态改变之后执行

如果返回其它任何值，则会立刻执行下一级.then()

.then()接受两个函数作为参数： fulfilled和rejected .then()返回一个新的Promise实例，所以它可以链式调用

当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行

可以有多个then，成为队列，每个then都会返回一个新的promise实例

image.png

promise状态

Promise状态发生改变，会触发.then()里的响应函数处理后续步骤。 Promise状态一经改变，不会再变。

promise 结构！！

new Promise(
 // 执行器
 function (resolve, reject) {
 // 一段耗时很长的异步操作
 resolve(); // 数据处理完成
 reject(); // 数据处理出错
 }
).then(function A() {
 // 成功，下一步
 }, function B() {
 // 失败
 });

Promise.race()

常见用法：把异步操作和定时器放在一起如果定时器先触发，就认为超时，告知用户

thenable就是有一个then()函数的对象

.then( value => {
 console.log(value, 'World');
 return Promise.resolve(new Promise( resolve => {
  setTimeout(() => {
   resolve('Good');
  }, 2000);
 }));
})
.then( value => {
 console.log(value, 'evening');
 return Promise.resolve({
  then() {
   console.log('everone');
 }
})
});

Promise.all 与map 把所有文件读出之后再处理，所以用到了promise.all()

const FileSystem = require('./FileSystem');

function findLargest(dir){
 return FildSystem.readDir(dir, 'utf-8')
 .then( files => {
  return Promise.all( files.map( file=> {
   return new Promise(resolve => {
    fs.stat(path.join(dir, file), (err, stat) => {
     if(err) throw err;
     if(stat.isDirectory()) {
      return resolve({
       size: 0
     });
    }
   stat.file = file;
    resolve(stat);
   });
   });
  }));
 })

Promise 释义

Promise对象用于异步计算一个Promise表示一个现在，将来或永久不可能可用的值

主要用于异步计算可以将异步操作队列化，按住期望的顺序执行，返回符合预期的结果可以在对象之间传递和操作Promise，帮助我们处理队列

异步产生的原因

异步操作的常用语法：

document.getElementById('start').addEventListener('click', start, false);

function start() {
 // 响应事件
}

// jquery
$('#start').on('click', start);

回调：

// 比较常见的有 ajax
$.ajax('http://baidu.com', {
 success: function (res) {
  // 这里就是回调函数了
 }
});
// 或者在页面加载完毕后回调
$(function () {
 // 这里也是回调函数
});

异步操作以事件为主回调主要出现在Ajax和File API 这个时候问题尚不算严重

异步回调的问题

遍历目录，找到最大的文件

const fs = require('fs');
const path = require('path');

function findLargest(dir, callback) {
 fs.readdir(dir, function (err, files) {
  if (err) return callback(err); 
  let count = files.length;
  let errored = false;
  let stats = [];
  files.forEach( file => {
   fs.stat(path.join(dir, file), (err, stat) => {
    if(errored) return;  
    if(err) {
    errored = true;
    return callback(err);
   }
 stats.push(stat);

Promise 简介

new Promise(
// 执行器
function (resolve, reject) {
 // 一段耗时很长的异步操作
 resolve(); // 数据处理完成
 reject(); // 数据处理出错
 }
)
 .then(function A() {
 // 成功，下一步
 },function B() {
 // 失败，做相应处理
 });

Promise是一个代理对象，它和原先要进行的操作并无关系。

它通过引入一个回调。 Promise有3个状态

pending [待定] 初始状态
fulfilled [实现] 操作成功
rejected [被否决] 操作失败

promise状态发生改变，就会触发.then()里的响应函数出来了后续步骤。 Promise状态一经改变，不会再变。

image.png

最简单的实例

定时器

new Promise( resolve => {
 setTimeout( () => {
  resolve('hello');
 }, 2000);
})
 .then( value => {
 console.log( value + 'world');
});

两步执行的范例

new Promise( resolve => {
 setTimeout( () => {
 resolve('hello');
 }, 2000);
})
.then( value => {
 console.log(value);
 return new Promise( resolve => {
  setTimeout( () => {
  resolve('world')
 }, 2000);
 });
})
.then(value => {
 console.log(value + 'world');
});

对已完成的 Promise 执行 then

let promise = new Promise(resolve => {
 setTimeout(() => {
  console.log('the promise fulfilled');
  resolve('hello,world');
  }, 1000);
});
setTimeout( () => {
 promise.then( value => {
 console.log(value);
});
}, 2000);

then 里不返回 Promise

image.png

then 的嵌套

image.png

.then的链式调用

image.png

console.log('start');
new Promise( resolve => {
 console.log('Step 1');
 setTimeout(() => {
  resolve(100);
 }, 1000);
})
 .then( value => {
  return new Promise(resolve => {
   console.log('Step 1-1');
   setTimeout(() => {
    resolve(110);
   },1000);
})
 .then( value=> {
  console.log('Step 1-2');
  return value;
 })
  .then( value=> {
  console.log('Step 1-3');
  return value;
 });
})
.then(value=> {
 console.log(value);
 console.log('Step 2');
});

Promise的四种情况：

doSomething()
.then(function(){
 return doSomethingElse();
 })
.then(finalHandler);

第一步执行，doSomething，第二步执行，doSomethingElse(undefined)，第三步执行，finalHander(resultOfDoSomethingElse)

doSomething()
 .then(function () {
  doSomethingElse();
 })
 .then(finalHander);

第一步执行doSomething，第二步执行doSomethingElse(undefined)，findHandler(undefined)

doSomething()
.then(doSomethingElse())
.then(finalHandler);

第一步，doSomething，doSomethingElse(undefined)，第二步，finalHandler(resultOfDoSomething)

doSomething()
.then(doSomethingElse)
.then(finalHandler);

第一步doSomething，第二步doSomethingElse(resultOfDoSomething)，第三步，finalHandler(resultOfDoSomethingElse)

这四项承诺有什么区别？

doSomething().then(function () {
  return doSomethingElse();
});

doSomething().then(function () {
  doSomethingElse();
});

doSomething().then(doSomethingElse());

doSomething().then(doSomethingElse);

错误处理

Promise会自动捕获内部异常，并交给rejected响应函数处理。

image.png

image.png

错误和then连用

.catch + .then()

image.png

image.png

image.png

Promise.all

image.png

image.png

image.png

image.png

与 .map 连用

image.png

实现队列

image.png

image.png

image.png

image.png

image.png

image.png

实现爬虫

image.png

Promise.resolve

Promise.reject

Promise.race

class Confirm {
 constructor() {
 this.promise = new Promise( (resolve, reject) => {
  this.confirmButton.onClick = resolve;
  this.cancelButton.onClick = reject;
 });
}
}

异步函数

async/await

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.07.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

node.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

node.js

登录后参与评论

0 条评论

热度