前端Promise - ToB企服应用市场:ToB评测及商务社交产业平台

function rand(m, n) {
return Math.ceil(Math.random() * (n - m + 1)) + m - 1;
}
// const btn = document.querySelector('#btn');
// btn.addEventListener('click', function(){
// setTimeout( () => {
// let n = rand(1,100);
// console.log(n);
// if(n <= 30){
// alert('恭喜你中了10万rmb大奖！！！');
// }
// else{
// alert('再接再厉');
// }
// },1000);
// })
// promise改写这段代码
const p = new Promise((resolve, reject) => {
setTimeout(() => {
let n = rand(1, 100);
console.log(n);
if (n <= 30) {
resolve(n);
}
else {
reject(n);
}
}, 1000)
});
p.then((result) => {
alert('恭喜你中了10万rmb大奖！！！ ' + result);
}, (error) => {
alert('再接再厉 ' + error);
})

复制代码

const fs = require('fs');
// fs.readFile('./text.txt', 'utf-8',(err,data) => {
// if(err)
// console.log('读取文件失败');
// else{
// console.log(data);
// }
// })
let p = new Promise((resolve, reject) => {
fs.readFile('./text.txt', 'utf-8', (err, data) => {
if (err)
reject(err);
else {
resolve(data);
}
});
});
p.then((data) => {
console.log(data);
}, (err) => {
console.log('读取文件失败');
});

复制代码

var btn = document.querySelector('button');
btn.addEventListener('click', function () {
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.baidu.com');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(xhr.status);
}
}
}
});
p.then(value => {
console, log(value);
}, reason => {
console.warn(reason);
})
})

复制代码

function mineReadFile(path) {
return new Promise((resolve, reject) => {
require('fs').readFile(path, 'utf-8', (err, data) => {
if (err) reject(err);
resolve(data);
})
})
}
mineReadFile('./成绩-ok.txt').then((value) => {
console.log(value);
}, (reason) => {
console.log(reason);
});

复制代码

const util = require('util');
const fs = require('fs');
let mineReadFile = util.promisify(fs.readFile);
mineReadFile('./1.txt').then(() => { }, () => { });

复制代码

function sendAJAX(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr);
}
else {
reject(xhr.status);
}
}
}
})
}
sendAJAX('www.baidu.com').then(value => {
console.log(value);
}, warn => {
console.log(warn);
})

复制代码

let p = new Promise((resolve, reject) => {
// 只能三选一
// 1. resolve函数，由pending => fulfilled(resolved)
resolve('ok');
// 2. reject函数，由pending => rejected
reject('error');
// 3. 抛出错误
throw '出问题了';
})

复制代码

let p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 2000)
})
p.then(value => {
// 第一个then
return new Promise((resolve, reject) => {
resolve(value)
})
}, reason => { }).then(value => {
// 第二个then
console.log(value);
}).then(value => {
// 第三个then
console.log(value);
})

复制代码

