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

知识体系

Promise基础语法，如何解决错误，简单详情异步函数

内容

错误解决的两种方式：

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

推荐第二种

4个案例promise

// 1doSomething().then(function () { return doSomethingElse();});// 2doSomething().then(function () { doSomethingElse();});// 3doSomething().then(doSomethingElse());// 4doSomething().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.pngimage.png

错误和then连用

.catch + .then()

image.pngimage.pngimage.png

Promise.all

image.pngimage.pngimage.pngimage.png

与 .map 连用

image.png

实现队列

image.pngimage.pngimage.pngimage.pngimage.pngimage.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

image.png

请点赞！由于你的鼓励是我写作的最大动力！

官方微信公众号

吹逼交流群：711613774

吹逼交流群 上一篇 目录 下一篇