Promise.then也是一个Promise,但是除了第一个then根据状态来回调的，Promise.then().then…都是执行成功回调
new Promise((resolve, reject) => {
reject("失败")
}).then(msg => {
console.log(msg);
}, error => {
console.log(error); //执行失败
}).then(a => {
console.log('成功'); //执行成功
}, b => {
console.log('失败');
}).then(a => {
console.log('成功'); //执行成功
}, b => {
console.log('失败');
})
Promise链式结构 成功可通过return 传递个下一个then回调 不return后面成功回调函数就拿不到，可以做处理再return 给下一层
还可以return一个Promise对象 return 出来的就是她的状态，上一级成功的回调就会执行下一级的成功回调
new Promise((resolve, reject) => {
resolve('成功1')
}).then(msg => {
return new Promise((resolve, reject) => {
resolve('解决')
})
}).then(a => {
console.log(a); //解决
})
直接return 后面的then默认调用成功的回调
new Promise((resolve, reject) => {
reject('...')
}).then(msg => {}, error => {
//return error; 这个默认后面的then默认调用成功的回调
return new Promise(null, error => {
error('///'); //这样才会让后面的then调用失败的回调
})
}).then(a => {
console.log(a);
}, b => {
console.log('失败');
})
后面的then就是对前面返回的promise的处理
除了返回标准的promise对象外，返回自身参数，还可返回别的类型
可返回对象，一样能被下面then接收到，返回 then 会封装成promise对象
new Promise((resolve, reject) => {
reject('...')
}).then(msg => {}, error => {
return {
then(resolve, reject) {
reject('失败')
}
};
}).then(a => {
console.log('a' + a);
}, b => {
console.log('b' + b); //b失败
})
封装ajax的异步请求 可以按序的请求接口数据
Promise 错误监测，与catch的使用
用then的错误回调能打印错误结果，用catch() 代替then的错误回调也是可以的
new Promise((resolve, reject) => {
//reject("错误");
//reject(new Error("promise"))
// throw new Error('fail');
//hd + 1;系统自动抛异常
}).then(msg => {}).catch(error => {
console.log(error);
})
用失败的回调，回调结束了 就不会到catch里面的
new Promise((resolve, reject) => {
reject("错误");
//reject(new Error("promise"))
// throw new Error('fail');
//hd + 1;系统自动抛异常
}).then(msg => {}, resonse => {
console.log("a", resonse);
}).catch(error => {
console.log("b", error);
})
既catch前面没有错误的捕获处理，就到catch来解决，前面有错误的捕获，就论不到catch，所以推荐把catch放到最后来捕获
上述几种情况，不管是rejec() 还是throw new Error() 等 都能被捕获到错误
finally实现异步加载动画：在发送请求的时候可以显示动画,最后在finally()函数中将动画取消,不管获取失败还是成功动画总会在获取时显示 最后消失
finally() 不管成功还是失败都会执行
new Promise((resolve, reject) => {
resolve('成功')
}).then(msg => {
console.log('b', msg);
}, resonse => {
console.log("a", resonse);
}).finally(() => {
console.log('永远执行');
})promise 异步加载图片
var ig =new Image(); 创建一个Image对象就会生成一个<img>标签
常见属性可以添加的有: src,width,height,align,alt,name,border...
常见事件：onabort onerror onload
function loadImage(src) {
return new Promise((resolve, reject) => {
const image = new Image();
// image.onload = () => {
// resolve(image)
// };
image.onload = resolve(image); //俩中写法
image.src = src;
image.onerror = reject;
document.body.appendChild(image);
})
}
loadImage('./car1.jpg').then(image => {
image.style.border = '5px solid' //成功的回调
})promise 封装定时器
不是所有的回调都是放到队列中 稍后执行
同步的回调函数不会 稍后执行 异步的才会放到队列中
如forEach遍历 就是同步的回调 就不会稍后执行
常见内置错误：
没有捕获错误的时候Uncaught错误后面代码不会再执行
新建文本文档.html:19 Uncaught ReferenceError: a is not defined
ReferenceError: 引用不存在的变量错误
Uncaught ReferenceError: a is not defined
TypeError:类型错误 比如不是对象还以对象的类型输出
Uncaught TypeError: Cannot read property 'xx' of undefined
RangeError:数据不在范围内 如递归死循环 超出最大递归次数
Uncaught RangeError: Maximum call stack size exceeded
SyntaxError: 语法错误
Uncaught SyntaxError: Unexpected end of input
error是个对象 直接打印error 会默认调用error. stack 显示，可以在debugger里看清楚error对象,她的构造函数就是错误类型
自定义错误throw new Error()抛出 再来捕获 new错误的时候最好是Error()不需要细化到具体哪个类型错误
function somthing() {
if (Date.now() % 2 === 1) {
console.log('正常');
} else {
throw new Error('有错')
}
}
try {
somthing();
} catch (error) {
alert(error.message)
}
从语法上来：Promise是一个构造函数
从功能上说：Promise对象用来封装一个异步操作并获取其结果
流程图：
onResolved onRejectd 是真正的函数名
为什么要用Promise?
第一：
相对于传统的纯回调函数时间上更灵活。 获取到了数据可以晚点再执行回调，3s获得了数据，但是5s之后再执行回调可以，而传统函数必须再启动异步任务前就指定好回调函数，一旦拿到结果就马上回调了
第二：
支持链式调用，支持解决回调函数地狱问题。回调地狱是回调函数的嵌套，上一个函数的结果作为下一个函数的条件
链式调用时候就可以解决这个问题，并且只要写一个catch来进行最后的错误回调
一个Promise对应一个异步任务
回调地狱的终极解决方法:因为promise还有回调函数
扫一扫
776
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
