【一起来烧脑】读懂Promise知识体系
知识体系
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
image.png
请点赞！因为你的鼓励是我写作的最大动力！
官方微信公众号
吹逼交流群：711613774
吹逼交流群
