JavaScript所有代码都是单线程执行的,所以avaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现
Js 的异步提高了程序的执行效率，同时也减少了程序的可读性。
回调陷阱
异步操作会在将来的某个时间点触发一个函数调用
AJAX就是典型的异步操作
es6 promise
Promise有各种开源实现，在ES6中被统一规范，由浏览器直接支持。
promiseA+规范中文 英文
// promise用法
new Promise(function (resolve, reject) {
log('start new Promise...');
var timeOut = Math.random() * 2;
log('set timeout to: ' + timeOut + ' seconds.');
setTimeout(function () {
if (timeOut < 1) {
log('call resolve()...');
resolve('200 OK');
}
else {
log('call reject()...');
reject('timeout in ' + timeOut + ' seconds.');
}
}, timeOut * 1000);
}).then(function (r) {
log('Done: ' + r);
}).catch(function (reason) {
log('Failed: ' + reason);
});
// promise all
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
console.log(results); // 获得一个Array: ['P1', 'P2']
});
// promise race
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
console.log(result); // 'P1'
});
同步回调和异步回调
// 同步回调
var arr = [1,2,3];
arr.forEach(function (x) {
console.log('first');
});
console.log('last');
// first first first
// last
// 异步回调
setTimeout(function () {
console.log('last')
}, 1000);
console.log('first');
// first
// last
实现一个简单的promise
promiseA+规范的内容
- Promise 本质是一个状态机。每个 promise 只能是 3 种状态中的一种：pending、fulfilled 或 rejected。状态转变只能是 pending -> fulfilled 或者 pending -> rejected。状态转变不可逆。
- then 方法可以被同一个 promise 调用多次。
- then 方法必须返回一个 promise。规范里没有明确说明返回一个新的 promise 还是复用老的 promise（即 return this），大多数实现都是返回一个新的 promise，而且复用老的 promise 可能改变内部状态，这与规范也是相违背的。
创建MyPromise类并根据规范初始化状态
image.png
promise的链式调用
image.png
实现一个
const log = console.log;
// 1.创建类
class MyPromise {
constructor(executor) {
// 2.等待状态
this.status = "pending";
// 初始化data
this.data = undefined;
// 初始化reason
this.reason = undefined;
// 3.执行函数executor，定义我们的resolve，reject回调
let resolve = (data) => {
// log('resolve executor: '+ data);
// 为了防止多次改变状态
if(this.status === 'pending') {
this.status = 'resolved'
this.data = data;
this.onFulFilledCallbacks.forEach((fn) => {
fn()
})
}
}
let reject = (reason) => {
// 为了防止多次改变状态
if(this.status === 'pending') {
this.status = 'rejected'
this.reason = reason;
this.onRejectedCallbacks.forEach((fn) => {
fn()
})
}
}
// 5.储存fulfilled的回调
this.onFulFilledCallbacks = [];
this.onRejectedCallbacks = [];
try {
executor(resolve, reject);
} catch(err) {
reject(err);
}
}
// 4. MyPromise原型上的then方法
then (onFulFilled, onRejected) {
// log('then executor');
// 处理无参数时的问题(值穿透)
onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : function(value) {return value};
// 抛出错误直接丢到下一个then中
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
let promise2;
// 由于 promise.then 执行的时候promise对象已经是确定状态，从程序上说对回调函数进行同步调用也是行得通的。
// 但是即使在调用 promise.then 注册回调函数的时候promise对象已经是确定的状态，
// Promise也会以异步的方式调用该回调函数，这是在Promise设计上的规定方针。
if(this.status === 'resolved'){
promise2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
try {
let x = onFulFilled(this.data);
// log('onFulFilled return value : '+x)
resolvePromsie(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
}, 0);
})
}
if(this.status === 'rejected'){
promise2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
try {
// If either onFulfilled or onRejected returns a value x,
// run the Promise Resolution Procedure [[Resolve]](promise2, x).
let x = onRejected(this.reason);
resolvePromsie(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
}, 0)
})
}
if(this.status === 'pending'){
// 这里要做一件很有意思的事。。。。
promise2 = new MyPromise((resolve, reject) => {
// 将回调放在数组中等待调用
this.onFulFilledCallbacks.push(() => {
process.nextTick(() => {
try {
let x = onFulFilled(this.data);
resolvePromsie(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
})
})
this.onRejectedCallbacks.push(() => {
process.nextTick(() => {
try {
let x = onRejected(this.reason);
resolvePromsie(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
});
})
})
}
return promise2;
}
catch(onRejected){
if(this.status === 'rejected'){
promise2 = new MyPromise((resolve, reject) => {
setTimeout(() => {
try {
// If either onFulfilled or onRejected returns a value x,
// run the Promise Resolution Procedure [[Resolve]](promise2, x).
let x = onRejected(this.reason);
resolvePromsie(promise2, x, resolve, reject);
} catch (err) {
reject(err);
}
}, 0)
})
}
}
}
function resolvePromsie(promise, x, resolve, reject){
// 规范说先promise是不是来自同一个对象，并返回一个理由
// If promise and x refer to the same object, reject promise with a TypeError as the reason.
try {
// If promise and x refer to the same object, reject promise with a TypeError as the reason.
// 如果是相同引用就抛出错误
// if(promise === x) return reject(new TypeError('不能循环引用'));
// if x is an object or function,
// 如果是对象，或是函数，我们就要看then是不是函数
if(x != null && (typeof x === 'object' || typeof x === 'function')){
// Let then be x.then
let then = x.then;
if(typeof then === 'function'){
// If then is a function, call it with x as this,
// first argument resolvePromise, and second argument rejectPromise, where:
// 执行then函数，拿到返回值
then.call(x, y => {
resolvePromsie(promise, y, resolve, reject);
}, (err) => {
reject(err);
})
}else{
resolve(x);
}
}else{
resolve(x);
}
} catch (err) {
reject(err)
}
}
var mypromise = new MyPromise((resolve,reject) => {
resolve('第一个异步任务 OK');
// let timeOut = Math.random()*2;
// setTimeout(function () {
// if (timeOut < 1) {
// resolve('第一个异步任务 OK');
// }
// else {
// reject('第一个异步任务 reject');
// }
// }, timeOut * 1000);
})
var mypromise2 = new MyPromise((resolve,reject) => {
resolve('第二个异步任务');
})
// 测试
mypromise.then(function(data){
log(data)
return mypromise2;
},function(error){
log(error)
return mypromise2;
}).then().then().then(function(rd){
log(rd);
return 'test'
}).then(function(val){
log(val);
}).then(function(val){
log(val)
});
log('A'+111)
setTimeout(()=>{
log('setTimeout 0ms')
})
setTimeout(()=>{
log('setTimeout 10ms')
},10)