promise是js中异步编程的新解决方案
支持链式调用
//Promise的实现形式
//resolve 解决 函数类型数据
//reject 拒绝 函数类型数据
const p = new Promise((resolve,reject)=>{
let n = value; //可以传递参数
//包裹异步函数
resolve(n)
//成功调用resolver()
reject(n)
//失败调用reject()
})
//调用方法
p.then((value)=>{
//成功时执行的函数 value接受参数
},(reason)=>{
//失败时执行的函数 reason接送错误理由
});
promise封装axios
function sendAJAX(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("GET", url);
xhr.send();
//处理结果
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
//判断成功
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response);
} else {
reject(xhr.status)
}
}
}
})
}
//调用
sendAJAX('接口地址')
.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
});
Promise 的状态
实例对象中的一个属性 [PromiseState]
pending 未决定的 (最后只会出现下面两种情况中的一种——成功或失败)
resolve / fullfilled 成功
rejected 失败
Promise 对象的值
实例对象中的另一个属性 [PromiseResult]
保存着对象 [成功/失败] 的结果,通过函数取出后进行修改
resolve
reject
catch方法
失败时侯进入(内部实现也是用then方法实现)
let p = new Promise((resolve, reject) => {
reject(111)
})
p.catch(eer => {
console.log(eer)
})
Promise.resolve 方法
Promise.reject 方法
Promise.all 方法
Promise.race 方法![](https://i-blog.csdnimg.cn/blog_migrate/8e43ee03d806c10a5303aad43f27b437.png)
Promise如何修改对象状态
异常穿透
对于所有的错误可以在最后添加一个catch进行处理输出
async与await
1、async
(一)函数的返回值为promise对象
(二)promise对象的结果由async函数执行的返回值决定
2、await
(一)await 右侧的表达式一般为promise对象,但也可以是其他值
(二)如果表达式是promise对象,await返回的是promise成功的值
(三)如果表达式是其它值,直接将此值作为await的返回值
(四)await必须卸载async函数中,但async函数中可以没有await
(五)如果await的promise失败了,就会抛出异常,需要通过try...catch捕获处理
3、案例
注意点
1、promise内部是同步调用的:
let p = new Promise((resolve,reject)=>{
console.log(111)
})
console.log(222)
//答应结果
// 111
// 222
2、改变状态和回调函数的执行谁先谁后
3、中断promise链
返回一个pending状态的promise对象