js异步解决方案之promise
1. promise的定义
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。
参考
理解：
- 没有异步就不需要promise。
- Promise本身不是异步，只是我们去编写异步代码的一种方式
2. promise 的规范
Es6将promise纳入自己规范的时候，也遵循了一个相应的标准 — ``Promise A+规范。
将其归纳为4321规范
4：4大术语 3：3种状态 2：2种事件 1：1个对象
2.1 四大术语
-
解决（fulfill）：指一个 promise 成功时进行的一系列操作，如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决，但在后世的 promise 实现多以 resolve 来指代之。 -
拒绝（reject）：指一个 promise 失败时进行的一系列操作。 -
终值（eventual value）：所谓终值，指的是 promise 被解决时传递给解决回调的值，由于 promise 有一次性的特征，因此当这个值被传递时，标志着 promise 等待态的结束，故称之终值，有时也直接简称为值（value）。 -
据因（reason）：也就是拒绝原因，指在 promise 被拒绝时传递给拒绝回调的值。
2.2 3种状态
- 等待态（Pending）
- 执行态（Fulfilled）
- 拒绝态（Rejected）
针对每种状态的规范
等待态（Pending）
处于等待态时，promise 需满足以下条件：
- 可以迁移至执行态或拒绝态
执行态（Fulfilled）
处于执行态时，promise 需满足以下条件：
- 不能迁移至其他任何状态
- 必须拥有一个不可变的终值
拒绝态（Rejected）
处于拒绝态时，promise 需满足以下条件：
- 不能迁移至其他任何状态
- 必须拥有一个不可变的据因
2.3 2种事件
针对3种状态，只有如下两种转换方向：
- pending –> fulfilled
- pendeing –> rejected
在状态转换的时候，就会触发事件。
如果是
pending –> fulfiied，就会触发onFulFilled事件 如果是pendeing –> rejected，就会触发onRejected事件
2.4 1个对象
就是指promise对象
3. promise的基本用法
3.1 基本用法
let p = new Promise(function (resolve,reject) {
reject("no");
})
console.log('p :', p);
回调函数中的两个参数，其作用就是用于转换状态：
resolve，将状态从pending –> fullFilled reject，将状态从pending –> rejected
3.2 then 方法
在状态转换的时候，就会触发事件。
如果是pending –> fulfiied，就会触发onFulFilled事件
如果是pendeing –> rejected，就会触发onRejected事件
针对事件的注册，Promise对象提供了then方法，如下：
3.3promise典型定义
3.3.1 案例1：读取文件操作
const fs = require("fs");
let p = new Promise(function (resolve,reject) {
fs.readFile("03-js基础/a.txt","utf8",(err,date)=>{
if(err){
reject(err);
}else{
resolve(date);
}
});
});
p.then(result=>{
console.log('result :', result);
}).catch(err=>{
console.log('err :', err);
});
3.3.2 案例2：根据随机数返回结果
let p = new Promise((resolve,reject)=>{
setTimeout(()=>{
let num = Math.random();
if(num>0.5){
resolve("success");
}else{
reject("fail");
}
},1000);
});
p.then(result=>{
console.log('result :', result);
},err=>{
console.log('err :', err);
})
3.3.3 读取文件封装
const fs = require("fs");
function readFile(file){
return new Promise((resolve,reject)=>{
fs.readFile("file","utf8",(err,date)=>{
if(err){
reject(err);
}else{
resolve(date);
}
});
});
}
readFile("a.txt").then(result=>{
console.log('result :', result);
},err=>{
console.log('err :', err);
})
3.4 all和race方法
all：所有 race：竞赛
all和race都是Promise构造器对象的静态方法。直接使用Promise调用，如下：
- Promise.all（）
- Promise.reace（）
- 返回值都是
promise对象。
- 返回值都是
当有多个异步操作的时候，经常会有如下两种需求：（有点类似于运算符中的 逻辑与 和 逻辑或）
-
确保所有的异步操作完成之后，才进行某个操作，只要有一个失败，就不进行
-
只要有一个异步操作文章，就里面执行某个操作。
all使用如下
如有错误，如下
reac的用法
4. 使用第三方的Promise库
针对第三方的promise库，有两个知名的库：
- bluebird
- q.js
以bluebird为例，在服务端演示其用法。
第一步，安装
第二步，使用
4. 手写最完整版的promise原理
可以进入Github中更有层次的学习原理，本人在github中 逐步的封装了基础版promise,升级版promise,完整版的promise,
Github地址:github.com/quyuandong/…
示例
源码
// 定义当前promise的状态
const PENDING = 'PENDING'
const RESOLVED = 'RESOLVED'
const REJECTED = 'REJECTED'
//=================================================================
// promise对象
class Promise {
constructor(exector) {
// 初始化status为等待状态
this.status = PENDING;
// 成功的值
this.value = undefined;
// 失败的原因
this.reason = undefined;
// 存储成功的回调函数
this.onResolvedCallbacks = [];
// 存储失败的回调函数
this.onRejectedCallbacks = [];
// 成功的处理函数
let resolve = (value) => {
if (this.status == PENDING) {
this.value = value; //存储成功的值
this.status = RESOLVED; //将当前的状态修改为成功状态
this.onResolvedCallbacks.forEach(fn => fn())
}
}
// 失败的处理函数
let reject = (reason) => {
if (this.status == PENDING) {
this.reason = reason; //存储失败的原因
this.status = REJECTED; //将当前的状态修改为失败状态
this.onRejectedCallbacks.forEach(fn => fn())
}
}
// 当pormise抛出异常时
try {
exector(resolve, reject) //立即执行函数
} catch (e) {
reject(e)
}
}
/**
* 参数：
* @param {*} onFulfilled 失败状态
* @param {*} onRejected 成功状态
*
* 说明：
* promise的链式，可以一直.then下去，需要then返回一个promise
* onFulfilled与onRejected的返回值，可能是一个promise 也可能是一个普通值
* 如果是promise，就采用它的状态
* 如果是普通值，这个值就作为下一个then成功的结果
*
*/
then(onFulfilled, onRejected) {
// 防止then中没有函数 p.then().then().then()...
onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
/**
* 创建一个promise，并返回一个promise，使得可以then可以进行链式调用
* settimeout作用： 使得该方法中，可以获取到promise2
* try作用： 处理onfulfilled可能抛出一个异常
*/
let promise2 = new Promise((resolve, reject) => {
// 成功状态的处理方法-------同步操作(执行器中没有异步代码)
if (this.status == RESOLVED) {
setTimeout(() => {
try {
let x = onFulfilled(this.value);// x可能是promise 也可能是普通值
// 假如x是promise(有自己的状态)，需要让pormise2拥有x同样的状态
resolvePromise(promise2, x, resolve, reject); // 处理promise2和x的关系
} catch (e) {
reject(e)
}
}, 0);
}
// 失败状态的处理方法-------同步操作(执行器中没有异步代码)
if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = onRejected(this.reason)
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0)
}
// 等待状态，将成功与失败的的操作进行保存-------同步操作(执行器中有异步代码)
if (this.status === PENDING) {
this.onResolvedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onFulfilled(this.value)
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0)
});
this.onRejectedCallbacks.push(() => {
setTimeout(() => {
try {
let x = onRejected(this.reason)
resolvePromise(promise2, x, resolve, reject);
} catch (e) {
reject(e)
}
}, 0)
})
}
})
return promise2;
}
}
//=================================================================
// 处理promise2和x的关系 ，x是onFulfilled或onRejected的返回值
function resolvePromise(promise2, x, resolve, reject) {
// 如果 x === promise2，则是会造成循环引用，自己等待自己完成，则报“循环引用”错误
if (promise2 === x) {
return reject(new TypeError('my Chaining cycle detected for promise'))
}
// 防止多次调用
let called;
// x是一个对象（不包含null）或是一个函数时
if (x !== null && (typeof x === "object" || typeof x === "function")) {
try {
// 有可能x上会被手动地加上一个then属性
let then = x.then;
if (typeof then === 'function') { // x是一个promise时
// 相当于 x.then(y=>{},r=>{})
then.call(x, y => {
if (called) return;
called = true;
// 递归，解决返回值里面扔是promise的问题
resolvePromise(promise2, y, resolve, reject)
}, r => {
if (called) return;
called = true;
// 采用promise失败结果向下传递
reject(r)
})
} else { // 此时x是一个对象，即返回的是一个对象
resolve(x)
}
} catch (e) { //当x抛出一个异常时
if (called) return;
reject(e)
}
} else { //x 是一个普通的值
resolve(x)
}
}
//=================================================================
// resolve静态方法
Promise.resolve = function (val) {
return new Promise((resolve, reject) => {
resolve(val)
});
}
//=================================================================
// reject静态方法
Promise.resolve = function (val) {
return new Promise((resolve, reject) => {
reject(val)
});
}
//=================================================================
// race静态方法
Promise.race = function (promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(resolve, reject)
}
});
}
//=================================================================
// all方法(获取所有的promise，都执行then，把结果放到数组，一起返回)
Promise.all = function (promises) {
let arr = [];
let y = 0;
function processData(index, data) {
arr[i] = data;
y++;
if (y == promises.length) {
return arr;
};
};
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(data => {
processData(i, data)
}, reject)
}
})
}
//================================================================
//
/**
* 验证promise的正确性
* 1，先在后面加上下述代码
* 2，npm 有一个promises-aplus-tests插件 npm i promises-aplus-tests -g 可以全局安装
* 3，命令行 promises-aplus-tests [js文件名] 即可验证
*/
// 目前是通过他测试 他会测试一个对象
// 语法糖
Promise.defer = Promise.deferred = function () {
let dfd = {}
dfd.promise = new Promise((resolve,reject)=>{
dfd.resolve = resolve;
dfd.reject = reject;
});
return dfd;
}
//=================================================================
// 导出一个promise
module.exports = Promise;
/**
* 注意：当在promise中出现异步的时候，必须先将then中成功和失败的回调函数
* 先进行保存，当promise中的状态发生改变的时候，才再进行执行
*/