// 用类封装Promise
class Promise {
// Promise构造方法，接收一个函数作为参数，
// 这个函数就是使用时用来改变Promise对象状态的函数，所以这个函数传入Promise后直接调用
// exeutor传入了两个函数参数，就是resolve和reject, 在同步执行时会按照情况调用
constructor(exeutor) {
this.promiseState = 'pendding';
this.promiseResult = null;
// callback用来保存回调
// 异步任务时，会先执行then，结果为pendding，
// 等到异步执行时，改变了状态，但是then已经执行过了，那么对应的回调函数（使用者自己设置的）就不能再被调用了，
// 而且exeutor并不知道使用者设置的回调函数内容
// 那么此时，用callback来保存这两个函数的内容，在异步执行时，就可以通过callback来调用这两个回调函数
// 在resolve和rejected两个改变状态的函数被调用时，判断callback有无内容，
// 有内容就说明then先执行了，为异步任务，使用callback调用
// 有多个回调，用数组来存储，每个位置存一个对象，每个对象里存两个回调函数
this.callback = [];
const that = this;
function resolve(data) {
// resolve函数的任务
// 1. 修改对象的状态（promiseState）
// 2. 设置对象结果值（promiseResult）
// 状态只能改变一次
if (that.promiseState !== 'pendding') return;
// 这两个值都是属于实例对象的，打印实例对象可以看到，所以用this来指向
// 注意：resolve函数不是实例对象调用的，而是window
// 所以要提前存好this，在这里才能正确指向实例对象的属性;
// 或者使用箭头函数(箭头函数没有this，所以如果用到this就是定义它的对象) let resolve = (data) => {}
that.promiseState = 'fulfilled';
that.promiseResult = data;
// 当改变状态的函数是异步任务时，会先执行then，再改变状态，那么这个时候回调函数就是在改变状态后执行
// 这个时候需要拿到回调函数，用callback来保存这几个回调函数，然后在这里调用callback，
// 否则就算状态改变了回调函数也不会再被执行了
if (that.callback.onResolve) {
// 要注意回调函数都是异步执行的哦
setTimeout(() => {
that.callback.forEach(item => {
item.onResolve;
})
});
}
}
function reject(data) {
// 状态只能改变一次
if (that.promiseState !== 'pendding') return;
that.promiseState = 'rejected';
that.promiseResult = data;
if (that.callback.onReject) {
setTimeout(() => {
that.callback.forEach(item => {
item.onReject;
})
})
}
}
// 注意：抛出异常也是可以改变对象状态的
try {
exeutor(resolve, reject)(); // 同步执行传入的参数
}
catch (e) {
reject(e);
}
}
// 添加then方法，传入了两个函数作为参数
then(onResolve, onReject) {
// 异常穿透处理
// 如果函数没有写失败回调函数，当函数失败时，就会直接报错，
// 所以我们让没传入的失败回调默认为继续向下抛出错误就行，这样下一个promise也因为throw状态为失败
if (typeof onReject !== 'function') {
onReject = reason => {
throw reason;
}
}
// 基于异常穿透，扩展一下，让成功回调函数没传入时也有一个默认内容，增强容错性
// 默认为返回成功值。
if (typeof onResolve !== 'function') {
onResolve = value => value; //简写，return value
}
// then方法返回一个新的promise，新promise的状态由then执行的结果的返回值决定
// 用return返回一个Promise对象
return new Promise((resolve, reject) => {
const self = this;
// 把这个根据执行结果返回新Promise的函数封装起来，在then的具体指定回调时直接调用，
// 同步、异步都要用，反正只要执行回调函数的地方都要用到
// 让指定回调和返回同时执行
// 这里用箭头函数的话内部用this是没有问题的
let callback = (type) => {
// 抛出异常的话，新Promise就是失败状态
try {
// 用result拿到当前promise的执行结果，不管当前promise的状态是什么，
// 新promise只看它执行后的结果，最主要就是关注它的回调函数是不是又是一个promise
// 这句话就是既执行回调又将结果保存起来
let result = type(self.promiseResult);
if (result instanceof Promise) {
// 如果使用者嵌套了Promise，那么result就是这个Promise，那么新Promise的状态由这个promise的状态来决定
// 使用它的then方法指定新函数的状态，
// 注意，一般来说then都是指定自己的回调函数，但是这里传进来的使用者Promise相当于返回给了新Promise，所以只要改变状态，也只能改变状态，
// 使用者传进来的Promise的then不需要在这里改，改新函数就行了，否则会嵌套太多回调
result.then(v => { resolve(v) }, r => { reject(r) })
}
else {
// 如果返回的不是Promise，那么它的状态一定是成功，调用对应函数改变状态。
resolve(result);
}
} catch (e) {
// 抛出异常
reject(e);
}
}
// 状态为成功时调用onResolve，失败时调用onReject
// 设置回调函数是异步的（then异步），用setTimeout设置异步
if (this.promiseState === 'fulfilled') {
setTimeout(() => {
callback(onResolve);
})
}
if (this.promiseState === 'rejected') {
setTimeout(() => {
callback(onReject);
})
}
if (this.promiseState === 'pendding') {
// callback是一个数组，then回调函数可以设置多个，都可以执行
this.callback.push({
// 异步要返回执行结果也可以调用callback，只要把它用function包起来，回调函数就可以正常被调用了
onResolve: function () {
callback(onResolve);
},
onReject: function () {
callback(onReject);
}
})
}
})
}
// catch方法添加，传入一个函数参数作为失败回调，只指定失败回调
// 前面已经写好了then，其实就是只给promise指定失败回调，resolve设置为undefined就行
// 另外还要实现异常穿透，需要在then的抛出异常中设置允许reject没有定义的情况，这种情况下就设置reject为继续抛出异常
// 事实上，没传onResolve的时候也应该考虑，有些情况就是不需要
// 这样写完以后，这一层Promise没传回调函数，它的下一层Promise仍然能根据它的构造函数的改变状态情况得到自己的状态
catch(onReject) {
return taht.then(undefined, onReject);
}
// resolve方法，它是属于Promise，不是属于实例对象的，静态函数
// 这个方法的目的是快速获得一个成功的对象
static resolve = (value) => {
return new Promise((resolve, reject) => {
if (value instanceof Promise) {
value.then((v) => {
resolve(v);
}, (r) => {
reject(r);
})
}
else {
resolve(value);
}
})
}
// reject方法封装，不管Promise状态如何改变，属于Promise，静态函数
// 快速获得一个失败的对象
static reject(reason) {
return new Promise((resolve, reject) => {
reject(reason);
})
}
// all方法封装
//传入多个Promise对象，都成功新promise才成功，
// 如果成功，就把这个回调函数先存起来，要不然新Promise就直接成功了，后面要是失败了就不能改变它的状态了
// 如果失败，直接执行
static all(promises) {
return new Promise((resolve, reject) => {
let count = 0;
let arr = [];
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
count++;
arr[i] = v;
if (count === promises.length) {
resolve(arr);
}
}, r => {
reject(r)
})
}
})
}
// race方法封装
// 由最先执行完改变状态的promise决定，直接让每一个promise的then都指定新Promise状态就行了
static race(promises) {
return new Promise((resolve, reject) => {
for (let i = 0; i < promises.length; i++) {
promises[i].then(v => {
resolve(v);
}, r => {
reject(r);
})
}
})
}
}

复制代码

async function main() {
return 111;
}
let result = main();
// result.promiseState = 'fulfilled'

复制代码

async function main() {
let p = new Promise((resolve, reject) => {
resolve('ok');
})
let q = new Promise((resolve, reject) => {
reject('no');
})
// 1.右侧为promise对象
let res1 = await p;
console.log(res1);
// 2.promise是失败的
try {
let res2 = await q;
} catch (e) {
console.log(e)
}
}
main();

复制代码