概念
回调函数形式的异步：
promise的优势
promise形式实现代码
const p = new Promise((resolve, reject) => {
//resolve 成功时调用 函数类型的数据
//reject 失败时调用 函数类型的数据
setTimeout(() => {
let n = rand(1,100);
if(n <= 50){
resolve(n);}//将promise对象状态设置为成功
else{
reject(n);}//将promise对象状态设置为失败);
},1000);
});
//then方法，要有两个回调函数，形参约定俗成是value和reason，不需要则不写
p.then((value) => {},//成功执行第一个回调函数
(reason) =>{});//失败执行第二个回调函数
对发送Ajax代码进行封装
util.promisify方法
promise属性
promise状态
有三种状态
两种变换
成功不能变成失败，失败不能变成功。
promise对象的值
promise基本流程
API
构造函数
then
catch
then()的语法糖，相当于then(undefined,onRejected)
resolve
属于函数对象，不是实例对象哦
reject
属于函数对象，不是实例对象哦
all
属于函数对象，不是实例对象哦
race
属于函数对象，不是实例对象哦
几个重要问题
throw也可以哦
promise自定义封装
js文件
lass Promise{
//构造方法
constructor(executor){
//添加属性
this.PromiseState = 'pending';
this.PromiseResult = null;
this.callbacks = [];
const self = this;
function resolve(data) {
if(self.PromiseState !== 'pending') return;
//修改对象状态
self.PromiseState = 'fulfilled';
//修改对象结果值
self.PromiseResult = data;
//调用成功的回调函数
setTimeout(() => {
self.callbacks.forEach(item => {
item.onResolved(data);
});
}, );
}
function reject(data) {
if(self.PromiseState !== 'pending') return;
//修改对象状态
self.PromiseState = 'rejected';
//修改对象结果值
self.PromiseResult = data;
//调用失败的回调函数
setTimeout(() => {
self.callbacks.forEach(item => {
item.onRejected(data);
});
}, );
}
try {
//同步调用执行器函数executor
executor(resolve, reject);
} catch (e) {
//修改promise对象状态为失败
reject(e);
}
}
//添加then方法
then(onResolved, onRejected) {
const self = this;
//判断回调函数参数
if(typeof onRejected !== 'function'){
onRejected = reason => {
throw reason;
}
}
//如果没有p.then()没有传递参数
if(typeof onResolved !== 'function'){
onResolved = value => value;
}
return new Promise((resolve, reject) => {
//封装函数
function callback(type) {
try{
//获取回调函数执行结果
let result = type(self.PromiseResult);
//判断
if(result instanceof Promise){
//如果是promise类型的对象
result.then(v => {
resolve(v);
},r => {
reject(r);
})
}else{
//结果状态为成功
resolve(result);
}
}catch(e){
//修改promise对象状态为失败
reject(e);
}
}
//判断fulfilled状态
//调用回调函数
if (this.PromiseState === 'fulfilled') {
setTimeout(() => {
callback(onResolved);
}, );
}
//判断rejected状态
if (this.PromiseState === 'rejected') {
setTimeout(() => {
callback(onRejected);
}, );
}
//判断padding状态
if (this.PromiseState === 'pending') {
//保存回调函数
this.callbacks.push({
//简写形式onResolved：onResolved
onResolved: function() {
callback(onResolved);
},
onRejected:function() {
callback(onRejected);
}
})}
})
}
//添加catch方法
catch(onRejected) {
return this.then(undefined, onRejected);
}
//添加resolve方法
static resolve(value) {
//返回promise对象
return new Promise((resolve, reject) => {
if(value instanceof Promise){
value.then(v=>{
resolve(v)
},r=>{
reject(r)
})
}else{
//状态设置为成功
resolve(value);
}
})
}
//添加reject方法
static reject(reason) {
return new Promise((resolve, reject) => {
reject(reason)
})
}
//添加all方法
static all(promises) {
//返回一个promise的变量
return new Promise((resolve, reject) => {
//声明变量
let count = 0;
let arr = [];
//遍历
for(let i = 0;i<promises.length;i++){
promises[i].then(v => {
//对象状态成功
count++;
//将当前promise对象成功结果存入数组
arr[i] = v;
//判断是否都成功
if(count === promises.length){
//修改为成功的状态
resolve(arr);
}
},r => {
reject(r);
})
}
})
}
//添加race方法
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);
})
}
})
}
}
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./promise.js"></script>
</head>
<body>
<script>
let p1 = new Promise((resolve, reject) =>{
resolve('ok');
console.log(111);
// reject("error");
// throw 'error';
// setTimeout(() => {
// resolve('ok');
// // reject('error')
// }, 1000)
});
p1.then(value => {
console.log(value);
// return 'oh y';
//抛出异常
// throw 'fail';
},
reason =>{
console.warn(reason);
})
// const p1 = Promise.reject('error')
const p2 = Promise.resolve('okk')
console.log(333);
</script>
</body>
</html>
async
和then返回结果一致
await
async和await结合
对比回调函数形式
Ajax请求
